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. 新建的表如果还没有数据，用exp导的时候会忽略

    源地址:http://www.07net01.com/2015/07/884873.html

  2. Bitbucket使用方法

    一.软件及SSH keys: 由于我的Bitbucket账号的邮箱及用户名与Github相同,所以SSH Public Keys可以用Github的,登录Bitbucket,悬浮在用户名boliqua ...

  3. C# 操作网页标签

    1  元素的 显示与隐藏   C# HTML: <div Id="div1" runat="server" style="display:non ...

  4. 国内Lua先驱的Lua源码总结

    http://www.codingnow.com/temp/readinglua.pdf <Lua源码欣赏> By 云风

  5. 你可能不知道的 30 个 Python 语言的特点技巧

        列表按难度排序,常用的语言特征和技巧放在前面. 1.1   分拆 >>> a, b, c = 1, 2, 3>>> a, b, c(1, 2, 3)> ...

  6. nyoj 105 九的余数

    点击打开链接 九的余数 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数整除九之后的余数. 输入 ...

  7. 页面设计--Grid列表

    Grid列表控件 功能:主要实现Html Table功能,支持多表头.固定表头.固定列.输出.组合查询.编辑功能 优点:可以快速的通过数据集合生成多表头.多样式的列表.通过简单的拖拉实现多层表头. G ...

  8. Unity AssetBundles and Resources指引 （二） Resources文件夹

    本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and- ...

  9. nearly,about,almost的区别

    nearly 几乎,将近almost 几乎,差一点儿就,差不多(与动词,副词,形容词以及名词连用时,可与nearly通用;与no,none,nothing,never等否定式连用时,不可与nearly ...

  10. js判断汉字字数

    js判断汉字字数的东东 //**************************************************************** //* 名 称:DataLength // ...