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. PHP解析JSON和XML方法

    一.JSON $r = json_decode("json数据"); $result = $r->result; //解析后的数据,以数组形式保存到r里面了,需要通过-> ...

  2. wpf mvvm使用问题集锦

    问题一.usercontrol1控件使用了mvvm数据绑定,usercontrol2也使用了mvvm数据绑定,则 以下是伪代码 <usercontrol2 datacontent="{ ...

  3. java小程序 示例 菲薄垃圾数列

    package com.test; import java.util.Scanner; import org.junit.Test; import com.sun.xml.internal.ws.ap ...

  4. nyoj 71 独木舟上的旅行

    点击打开链接 独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度: 描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人 ...

  5. nyoj 68 三点顺序

    点击打开链接 三点顺序 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A,B,C是顺时针给 ...

  6. @valid表单验证demo

    springMVC 表单验证demo  视图层使用的是jsp

  7. Hive分布式的数据仓库

    1.hive介绍 hive是一个数据仓库的解决方案,它的数据存储依赖于HDFS,数据结算依赖于MR,也就是说,hive就是一个在数据仓库的服务,它只需要安装到一台普通的PC上即可,仅仅对外提供SQL服 ...

  8. 类成员函数指针 ->*语法剖析

    在cocos2d-x中,经常会出现这样的调用,如 ->*,这个是什么意思呢,如下面得这个例子: , 其实这是对类的成员函数指针的调用,在cocos2dx中,这种形式多用于回调函数的调用.如我们经 ...

  9. DPdao

    hrbust1053 http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=1053 #in ...

  10. android项目中如何加载已有so库 <转>

    1,在项目根目录下建立文件夹libs/armeabi文件夹 2,将so库放入 libs/armeabi文件夹 注意事项: 1,如果采用静态注册的方式请注意C文件中严格按照命名规则 Java_packa ...