JQuery EasyUI DataGrid 동적 병합 셀

20497 단어 jquery easyui
js
/**
        * 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;
                    }
                }
            }
        }

호출 코드
html
<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
          data-options="autoRowHeight:false,pageSize:50,pageList: [10, 20, 30, 40, 50,100,5000],idField:'zhbid',sortName:'zhbbh', queryParams: { 'action': 'query'}
          ,onLoadSuccess:function(data){ MergeCells('DataGrid','mkmch,zhbmch');},onDblClickRow: onClickRow" 
          rownumbers="true" singleSelect="true" url="../Source/Data/zhbdata.ashx?mxbs=MON">  
        <thead>  
            <tr>  
                <th field="zhbid" hidden="true" sortable="true" width="100"  rowspan="2">  ID</th> 
                <th field="zhbbs" hidden="true" sortable="true" width="100" rowspan="2">  ID</th> 
                <th field="mxid" hidden="true" sortable="true" width="100" rowspan="2">  ID</th> 
                <th field="dwid" hidden="true" sortable="true" width="100" rowspan="2">  ID</th> 
                <th field="rq" hidden="true" sortable="true" width="100" rowspan="2">  </th> 

                <th field="mkmch" sortable="true" width="80"  data-options="headalign:'center',align:'center'" rowspan="2">   </th> 
                <th field="zhbmch" sortable="true" width="150"  data-options="headalign:'center'" rowspan="2">    </th> 
                <th field="dw" sortable="true" width="80"  data-options="headalign:'center'" rowspan="2">    </th> 
                <th field="shn_ljzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">    <br />    <br />   </th>  
                <th field="bn_jh" sortable="true" width="80" data-options="headalign:'center'" rowspan="2">    <br />  </th>  
                <th colspan="4">      </th> 
                <th field="mxmch" sortable="true" width="250" data-options="headalign:'center'" rowspan="2">    </th>  
                <th field="mxzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">    <br />(  )</th>  
                <th field="beizhu" sortable="true" width="350"  data-options="headalign:'center'" rowspan="2">   </th>  
            </tr>
            <tr>
                <th field="bq_zh" sortable="true" width="90"  data-options="headalign:'center'">     </th> 
                <th field="bn_ljzh" sortable="true" width="90"  data-options="headalign:'center'">     </th> 
                <th field="bn_ljtb" sortable="true" width="80"  data-options="headalign:'center'">   </th> 
                <th field="bn_tb" sortable="true" width="80"  data-options="headalign:'center'">    </th> 
            </tr>
        </thead>  
    </table>

 js
 //      
        $('#List').datagrid({ pagination: true,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    //  mergeCellsByField()     
                    mergeCellsByField("tbList", "No");
                }
            }
        });

좋은 웹페이지 즐겨찾기