easyui datagrid 多表头设置

最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用easyui 中的datagrid替代了一下。

根据实际需求,统计的信息可能不是一个模块中的字段信息,所以需要把模块和模块下的字段都显示出来,这就用到了表格中的合并单元格,但是在datagrid中如何实现呢? 如下:

$(‘#text‘).datagrid({
    border : 2,
    nowrap : false,
    fit : true,
        url: ‘<%=request.getContextPath()%>/report/showreport.action‘,
        frozenColumns: [[
                             { title: ‘区域名称‘, field: ‘regionname‘, width: 80, sortable: true}
                         ]],
        columns: [
        [{"title":"人员管理","colspan":3},
         {"title":"资料管理","colspan":3}],
        [{"field":"uname0","title":"姓名类似于李","rowspan":1},
         {"field":"config_gender1","title":"性别等于女","rowspan":1},
         {"field":"config_gender2","title":"性别等于男","rowspan":1},
         {"field":"config_datatype0","title":"资料类别等于视频资料","rowspan":1},
         {"field":"config_datatype1","title":"资料类别等于图片资料","rowspan":1},
         {"field":"config_datatype2","title":"资料类别等于文件资料","rowspan":1}]],
        rownumbers: true
});

结果如下图:

说明:从代码中可以看到,表单数组中有两个数组(一般的表格都是有一个数组), 第一个数组就是表头中第一行,该数组对象中没有field属性,第二个数组就是表头第二行。返回的数据格式中字段以第二个数组中的field属性的值为key。格式如下:

转载http://blog.csdn.net/lishuangzhe7047/article/details/42743895

时间: 2024-12-18 18:08:46

easyui datagrid 多表头设置的相关文章

EasyUI DataGrid 多级表头设置

使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true, fitColumns : false, columns: [ [ {"title":"网格员考核测评表","colspan":9} ], [ {"field":"ORGNAME","title":&

easyui datagrid 多表头设置 合并

$('#text').datagrid({        border : 2,      nowrap : false,      fit : true,          url: '<%=request.getContextPath()%>/report/showreport.action',          frozenColumns: [[                                 { title: '区域名称', field: 'regionname', w

EasyUI datagrid 的checkbox设置

参考url: http://blog.csdn.net/baronyang/article/details/9323463 我的需求: 抓取数据生成的日志,日志中有部分是抓取失败的,需要将失败的发送到另一个部分,但是成功了的就不需要发送; 设置checkbox: <th data-options="field:'checked',formatter:formatCK"><input type="checkbox" id="ckAll&qu

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

代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array(); var cols = new Array(); var colData = new Object(); $.post("url","params",function(data){ //动态生成表头开始 if(data.xxxx != null){ $.each(da

easyUi dataGrid 行高设置,解决错行问题

在easyUi dataGrid中,如果使用了frozenColumns和columns,如果行高不一样,可以选择其中的一个格式化一下高度即可. 代码 columns : [ [ { title : '备注', field : 'memo', width : 150, styler : function(value,row,index){ return 'height:30px'; } }] ] 原文地址:http://blog.51cto.com/1197822/2157015

easyui datagrid sort 表头 排序

datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 remoteSort:false,      sortName:'',      sortOrder:'asc', 一些特殊排序,或者特殊字段可以使用以下的方法 1.将服务器对数据项排序设置为false(必须) 2.设置field的排序属性为true,sorter的function内容自己写,如果

easyui datagrid将表头的checkbox不显示(隐藏)

<script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:"../json/content.json", //url:"../student.php", striped:true, width:400, loadMsg:"正在加载中....", singleSelect:true, title:"用户列表

JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRowBgColor(index, row) { if (row.ERROR_INFO != null && row.ERROR_INFO != "") { return 'background-color:yellow;color:black;'; } } </scrip

JQuery EasyUI datagrid 复杂表头处理

http://www.cnblogs.com/szytwo/archive/2012/09/18/2691420.html $('#day_health').datagrid({ url: "sqb_bweb_day_health.aspx?mode=day_health", pagination: true, total: 2000, pageSize: 10, pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], rownumbe