1：表头固定（前台写）

参照官方：http://www.jeasyui.net/demo/334.html

效果图：

源代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Column Group - jQuery EasyUI Demo</title>

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

<link rel="stylesheet" type="text/css" href="../demo.css">

<script type="text/javascript" src="../../jquery.min.js"></script>

<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

<h2>Column Group</h2>

<p>The header cells can be merged. Useful to group columns under a category.</p>

<div style="margin:20px 0;"></div>

<table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">

<thead>

<tr>

<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>

<th data-options="field:'productid',width:100" rowspan="2">Product</th>

<th colspan="4">Item Details</th>

</tr>

<tr>

<th data-options="field:'listprice',width:80,align:'right'">List Price</th>

<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

<th data-options="field:'attr1',width:240">Attribute</th>

<th data-options="field:'status',width:60,align:'center'">Status</th>

</tr>

</thead>

</table>

</body>

</html>

2：后台构造JSON格式，前台加载

格式如下：

{"total":2,"columns":[[{"title":"一组","colspan":3},{"field":"opt","title":"Operation","rowspan":2},{"title":"二组","colspan":3}],[{"field":"name","title":"name"},{"field":"addr","title":"Address"},{"field":"col4","title":"Col41"},{"field":"name1","title":"name1"},{"field":"addr1","title":"Address1"},{"field":"col41","title":"col411"}]],"rows":[{"opt":"Delete","name":"zhangxu","addr":"Add3","col4":"ceshi","name1":"mingyue","addr1":"ceshi1","col41":"mingyue1"},{"opt":"Add","name":"zhanglianhua","addr":"haixin","col4":"kldjalk","name1":"zhanglianhua1","addr1":"haixin1","col41":"jdfalkja1"}]}

前台加载代码：

function InitDgView() {

        //var jsondata = { "total": 2, "columns": [[{ "title": "一组", "colspan": 3 }, { "field": "opt", "title": "Operation", "rowspan": 2 }, { "title": "二组", "colspan": 3 }], [{ "field": "name", "title": "name" }, { "field": "addr", "title": "Address" }, { "field": "col4", "title": "Col41" }, { "field": "name1", "title": "name1" }, { "field": "addr1", "title": "Address1" }, { "field": "col41", "title": "col411" }]], "rows": [{ "opt": "Delete", "name": "zhangxu", "addr": "Add3", "col4": "ceshi", "name1": "mingyue", "addr1": "ceshi1", "col41": "mingyue1" }, { "opt": "Add", "name": "zhanglianhua", "addr": "haixin", "col4": "kldjalk", "name1": "zhanglianhua1", "addr1": "haixin1", "col41": "jdfalkja1" }] };

        var jsondata;

        $.get("/Pbfx/Hbfb/GetPbfxData", function (data) {

            //jsondata = JSON.parse(data.replace(/'/g, '"'));     //标准JSON格式为双引号，单引号无法转换

            jsondata = JSON.parse(data);

            $('#dgView').datagrid({

                title: ' XXXXXXXXX',

                singleSelect: true,

                fit: true,

                url: '',

                columns: jsondata.columns,

                rownumbers: true

            }).datagrid('loadData', jsondata.rows);

        });

    }

　　

　

EasyUI datagrid 复杂表头处理的更多相关文章

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

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

  2. Easyui datagrid 去掉表头的checkbox复选框

    $(".datagrid-header-check").html(""); 在onLoadSuccess中加入此行代码即可实现datagrid去除表头的chec ...

  3. JQuery EasyUI datagrid 复杂表头处理

    下面是我项目中和网上收集的EasyUI的表头处理的,合适的拿去用吧. 例子1: $('#day_health').datagrid({                 url: "sqb_b ...

  4. easyui datagrid 多表头设置

    最近在做二维报表,要求报表的表头自定义.在网上找了好久二维报表的插件,一直找不到合适的.后来就用easyui 中的datagrid替代了一下. 根据实际需求,统计的信息可能不是一个模块中的字段信息,所 ...

  5. EasyUI DataGrid 多级表头设置

    使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true, fitC ...

  6. easyui datagrid将表头的checkbox不显示（隐藏）

    <script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:&quo ...

  7. easyui datagrid 动态表头2

    前端 function goqry() { $("#form").form("submit", { url: "CJCK_bjcjfx_yfsl.as ...

  8. easyui datagrid sort 表头 排序

    datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 ...

  9. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

随机推荐

  1. JAVA 继承 extends

    /* 继承 1.提高了代码的复用性,简化了代码 2.让类与类之间产生了继承关系,才有了后面的多态的特性的存在 注意:千万不要为了获取其它类的功能简化代码,而建立继承关系, 必须要类与类之间存在继承关系 ...

  2. 30天轻松学习javaweb_tomcat的虚拟目录设置

    1.在server.xml文件的</Host>前面加入.需要重新启动Tomcat才能生效.<!--配置虚拟目录--><Context path="/itcast ...

  3. bootstrap-输入框组

    <!-- input-group 只能针对输入框,输入框组 input-group-addon 给输入框前后添加的额外元素 input-group-btn 添加的额外元素是按钮: --> ...

  4. UBUNTU查看软件版本

    1.查看已安装软件版本aptitude show softwarename 2.查看软件安装目录dpkg -L softwarename

  5. fatal error C1853: '*.pch' is not a precompiled header file created with this compile

    在菜单下选择Build--->点击Rebuild All,如果不起作用,你可以先把Debug或者Release中的文件删除,然后再试.

  6. NAND flash cache编程

    PROGRAM PAGE CACHE MODE 0x80-0x15: CACHE编程实际上是标准的页编程命令的带缓冲编程模式,编程开始是发布SERIAL DATA INPUT(0x80)命令,随后是5 ...

  7. transactionCurrencyId needs to be supplied to format a transaction money field.

    问题背景: 在CRM 4 表单中加入了自定义的,money类型的字段,如果就报错 解决方法:要显示金额类型的字段时,要保证 entity 的 TransactionCurrencyId 这个字段中是有 ...

  8. linux驱动学习之Input输入子系统

    以前,看过国嵌关于input子系统的视频课程,说实话,我看完后脑子里很乱,给我的印象好像是input子系统驱动是一个全新的驱动架构,疑惑相当多.前几天在网上,看到有很多人介绍韦东山老师的linux驱动 ...

  9. Sqlserver中存储过程，触发器，自定义函数（一）

    Sqlserver中存储过程,触发器,自定义函数 1.存储过程有关内容存储过程的定义:存储过程的分类:存储过程的创建,修改,执行:存储过程中参数的传递,返回与接收:存储过程的返回值:存储过程使用游标. ...

  10. POJ3352 Road Construction (双连通分量)

    Road Construction Time Limit:2000MS    Memory Limit:65536KB    64bit IO Format:%I64d & %I64u Sub ...