easyUI实现动态表头

前台主要代码


$(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');