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树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代 ...
随机推荐
- python网络爬虫之scrapy 工程创建以及原理介绍
执行scrapy startproject XXXX的命令,就会在对应的目录下生成工程 在pycharm中打开此工程目录:并在Run中选择Edit Configuration 点击+创建一个Pytho ...
- MongoDB--GridFS 文件存储系统
GridFS是Mongo的一种专门用存储小型文件的功能. 使用于下列场景: 1.写入文件:mongofiles put 文件路径 注意,当前mongo实例链接的哪个库,将写文件在哪个实例里面的grid ...
- Redis的安装与使用（单节点）
IP:192.168.4.111 环境:CentOS 6.6 Redis版本:redis-3.0 (考虑到Redis3.0在集群和性能提升方面的特性,rc版为正式版的候选版,而且很快就出正式版) 安装 ...
- php.ini配置文件中的session配置
session.save_path = "D:\phpEnv\cachefiles" 这里的路径就是可以自己定义的存放session文件信息的目录,默认是'\tmp'(根目录下的t ...
- Java中使用 Long 表示枚举类
Java中使用 Long 表示枚举类 在日常的开发过程中,很多时候我们需要枚举类(enum)来表示对象的各种状态,并且每个状态往往会关联到指定的数字,如: private enum Color { R ...
- SharePoint 2016 每天预热脚本介绍
使用SharePoint的朋友们应该知道,SharePoint每天夜里有自动回收的机制,使环境每天把占用的内存都释放出来,以确保不会累计占用过多内存导致服务器崩溃. 我们可以打开IIS,选中我们的应用 ...
- JAVA基础——面向对象三大特性：封装、继承、多态
JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...
- Javacript 学习笔记
一.初探 javacript 学习无法是围绕着对象和属性两个方面来兜圈子,万变不离其宗. 在js中,能点出来的,或者中括号里面的必然是属性(方法).数组除外. 对象调用属性! 对象调用属性! 对象调用 ...
- Educational Codeforces Round 21 A-E题题解
A题 ............太水就不说了,贴下代码 #include<string> #include<iostream> #include<cstring& ...
- JavaWeb 后端 <四> 之 Cookie HttpSession 学习笔记
一.会话管理概述 1.什么是会话? 好比一次通话.打开浏览器,点击多次链接(发出多次请求和收到多次的响应),关闭浏览器,这个过程就是一次会话. 有功能 可以 文件 新建会话 2.解决的问题是什么? ...