欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基于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
            });
        }
    }
}