Jquery easyUI datagrid 服务器端动态生成列配置返回到前台显示
来源:互联网 发布:战国七雄 知乎 编辑:程序博客网 时间:2024/05/17 05:59
近几天老大让修改以前的项目,客户反应用一端时间IE假死。以前的项目是用extjs写的,跟同事商量后,改用easyUI改造界面,前面规则的表格展示还挺顺利。今天遇到一个页面,前端显示的表格是动态生成,本菜鸟忙了大半天终于搞定。
后台生成columns的方法:
后台返回的JSON字符串:
特别注意JSON格式:由于刚开始返回的json格式不对,回调函数怎么都不能调用。着实郁闷了很久。对于自己后台拼json的同学,请务必注意json格式问题。
前台JS代码:
//查询方法function query() { var params = getParam(); if (params.strStnm == undefined || params.strStnm == '' || params.strStnm == '请选择站点') { $.messager.alert("提示", "请先选择站点", "warning", null); return; } var url = "MultidropRain.aspx"; $.post(url, params,showGrid, "json");}//处理返回结果,并显示数据表格function showGrid(data) { if (data.data[0].rows.length == 0) { $.messager.alert("结果", "没有数据!", "info", null); } var options = { width: "auto", height: "auto", rownumbers: true }; options.columns = eval(data.columns);//把返回的数组字符串转为对象,并赋于datagrid的column属性 var dataGrid = $("#rainGrid"); dataGrid.datagrid(options);//根据配置选项,生成datagrid dataGrid.datagrid("loadData", data.data[0].rows); //载入本地json格式的数据}
后台生成columns的方法:
/// <summary> /// 从dataTable创建 jquery easyui datagrid格式的columns参数 /// </summary> /// <param name="dt"></param> /// <returns></returns> protected string CreateDataGridColumnModel(DataTable dt) { StringBuilder columns = new StringBuilder("[["); int width = 0; foreach (DataColumn col in dt.Columns) { //控制列的宽度 第一列日期宽度为139,其余列为列名的汉字长度*20px if (col.ColumnName=="日期") { width = 139; } else { width = col.ColumnName.Length * 20; } columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},",col.ColumnName,col.ColumnName,width); } if (dt.Columns.Count>0) { columns.Remove(columns.Length - 1, 1);//去除多余的','号 } columns.Append("]]"); return columns.ToString(); }
后台返回的JSON字符串:
{"columns":"[[{field:'日期',title:'日期',align:'center',width:139},{field:'乔河',title:'乔河',align:'center',width:40},{field:'城壕',title:'城壕',align:'center',width:40},{field:'墩山',title:'墩山',align:'center',width:40}]]","data":[{"page":"0","total":"12","rows":[{"日期":"2011-12-12 20时","乔河":"56.00","城壕":"","墩山":""},{"日期":"2012-02-07 15时","乔河":"54.00","城壕":"","墩山":""},{"日期":"2012-02-08 09时","乔河":"51.00","城壕":"","墩山":""},{"日期":"2012-02-09 10时","乔河":"","城壕":"53.00","墩山":""},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":"54.00"},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-09 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-14 13时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-15 09时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-16 13时","乔河":"","城壕":"","墩山":""}]}]}格式:{ "columns":"[[ {field:'field1','title':'title1'},{...} ]]",data:[{page:"pageIndex",total:"totalNum",rows:[{name1:value,name2:value},{...}]}]}
特别注意JSON格式:由于刚开始返回的json格式不对,回调函数怎么都不能调用。着实郁闷了很久。对于自己后台拼json的同学,请务必注意json格式问题。
data数组里面放的是 datagrid要求的标准json格式。
- Jquery easyUI datagrid 服务器端动态生成列配置返回到前台显示
- Jquery easyUI datagrid 服务器端动态生成列配置返回到前台显示
- easyui datagrid 动态生成列
- easyui datagrid动态生成列
- Easyui DataGrid动态生成列
- Easyui DataGrid动态生成列
- easyui datagrid 动态生成列
- easyui 动态生成datagrid列
- easyui datagrid 动态生成列
- easyui datagrid 动态生成列
- 【easyui】动态显示datagrid列
- easyui datagrid+ashx实现动态生成列
- Easyui datagrid+ashx 实现动态生成列
- 完整的easyui datagrid 动态生成列
- jquery easyui datagrid 动态隐藏列
- JQuery EasyUI 根据数据动态生成datagrid
- easyui datagrid 动态列
- easyui datagrid动态列
- Linux下时区的设置
- Android MP3播放器实例--------MusicActivity类以及MusicService类详细讲解
- android布局之属性理解--类比div布局
- 我在南邮的三年—研二生活
- postgreSQL + Drupal 安装
- Jquery easyUI datagrid 服务器端动态生成列配置返回到前台显示
- 十个需要牢记的Ubuntu快捷键
- [转]dz7.2直接升级到x2.0教程
- SPSS中八类常用非参数检验之一:总体分布的卡方(Chi-square)检验
- Drawdown
- apk生成odex方法以及odex合并apk方法
- POI设置Excel单元格式
- 博客收藏
- Hashtable表的用法