Easy DataGrid 实现动态列、行
Easy DataGrid 实现动态列、行
前端代码：
<title>展示销售的实时数据</title>
<script type="text/javascript">
var datagrid;
var editRow = undefined;
$(function() {
datagrid = $('#dg').datagrid({
fit:true,
fitColumns : true,
nowrapL : true,
singleSelect:true,
rownumbers : true,
striped: true,
fitColumns: false,
pagination : true,
pageSize : 20,
pageList : [ 1, 5, 10,15,20,25,50,100],
frozenColumns:[[ { field : 'id', title : '编号', width : 100, hidden:'true' }, { field : 'save', title : '保存' }, { field : 'saleName', title : '销售' }, {field : 'wechat',title : '微信'}, ]],
columns : [ [ ] ]
});
newData();
});
function newData() {
$.post('/manager/allot/listSaleSiteAccount', {
}, function(data) {
datagrid.datagrid({
columns : [ data.columns ]
}).datagrid("loadData", data);
}, 'json');
}
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>
数据格式：
{
"total": 4,
"rows": [
{
"saleName": "不认识",
"saleId": "110",
"wechat": "56560"
},
{
"saleName": "不认识",
"saleId": "16",
"wechat": "5656559",
"193": "2"
},
{
"saleName": "不认识",
"saleId": "10",
"218": "2221",
"wechat": "565659"
},
{
"saleName": "不认识",
"saleId": "8",
"wechat": "5656569"
},
{
"saleName": "不认识",
"saleId": "20",
"wechat": "565659"
},
{
"saleName": "不认识",
"saleId": "14",
"wechat": "56566"
},
{
"saleName": "不认识",
"225": "111313",
"saleId": "15",
"wechat": "5656586"
},
{
"saleName": "不认识",
"saleId": "22",
"wechat": "5656511274"
},
{
"saleName": "不认识",
"saleId": "7",
"wechat": "4545121"
},
{
"saleName": "不认识",
"saleId": "19",
"wechat": "565652"
},
{
"saleName": "不认识",
"saleId": "11",
"wechat": "565658"
},
{
"saleName": "不认识",
"225": "121",
"saleId": "71",
"wechat": "565652"
},
{
"saleName": "不认识",
"saleId": "70",
"wechat": "4545454545"
},
{
"saleName": "不认识 ",
"saleId": "1",
"wechat": "56554545"
},
{
"saleName": "不认识",
"saleId": "21",
"wechat": "56565454545"
},
{
"saleName": "不认识",
"saleId": "18",
"wechat": "565654545"
},
{
"saleName": "不认识",
"saleId": "69",
"wechat": "4545453"
},
{
"saleName": "不认识",
"saleId": "17",
"wechat": "545454545"
},
{
"saleName": "不认识",
"saleId": "12",
"wechat": "45451212"
},
{
"saleName": "不认识",
"saleId": "9",
"wechat": "1231212"
},
{
"saleName": "不认识",
"saleId": "13",
"wechat": "12121212"
},
{
"saleName": "不认识",
"saleId": "68",
"wechat": "12121229"
}
],
"columns": [
{
"field": "241",
"title": "标题2",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "239",
"title": "标题社1",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "240",
"title": "标题2",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "200",
"title": "标题）",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "203",
"title": "标题）",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "223",
"title": "标题推1",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "243",
"title": "标题2",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "139",
"title": "标题装）",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "197",
"title": "标题）",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "202",
"title": "标题）",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "23",
"title": "标题1",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "143",
"title": "标题2",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "247",
"title": "标题",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "246",
"title": "标题",
"align": "left",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "245",
"title": "标题",
"align": "right",
"width": null,
"editor": "text",
"hidden": false,
"styler": null
},
{
"field": "sum",
"title": "个hskjjfkjk",
"align": "center",
"width": null,
"editor": null,
"hidden": false,
"styler": null
},
{
"field": "action",
"title": "操作",
"align": "center",
"width": "1800",
"editor": null,
"hidden": false,
"styler": null
}
],
"frozenColumns": [
{
"field": "saleName",
"title": "销售姓名",
"width": null,
"align": "center"
},
{
"field": "wechat",
"title": "微信",
"width": null,
"align": "center"
}
]
}
数据格式java代码：
/**
* 动态生成列属性
*/
List<Site> accountColumn = this.saleSiteService.getAccountColumn();
List<Columns> columnsList = new ArrayList<Columns>();
List<FrozenColumns> frozenColumnsList = new ArrayList<FrozenColumns>();
FrozenColumns frozenColumns = new FrozenColumns();
frozenColumns.setField("saleName");
frozenColumns.setTitle("销售姓名");
frozenColumns.setAlign("center");
frozenColumnsList.add(frozenColumns);
FrozenColumns wechatFrozenColumns = new FrozenColumns();
wechatFrozenColumns.setField("wechat");
wechatFrozenColumns.setTitle("微信");
wechatFrozenColumns.setAlign("center");
frozenColumnsList.add(wechatFrozenColumns);
for (int i = 0; i < accountColumn.size(); i++) {
Columns columns = new Columns();
columns.setField(accountColumn.get(i).getId().toString());
columns.setTitle(accountColumn.get(i).getSiteName());
columns.setEditor("text");
if (i % 2 == 1) {
// 列换色
columns.setAlign("left");
// columns.setStyler("function (value, row, index) { return 'background-color:green;color:white';}");
} else {
columns.setAlign("right");
}
columnsList.add(columns);
}
Columns sumColumns = new Columns();
sumColumns.setField("sum");
sumColumns.setTitle("sfffh和");
sumColumns.setAlign("center");
columnsList.add(sumColumns);
Columns actionColumns = new Columns();
actionColumns.setField("action");
actionColumns.setTitle("操作");
actionColumns.setWidth("1800");
actionColumns.setAlign("center");
columnsList.add(actionColumns);
EasyUIResultDynamic easyUIResultDynamic = new EasyUIResultDynamic(pageInfo.getTotal(),
columnResource, columnsList, frozenColumnsList);
return easyUIResultDynamic;
返回的javaBean:
package cn.rootadmin.bean;
import java.util.List;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* 用于生成EasyUI动态列
* @author yiliang9117
* @version 2017年7月6日 下午5:13:59
*/
public class EasyUIResultDynamic {
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
private Integer total;
private List<?> rows;
private List<?> columns;
private List<?> frozenColumns;
public EasyUIResultDynamic() {
}
public EasyUIResultDynamic(Integer total, List<?> rows) {
this.total = total;
this.rows = rows;
}
public EasyUIResultDynamic(Long total, List<?> rows) {
this.total = total.intValue();
this.rows = rows;
}
public EasyUIResultDynamic(Long total, List<?> rows, List<?> columns,List<?> frozenColumns) {
this.total = total.intValue();
this.rows = rows;
this.columns = columns;
this.frozenColumns = frozenColumns;
}
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
public List<?> getRows() {
return rows;
}
public void setRows(List<?> rows) {
this.rows = rows;
}
public List<?> getColumns() {
return columns;
}
public void setColumns(List<?> columns) {
this.columns = columns;
}
public List<?> getFrozenColumns() {
return frozenColumns;
}
public void setFrozenColumns(List<?> frozenColumns) {
this.frozenColumns = frozenColumns;
}
/**
* Object是集合转化
*
* @param jsonData json数据
* @param clazz 集合中的类型
* @return
*/
public static EasyUIResultDynamic formatToList(String jsonData, Class<?> clazz) {
try {
JsonNode jsonNode = MAPPER.readTree(jsonData);
JsonNode data = jsonNode.get("rows");
List<?> list = null;
if (data.isArray() && data.size() > 0) {
list = MAPPER.readValue(data.traverse(),
MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
}
return new EasyUIResultDynamic(jsonNode.get("total").intValue(), list);
} catch (Exception e) {
return null;
}
}
@Override
public String toString() {
return "EasyUIResultDynamic [total=" + total + ", rows=" + rows + ", columns=" + columns + "]";
}
}
Easy DataGrid 实现动态列、行的更多相关文章
- easyui+ashx 动态初始化datagrid（动态列头）
效果图: 1:简单初始化 JSON格式数据如下(后台自己构建,后台代码略): {"total":6,"columns":[{"field": ...
- Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
- 动态PIVOT行转列
id name subject score remark1 l math 86 2 l eng 68 3 l phy 88 4 z chn 99 5 z math 92 6 z com 98 7 z ...
- DataGrid 滚动特定的行或者列
DataGrid 滚动特定的行或者列. DataGrid.ScrollIntoView Method (Object, DataGridColumn) .NET Framework 4.5 Silve ...
- 在论坛中出现的比较难的sql问题：42(动态行转列 考勤时间动态列)
原文:在论坛中出现的比较难的sql问题:42(动态行转列 考勤时间动态列) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.
- 在论坛中出现的比较难的sql问题：6(动态行转列 考试科目、排名动态列问题)
原文:在论坛中出现的比较难的sql问题:6(动态行转列 考试科目.排名动态列问题) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路. 下面的几个问题,都是动态行转列的问题. ...
- WPF 动态列（DataGridTemplateColumn） 绑定数据 （自定义控件）对象绑定
原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件)对象绑定 WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 上面的 ...
- WPF 动态列（DataGridTemplateColumn） 绑定数据 （自定义控件）
原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 因为项目需要 要实现这个~ 怎么实现画红框内容部分 田字格和上面Textbox 属于一个自定义控件 大 ...
- extjs动态树 动态grid 动态列
由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代 ...
随机推荐
- js中年份、月份下拉框
<select id="year" style="width: 100px;"></select> <select id=&quo ...
- 微信小程序开发过程中一些经验总结
1.微信开发者工具报错,微信小程序最低需支持tls1.2版本的问题 原因是服务器不支持ssl的高版本,解决方法: 在/etc/nginx/conf.d文件下,把"ssl_protocols ...
- spring boot + mybatis + druid
因为在用到spring boot + mybatis的项目时候,经常发生访问接口卡,服务器项目用了几天就很卡的甚至不能访问的情况,而我们的项目和数据库都是好了,考虑到可能时数据库连接的问题,所以我打算 ...
- 双核 CPU
双核 CPU 时间限制: 1 Sec 内存限制: 128 MB 题目描述 由于越来越多的计算机配置了双核 CPU,TinySoft 公司的首席技术官员,SetagLilb,决定升级他们的产品-SWO ...
- ant使用
摘录于他人精华,原文出处http://www.blogjava.net/hoojo/archive/2013/06/14/400550.html 1.project 节点元素 project 元素是 ...
- windows环境下，怎么解决无法使用ping命令
基本都是因为"环境变量"导致的,查看环境变量path在"Path"中追加"C:\Windows\System32"
- php获取当天的开始时间和结束时间戳
$begin_time=date("Y-m-d H:i:s",mktime(0,0,0,date('m'),date('d'),date('Y')));$over_time=dat ...
- 【Android Developers Training】 56. 更效率地加载大图片
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 如何解决java文件上面有错，但是文件夹上面不显示的错误
查了网上很多办法,都是解决不了的,不是我说什么,有些人真的人云亦云,没解决的瞎**乱转发 解决方法是:换个工作空间(workplace)即可,不行你打我
- View学习（一)－DecorView,measureSpec与LayoutParams
这段时间在学习android中view的工作原理与自定义View的相关内容,所以未来这这几篇博客都总结一下相关的知识吧. 首先我们要了解和熟悉两个概念,DecorView 与 MeasureSpec. ...