easyUI实现动态表头
来源:互联网 发布:fanuc数控仿真软件 编辑:程序博客网 时间:2024/05/22 18:23
前台主要代码
$(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"}。。。],
$(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 0
- easyUI实现动态表头
- easyui 实现动态表头
- easyUI实现动态增加表头
- easyui 动态组合表头
- easyui 表头动态生成
- easyui 表头动态生成
- easyui datagrid 动态表头 动态columns 的一种实现方式
- easyUI 动态生成表头,与动态绑定数据,实现代码
- easyui datagrid 动态修改表头
- easyui动态表头 && 动态添加tabs
- 《EasyUI》——给DataGrid动态绑定表头和数据,实现表头与数据的真正解耦
- Jquery easyui datagrid 模板,动态切换表头
- jQuery EasyUI-DataGrid动态加载表头
- easyui框架中动态改变表头
- 关于easyUI 实现复杂表头的问题
- EXT3 动态列表表头实现
- easyui datagrid 实现表头灵活展示(添加表头菜单,右键表头进行展示或隐藏)
- jquery easyui datagrid 动态表头 + 嵌套对象属性展示
- js中的表格table操作
- python实现之K-均值聚类
- 全连接层解析——源码解析
- jq+php+msyql 拖拽排序
- CentOS 7 修改hostname 一步到位
- easyUI实现动态表头
- Eclipse构建Maven项目
- 数组操作-浅复制-《数据结构与算法》
- mysql-3-DAO设计模式
- 系统时钟MPLL和定时器操作实例
- java理解
- N的阶乘——多位数对单位数的乘法——数值超高超大的算法
- 引入布局
- scala对redis集群操作工具类 附带java版本的工具类以及spring配置