easyUI开发实战案例

easyUI之datagrid使用方法mergeCells合并行

2020-07-15  本文已影响0人  兰觅

说明:显示页面时加载数据行,并且根据其中某一列的数值生成编辑行数,同时合并相同的数据
效果如下:


合并行
  onLoadSuccess:function (data) {
            var indexRow=0;  //定义开始行索引
            var num=1;          //定义行数
            for (var i in data.rows) {
                indexRow=i;          //i=0
                num=data.rows[i].ss;  // 获取某一列的数值,这里为5

                if (indexRow!=0){
                    indexRow=data.rows[i-1].ss;   //行索引数5
                    num=data.rows[indexRow].ss;  //第二条行ss的值 值相同为 5
                }

                for (var j = 1; j <num; j++) {      //新加一行,在有数据的行的下一行
                    $("#gAppeaIncomingCheck").datagrid("insertRow", {
                        index: indexRow*1+1,               //  indexRow*1 乘以1是因为indexRow要为数字类型
                        row: {}                                  //插入空行
                    });
                }
                var merges = [      //所要合并的行字段
                    {field: 'itemNo'},
                    {field: 'inspectionItem'},
                    {field: 'inspectConditionStepMethod'},
                    {field: 'failName'},
                    {field: 'standard'},
                    {field: 'photo'},
                    {field: 'ssName'},
                    {field: 'aql'},
                    {field: 'measuringEquipment'},
                    {field: 'ss'},
                    {field: 'aQty'},
                    {field: 'rQty'}
                ];
                for (var k = 0; k < merges.length; k++) {        //循环读取合并行的字段,并进行合并
                    //console.info(i+"----"+indexRow+"---"+merges[k].field+"---"+num);
                    $("#gAppeaIncomingCheck").datagrid('mergeCells', {
                        index: indexRow*1,
                        field: merges[k].field,
                        rowspan:num*1
                    });
                }

            }
            //加载数据完成开启所有编辑行
            for (var index=0;index<data.total;index++){
                $("#gAppeaIncomingCheck").datagrid("beginEdit",index);
                editIndex =index;

            }
        }

注:由于我要存储数据到数据库,当点击保存时,合并行会自动分开,合并的相同数据只显示一行。合并的相同数据只存了一条。
由于以上原因,只能进行如下修改:
效果如下:


数据显示
  onLoadSuccess:function (data) { 
            var indexRow=0;
            var num=1;
            for (var i in data.rows) {
                indexRow=i;          //0   1
                num=data.rows[i].ss;  //5  null

                if (indexRow!=0){
                    indexRow=data.rows[i-1].ss;
                    num=data.rows[indexRow].ss;
                }

                for (var j = 1; j <num; j++) {
                    $("#gAppeaIncomingCheck").datagrid("insertRow", {
                        index: indexRow*1+1, // index start with 0
                        row:data.rows[indexRow]
                    });
                }
                $("#gAppeaIncomingCheck").datagrid('mergeCells', {
                            index: indexRow*1,
                            field: 'itemNo',
                            rowspan:num*1
                        });
            }

            //加载数据完成开启所有编辑行
            for (var index=0;index<data.total;index++){
                $("#gAppeaIncomingCheck").datagrid("beginEdit",index);
                editIndex =index;

            }
        }
上一篇下一篇

猜你喜欢

热点阅读