miniJquery-datagrid-合并单元格

时间:2024-03-22 20:31:30

官方的文档有demo,我们就不说官方的:参考http://www.miniui.com/docs/api/index.html#ui=datagridminiJquery-datagrid-合并单元格

这里的rowIndex,columnIndex分别代表行和列索引,均是从0开始算,rowSpan和colSpan分别代表要合并的行和列的宽度。 

项目中需把相同的商品把它的出库及入库及结存库位进行合并单元格处理效果如下:

miniJquery-datagrid-合并单元格

<div class="nui-fit">    
            <div  id="grid" class="nui-datagrid"  onbeforeload="onbeforeload"  onpreload="onpreload" pageSize="20"
                  sizeList="[20,50,100]" style="width:100%;height:100%" dataField="data"  ondrawcell="ondrawcell"
                  url="XXX.biz.ext" onload="qwLoad">

    function onpreload(e){
             //获取当前页的数据 
            dataAll=e.result.data;

   }

//合并单元格的首选加载函数, 在ondrawcell="ondrawcell"里合并容易会使页面的代码进入一直循环的怪圈(数据多时)

//循环数据获取需要进行合并的起始行及行数
        function qwLoad(e){
            var goodscode=null;
            var cellList = [];
            for(var i=0;i<dataAll.length;i++){
                //同个商品的总数
                var a = 0;
                //同商品的入库总数量
                var rnum = 0;
                //同商品的出库总数量
                var cnum = 0;
                //该商品的起始行索引
                var index;
                ////同商品的结存库数量
                var crnum = null;
                //
                goodscode = dataAll[i].GOODSCODE;
                for(var j=0;j<dataAll.length;j++){
                    if(goodscode==dataAll[j].GOODSCODE){
                        a = a+1;
                        rnum = rnum+Number(dataAll[j].RKNUM);
                        cnum = cnum+Number(dataAll[j].CKNUM);
                        if(a==1){
                            index = i;
                        }
                     }
                }
                crnum = rnum-cnum;

               //跳过该商品,读取下一商品
                i=i-1+a;
                cellList.push({rowIndex: index, columnIndex: 12, rowSpan: a, colSpan: 1});
                cellList.push({rowIndex: index, columnIndex: 13, rowSpan: a, colSpan: 1});
                cellList.push({rowIndex: index, columnIndex: 14, rowSpan: a, colSpan: 1});
                e.data[index].RKTOP=rnum;
                e.data[index].CKTOP=cnum;
                e.data[index].STOCKTOP=crnum;
                 /*e.sender.updateRow(e.data[index],{"RKTOP":rnum});
                e.sender.updateRow(e.data[index],{"CKTOP":cnum});
                e.sender.updateRow(e.data[index],{"STOCKTOP":crnum}); */
           }
           e.sender.mergeCells(cellList);
        }

思路:循环获取到每个商品的起始行的索引,及该商品共占的行数,同时要注意数据的索引及行数的取值(就是i+1,-1的问题),第二循环得到了改商品共占的行数,在跳到第一循环可以对第一循环的索引(i)进行赋值,这样就可以直接读下一个商品。(当然要对所有的数据进行排序先)