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树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代 ...
随机推荐
- cut的用法
1.基本功能 从文件或标准输入的每行中删除指定的部分. 2.基本用法 cut -[cdf] [FILE] 3.例子 $ ls -l total 2944 -rwxr-xr-x 1 zach pubs ...
- HTTP协议 URL
http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的机制,绝大多数的Web开发,都是构建在HTTP协议之上的We ...
- MongoDB--数据库与Collection注意事项
<h2> <strong>注意事项:</strong></h2>1.数据库名注意应该全部小写,不能包含空格,最大长度为64K名称<br /& ...
- maven打包 tomcat运行pom配置 或 打成jar包
maven打包 tomcat运行pom配置,同时还需要配置org.apache.tomcat.maven插件,这里省略. <groupId>com.company</groupId& ...
- Flash TextField selectable bug block TextEvent.Link solution
There is an old version Felx SDK bug(in my case it's Flex SDK v3.3.0.4852) that when TextField.selec ...
- bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示
Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...
- Charles抓包工具安装与配置
在实际开发中,我们需要时常抓取线上的请求及数据,甚至是请求的html文档,js,css等静态文件来进行调试.在这里,我使用charles来进行以上操作.但是呢,charles需要进行一系列配置才能达到 ...
- css实现居中的五中方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关闭chrome浏览器的developer tools
背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shift+C等都会启动developer tools.对于不开发Web的人来说, ...
- Java WebService学习资料
最近用到了WebService,以前没用过,想要好好学习一下.感觉网上资料比较少,而且很杂,找了很久,觉得下面的两个文章解释的比较清楚,分享一下: WebService概念.原理:http://mp. ...