zoukankan      html  css  js  c++  java
  • 基于EasyUi的datagrid合并单元格JS写法

     
    $('#dg').datagrid({
                 'auto',
                height: 'auto',
                scrollbarSize: 0,
                queryParams: {},
                 url: 'kkkk',
                columns: [[
                    { field: 'bh', title: '编号',  100, sortable: false },
                    { field: 'mc', title: '名称',  120, sortable: false },
                    { field: 'zf', title: '总分',  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({
                 '100%',
                height: '300',
                queryParams: {},
                loadMsg: '正在加载....',
                columns: [[
     
                    { field: 'bh', title: '编号',  100, sortable: false },
                    { field: 'mc', title: '名称',  120, sortable: false },
                    { field: 'zf', title: '总分',  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
                });
            }
        }
    }
  • 相关阅读:
    nginx的配置
    html转pdf
    Mac 安装mysql
    网络编程
    五分钟搞定迭代器生成器
    mac 上多版本python 共存
    一张图片教会你写mysql 语句
    清晰明了的深浅拷贝
    已经入了vim的坑
    解决pip安装太慢的问题
  • 原文地址:https://www.cnblogs.com/Ajoying/p/EasyUi_datagrid.html
Copyright © 2011-2022 走看看