基于EasyUi的datagrid合并单元格JS写法
程序员文章站
2022-07-13 14:28:29
...
$('#dg').datagrid({
width: 'auto',
height: 'auto',
scrollbarSize: 0,
queryParams: {},
url: 'kkkk',
columns: [[
{ field: 'bh', title: '编号', width: 100, sortable: false },
{ field: 'mc', title: '名称', width: 120, sortable: false },
{ field: 'zf', title: '总分', width: 40, sortable: false }
]],
nowrap: false,
fitColumns: false,
striped: true,
rownumbers: false, //行号
singleSelect: false, //是否单选
onLoadError: function (e) {
$.messager.alert("提示", "加载失败", "error");
},
onLoadSuccess: function (data) {
var cells = ["kc", "uu"];
mergeCells('dg', data, cells);
});
}
});
//第一种
//dg:datagrid的id;data:onLoadSuccess: function (data){}中的data;cellnames:合并的列,var cells = ["ku", "uu"];
function mergeCells(dg, data, cellnames) {
for (var i = 0; i < cellnames.length; i++) {
var cellname = cellnames[i];
var merges = [];
for (var r = 0; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellname];
var rowspan = 1;
for (var r1 = r + 1; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellname];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
}
else {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
break;
}
if (r1 == data.rows.length - 1) {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
}
}
}
for (var j = 0; j < merges.length; j++) {
$('#' + dg).datagrid('mergeCells', {
index: merges[j].index,
field: cellname,
rowspan: merges[j].rowspan
});
}
}
}
//第二种
function mergeCells_table(dg, data, cellnames) {
var table = document.getElementById(dg);
for (var i = 0; i < cellnames.length; i++) {
var cellname = cellnames[i];
var merges = [];
for (var r = 0; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellname];
var rowspan = 1;
for (var r1 = r + 1; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellname];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
table.rows[r + 1].cells[i].rowSpan = rowspan;
table.rows[r1 + 1].cells[i].style.display = "none";
}
else {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
break;
}
if (r1 == data.rows.length - 1) {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
}
}
}
// for (var j = 0; j < merges.length; j++) {
// $('#' + dg).datagrid('mergeCells', {
// index: merges[j].index,
// field: cellname,
// rowspan: merges[j].rowspan
// });
// }
}
}
$('#dg').datagrid({
width: '100%',
height: '300',
queryParams: {},
loadMsg: '正在加载....',
columns: [[
{ field: 'bh', title: '编号', width: 100, sortable: false },
{ field: 'mc', title: '名称', width: 120, sortable: false },
{ field: 'zf', title: '总分', width: 40, sortable: false }
]],
pagination: false, //分页控件
fitColumns: true,
striped: true,
rownumbers: false, //行号
singleSelect: true, //是否单选
onLoadSuccess: function (data) {
var cellcomp = 'bh';
var cells = ['mc', 'zf'];
mergeCells_New('dg', data, cellcomp, cells);
}
});
//dg:datagrid的id;data:onLoadSuccess: function (data){}中的data;cellcomp:列相同;cellnames:合并的列,var cells = ["ku", "uu"];
//cellcomp列相同,cellnames合并
function mergeCells_New(dg, data, cellcomp, cellnames) {
var merges = [];
for (var r = 0; r < data.rows.length; r++) {
var row = data.rows[r];
var mergeinfo = new Object();
var nr = row[cellcomp];
var rowspan = 1;
for (var r1 = r + 1; r1 < data.rows.length; r1++) {
var row1 = data.rows[r1];
var nr1 = row1[cellcomp];
if (nr1 && nr1 == nr && nr1 != "") {
mergeinfo.index = r;
rowspan++;
mergeinfo.rowspan = rowspan;
}
else {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
break;
}
if (r1 == data.rows.length - 1) {
if (rowspan > 1) {
merges.push(mergeinfo);
r = r1 - 1;
}
}
}
}
for (var i = 0; i < cellnames.length; i++) {
var cellname = cellnames[i];
for (var j = 0; j < merges.length; j++) {
$('#' + dg).datagrid('mergeCells', {
index: merges[j].index,
field: cellname,
rowspan: merges[j].rowspan
});
}
}
}
上一篇: 固定/自定义图片 取色
下一篇: echarts柱形图