1. 程式人生 > >EasyUI Datagrid 動態合併單元格

EasyUI Datagrid 動態合併單元格


/**
        * EasyUI DataGrid根據欄位動態合併單元格
        * @param fldList 要合併table的id
        * @param fldList 要合併的列,用逗號分隔(例如:"name,department,office");
        */
        function MergeCells(tableID, fldList) {
            var Arr = fldList.split(",");
            var dg = $('#' + tableID);
            var fldName;
            var RowCount = dg.datagrid("getRows").length;
            var span;
            var PerValue = "";
            var CurValue = "";
            var length = Arr.length - 1;
            for (i = length; i >= 0; i--) {
                fldName = Arr[i];
                PerValue = "";
                span = 1;
                for (row = 0; row <= RowCount; row++) {
                    if (row == RowCount) {
                        CurValue = "";
                    }
                    else {
                        CurValue = dg.datagrid("getRows")[row][fldName];
                    }
                    if (PerValue == CurValue) {
                        span += 1;
                    }
                    else {
                        var index = row - span;
                        dg.datagrid('mergeCells', {
                            index: index,
                            field: fldName,
                            rowspan: span,
                            colspan: null
                        });
                        span = 1;
                        PerValue = CurValue;
                    }
                }
            }
        }
        
        
        //呼叫方法
        
    
        $('#datagridDiv').datagrid({
                //…………獲取資料成功後回撥
                onLoadSuccess:function(){
                    MergeCells("datagridDiv","TYPE");//要合併的列,多個欄位用逗號分隔
                }
        });