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. c语言-枚举

    自定义枚举数据类型:一般在函数返回值调用过程中,被调用函数具体实现中可以直接return 枚举列表中的常量值而不用定义具体的枚举数据,调用方则需用枚举具体的数据变量来接收返回结果,而不能用#defin ...

  2. Python标准库08 多线程与同步 (threading包)

    Python主要通过标准库中的threading包来实现多线程.在当今网络时代,每个服务器都会接收到大量的请求.服务器可以利用多线程的方式来处理这些请求,以提高对网络端口的读写效率.Python是一种 ...

  3. iOS使用AVFoundation实现二维码扫描

    原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...

  4. Citrix 服务器虚拟化之八 Xenserver虚拟机模版

    Citrix 服务器虚拟化之八 Xenserver虚拟机模版 XenServer与VMware不同,Vmware只能将现有的VM转换成模版,而XenServer具有两种方法:一种是将现有 VM 转换为 ...

  5. 20145305 《Java程序设计》第2周学习总结

    教材学习内容总结 1.boolean类型可表示true与false 2.储存值超类型范围会出现溢值 3.变量在命名时不可以使用数字作为开头,不可以使用一些特殊字符,不可以与JAVA关键词同名,不可以与 ...

  6. windows 修改hosts

    2222.111.1.1 ip 格式要正确,否则硬解会失败. 220.11.1.1

  7. Eclipse自动补全功能和自动生成作者、日期注释等功能设置

    修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...

  8. [datatable]C# DataTable 如何排序

    DataTable dt = new DataTable(); dt.Columns.Add("ProductID", typeof(string)); dt.Columns.Ad ...

  9. POJ 2135 Farm Tour [最小费用最大流]

    题意: 有n个点和m条边,让你从1出发到n再从n回到1,不要求所有点都要经过,但是每条边只能走一次.边是无向边. 问最短的行走距离多少. 一开始看这题还没搞费用流,后来搞了搞再回来看,想了想建图不是很 ...

  10. How to make 9-patch image downloaded from the Network

    Probably everyone, who is in touch with the Android world dealt with 9-patch term. It is an image in ...