easyUI datagrid 多列合并单元格

最新推荐文章于 2020-12-29 04:30:57 发布

原创最新推荐文章于 2020-12-29 04:30:57 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#单元格合并 #datagrid

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在easyUI的datagrid中实现多列单元格的合并，通过自定义方法来达到所需效果，提供了具体的使用实例和最终展示的效果图。

自定义方法：

/**
     * datagrid 自定义合并单元格
     * @param $this 表格选择器
     * @param field_arr 合并列字段
     * @param judge 值不相同不合并
     */
    customMergeCells: function($this, field_arr, judge) {
        var rows = $this.datagrid("getRows");
        if ( (typeof (field_arr) === "undefined" || field_arr === "" || field_arr == null || field_arr === "null")
            || (typeof (field_arr) === "undefined" || field_arr === "" || field_arr == null || field_arr === "null")) {
            return;
        }
        for (var i = 1; i < rows.length; i++) {
            for (var k = 0; k < field_arr.length; k++) {
                var field = field_arr[k]; // 要排序的字段
                if(rows[i][field] === rows[i-1][field]){ // 相邻的上下两行
                    if(!(typeof (judge) === "undefined" || judge === "" || judge == null || judge === "null")){
                        if(rows[i][judge] !== rows[i-1][judge]){
                            continue;
                        }
                    }
                    var rowspan = 2;
                    for (var j = 2; i-j >= 0; j++) { // 判断上下多行内容一样
                        if(rows[i][field] !== rows[i-j][field]){
                            break;
                        }else{
                            if(!(typeof (judge) === "undefined" || judge === "" || judge == null || judge === "null")){
                                if(rows[i][judge] !== rows[i-j][judge]){
                                    break;
                                }
                            }
                            rowspan = j+1;
                        }
                    }
                    $this.datagrid("mergeCells",{ // 合并
                        index: i-rowspan+1,
                        field: field,
                        rowspan: rowspan
                    });
                }
            }
        }
    }

使用实例：

onLoadSuccess: function(data) {
                    if (data.rows && data.rows.length > 0) {
                        // 合并单元格
                        top.$.tools.customMergeCells($(this), ["itemName", "developUnitName"], "itemName");
                    }
                },

效果图：