/**
        * 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;
                    }
                }
            }
        }

<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>

JQuery EasyUI DataGrid动态合并单元格的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格

    jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...

  2. JQuery EasyUI DataGrid动态合并(标题)单元) 一

    JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...

  3. easyui 自动动态合并单元格

    .......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...

  4. EasyUI-DataGrid动态合并单元格

    js /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&qu ...

  5. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  6. easyui DataGrid表体单元格跨列rowspan

    最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...

  7. EasyUI——DataGrid的自定义单元格点击事件

    1.当点击的单元格需要传递参数,并且传递的是row的值时,需要进行转义 function initCompareTable(){ $("#deviceCompareTable"). ...

  8. 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...

  9. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

随机推荐

  1. [bzoj4259][bzoj4503] 残缺的字符串 [FFT]

    题面 传送门 bzoj上的这两题是一样的...... 正文 我看到这道题,第一想法是跑魔改过的KMP,然后很快发现不可行 于是想换个角度思考 其实,本题最大的问题就在于通配符的存在:它可以匹配任意一个 ...

  2. 无序字母对 character

    无序字母对 character 题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入 ...

  3. session失效时间

    1.web容器中设置(此处以tomcat为例) <session-config> <session-timeout>30</session-timeout> < ...

  4. HDU 4786 最小生成树变形 kruscal(13成都区域赛F)

    Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. splay模板整理

    1.插入一个数 void insert(int x) { if (!root) { ++tot; e[tot].left = e[tot].right = e[tot].fa = ; e[tot].v ...

  6. Python matplotlib 柱状图

    matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.它的文档相当完备,并且 ...

  7. 【06】react 之 PropsType

    React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行. React.PropTypes.array Rea ...

  8. pat 甲级 L3-002. 堆栈

    L3-002. 堆栈 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有 ...

  9. pat 团体天梯赛 L2-010. 排座位

    L2-010. 排座位 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位. ...

  10. Android解析XML之SAX解析器

    SAX(Simple API for XML)解析器是一种基于事件的解析器,它的核心是事件处理模式,主要是围绕着事件源以及事件处理器来工作的.当事件源产生事件后,调用事件处理器相应的处理方法,一个事件 ...