zoukankan      html  css  js  c++  java
  • JQuery EasyUI DataGrid动态合并单元格

    1、JS

     1    /**
     2         * EasyUI DataGrid根据字段动态合并单元格
     3         * @param fldList 要合并table的id
     4         * @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");
     5         */
     6         function MergeCells(tableID, fldList) {
     7             var Arr = fldList.split(",");
     8             var dg = $('#' + tableID);
     9             var fldName;
    10             var RowCount = dg.datagrid("getRows").length;
    11             var span;
    12             var PerValue = "";
    13             var CurValue = "";
    14             var length = Arr.length - 1;
    15             for (i = length; i >= 0; i--) {
    16                 fldName = Arr[i];
    17                 PerValue = "";
    18                 span = 1;
    19                 for (row = 0; row <= RowCount; row++) {
    20                     if (row == RowCount) {
    21                         CurValue = "";
    22                     }
    23                     else {
    24                         CurValue = dg.datagrid("getRows")[row][fldName];
    25                     }
    26                     if (PerValue == CurValue) {
    27                         span += 1;
    28                     }
    29                     else {
    30                         var index = row - span;
    31                         dg.datagrid('mergeCells', {
    32                             index: index,
    33                             field: fldName,
    34                             rowspan: span,
    35                             colspan: null
    36                         });
    37                         span = 1;
    38                         PerValue = CurValue;
    39                     }
    40                 }
    41             }
    42         }

    2、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>  
  • 相关阅读:
    default.js 下的 setPromise(WinJS.UI.processAll());
    选择排序
    插入排序
    16、css实现div中图片占满整个屏幕
    21、解决关于 vue项目中 点击按钮路由多了个问号
    15、vue项目封装axios并访问接口
    17、在vue中引用移动端框架Vux:
    24、vuex刷新页面数据丢失解决办法
    18、git提交代码并将develop分支合并到master分支上
    20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据
  • 原文地址:https://www.cnblogs.com/easypass/p/2779985.html
Copyright © 2011-2022 走看看