easyUI实现动态表头

青旅半醒 2022-06-12 08:19 334阅读 0赞

前台主要代码  
  
  
$(function()\{  
//初始化方法  
    defaultTime();  
$('\#pagination').datagrid($.extend(window.dg\_cm\_pp,\{  
title:'报表名称',  
iconCls:'icon-save',  
fitColumns: false,  
pagination:false,  
queryParams:\{  
//查询条件  
"queryStartTime": $("\#queryStartTime").val(),  
"queryEndTime": $("\#queryStartTime").val()  
\},  
//打开页面默认表头  
columns:\[\[            
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
                \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\},  
         \{field:'与后台jsonKey值一致',title:'列名',width:100,align:"center"\}  
       \]\]  
\}));  
\});  
  
//点击查询按钮调后台业务代码，向前台发送表头与数据组合的json数据  
function select\_column()\{  
var queryStartTime = $("\#queryStartTime").val();  
var queryEndTime = $("\#queryStartTime").val();  
$.ajax(\{  
url: '$\{ctx\}/jsp/test/test.action',  
type: 'post',  
//async:false,  
data: \{"queryStartTime":queryStartTime,"queryEndTime":queryEndTime\},  
dataType: "json",  
success: function (returnValue) \{  
//console.log(returnValue.columns);  
$('\#pagination').datagrid($.extend(window.dg\_cm\_pp,\{  
title:'报表名称',  
iconCls:'icon-save',  
fitColumns: false,  
pagination:false,  
queryParams:\{  
\},  
columns: \[returnValue.columns\]//返回的json数据："columns":\[\{"field":"。。。","title":"。。。","sortable":"true","align":"center","width":"100"\}。。。\]  
\}));  
//$('\#pagination').datagrid('clearSelections');  
    $('\#pagination').datagrid('loadData',returnValue.rows); //用于分页的总记录数  
\}  
\});  
  
后台主要代码：  
  
  
  
  
//调service层代码查询出数据进行拼装  
StringBuffer data = new StringBuffer("\{\\n");  
data.append(" \\"total\\":").append(results.size()).append(",\\n");  
  
JSONArray jsonTitle=JSONArray.fromObject(title);  
JSONArray jsonResult = JSONArray.fromObject(results);  
data.append(" \\"columns\\":\\n");  
data.append(jsonTitle.toString()).append(",\\n");  
data.append(" \\"rows\\":\\n");  
data.append(jsonResult.toString());  
data.append("  \\n").append("\}");  
  
try  
\{  
getResponse().getWriter().println(data);  
\}  
catch (IOException e)  
\{  
e.printStackTrace();  
\}  
  
  
//json数据  
\{  
 "total":0,  
 "columns":  
\[\{"field":"与后台jsonKey值一致","title":"列名","sortable":"true","align":"center","width":"100"\},\{"field":"与后台jsonKey值一致","title":"列名","sortable":"true","align":"center","width":"100"\},\{"field":"与后台jsonKey值一致","title":"列名","sortable":"true","align":"center","width":"100"\}。。。\],

"rows":

\--这种方式实现动态表头后分页设置pagination:true，只显示第一页数据，记录的数据行数只有默认的10条，解决方法是设置好表头后，在下面重新再请求一次列数据，pagination的总记录数就正确了。

var queryParams=\{  
"queryStartTime": $("\#queryStartTime").val(),  
"queryEndTime": $("\#queryStartTime").val(),  
"selectType": $("\#selectType").val()  
\}  
$('\#pagination').datagrid('options').queryParams = queryParams;  
    $('\#pagination').datagrid('options').url = "xxx.action";  
    $('\#pagination').datagrid('clearSelections');  
    $('\#pagination').datagrid('load');

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关【Mybatis实例】实现动态表头数据（动态行专列）、对动态表头字段排序

目录动态表头（表头排序）业务说明实现 1 \\Service代码实现\\

逃离我推掉我的手/ 2024年04月01日 06:00/ 0 赞/ 11 阅读

相关 EasyUI DataGrid 多级表头设置

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

一时失言乱红尘/ 2022年08月20日 11:09/ 0 赞/ 232 阅读

相关 easyui datagrid 多表头设置

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

小咪咪/ 2022年08月06日 11:04/ 0 赞/ 180 阅读

相关 easyUI实现动态表头

前台主要代码 $(function()\{ //初始化方法 defaultTime(); $('\pagination').datagrid

青旅半醒/ 2022年06月12日 08:19/ 0 赞/ 335 阅读

相关 easyui 实现动态表头

主要的思路就是:创建datagrid的时候将colums和数据当成参数，columns属性里面的field,和title通过后台传过来的数据进行循环拼接。 func

r囧r小猫/ 2022年06月09日 23:48/ 0 赞/ 500 阅读

相关 EasyUI动态表头与数据宽度不对应

在测试代码时发现动态表头的大小与数据列的宽度不对应，不管怎样修改width，表头宽度都可以跟着变动，但是数据宽度始终不动。后来无意中修改了后台设置的列的fie

以你之姓@/ 2022年06月08日 05:11/ 0 赞/ 423 阅读

相关 java 动态表头

<dependency> <groupId>cglib</groupId>

叁歲伎倆/ 2022年03月25日 07:48/ 0 赞/ 485 阅读

相关 easyui datagrid 表头 sort 排序

datagrid的点击列表头刷新，分为两种，一种是页面刷新，不涉及后台服务器数据，不会从新查询[数据库][Link 1]，只会刷新当前页数据；一种是服务器级刷新，会重新加

骑猪看日落/ 2021年08月27日 02:33/ 0 赞/ 401 阅读

相关 easyui datagrid表头 toolbar 固定

当用到EasyUI中的 datagrid 时，设置 fit:true, 就会使表头跟toolbar固定，但是这个容器要设置固定的宽和高。 ![format_png][] !

雨点打透心脏的1/2处/ 2021年08月26日 14:02/ 0 赞/ 592 阅读

相关 easyui ——datagrid多表头

datagrid的多表头设置，主要是通过columes属性设置。如果是但标头，columns数组里面是一个一维数组；如果是多表头，columns数组中应该是个多个一维数组，同时

系统管理员/ 2021年05月12日 11:51/ 0 赞/ 624 阅读