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;
}
}