miniUI - 合并Datagrid单元格_miniui合并单元格

miniUI - 合并Datagrid中单元格

简介

如效果图，拿到的需求是要合并考核方案相同的数据行的前7列

根据某一列的属性值来判断是否需要合并单元格，图中按照考核方案是否相同，合并了2行，也可能存在合并3行4行的情况，所以合并是动态的。

效果图

合并前

合并后

代码

 function mergeCells(grid) {  //grid为Datagrid对象
        //var grid = e.sender;  //e代表事件数据源，通过数据源拿到对象
        var len = grid.data.length;
        var data= grid.data;
        var i=0,num=1;
        var marges = [];
        for(i;i<len;i++){
            if(i==len-1){  //最后一行要单独处理
                var k=i+1-num;
                //rowIndex: 开始行（从0开始）, columnIndex: 开始列（从0开始）, rowSpan: 合并行数（最小为1）, colSpan: 合并列数（最小为1）
                marges.push(  {rowIndex: k, columnIndex: 0, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 1, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 2, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 3, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 4, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 5, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 6, rowSpan: num, colSpan: 1});
                grid.mergeCells(marges);
                continue;
            }
            if(grid.data[i].khfamc == grid.data[i+1].khfamc){ //决定合并的格子数
                num++;
            }
            if( grid.data[i].khfamc != grid.data[i+1].khfamc){
                var k=i+1-num;
                marges.push(
                    {rowIndex: k, columnIndex: 0, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 1, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 2, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 3, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 4, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 5, rowSpan: num, colSpan: 1},
                    {rowIndex: k, columnIndex: 6, rowSpan: num, colSpan: 1}
                );
                num=1;
            }
            grid.mergeCells(marges);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

小结

miniUI的东西网上资料很少，前端不熟的话，实现起来还挺费劲的（doge），希望大家遇到一些有代表性的小功能多多分享~~~