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树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代 ...
随机推荐
- fdisk 非交互式创建 分区
一. key 非交互式创建分区, 与 交互式创建分区区别不大. 使用 fdisk 的默认选项, 使用空行即可, 不用回车. 创建 主分区 和 扩展分区时, 需要注意 分区号 二. 创建主分区 fdis ...
- HTML基本文件， CSS基础
HTML 一.HTML基本文件 [meta标签] 1.charset属性:单独使用.设置文档字符集编码格式. >>>写法:<meta charset ...
- JavaScript练习笔记整理·3 - 6.25
欢迎和大家一起来讨论~ 基础练习(1): 我的解答为: function array_diff(a, b) { if (b == "") return a; return ...
- MySql三大范式与数据库设计和表创建常用语句
[数据库设计的三大范式] 1.第一范式(1NF First Normal Fromate):数据表中的每一列(字段),必须是不可拆分的最小单元.也就是确保每一列的原子性. 例如: userInfo: ...
- cURL的运用,文字替换
<?php /** * 实例描述:在网络上下载一个网页并把内容中的“百度”替换为“谷歌”之后输出 */ $curl_obj = curl_init(); // 初始化 curl_setopt($ ...
- Kanzi 倒影效果制作
在kanzi中,倒影效果会经常用到,比如多媒体中. 先来看一下最终的实现效果: 在这个效果中,我们的需求是,倒影图与原图一致,透明度和可见范围可以调节. 下面说一下实现的步骤: 1.创建工程后,Roo ...
- c# MySqlHelper_ExecuteSqlTran
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...
- Android高仿qq及微信底部菜单的几种实现方式
最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...
- git常用基本命令
一定要以管理员的身份打开,否则有些命令不能用,比如ssh -T git@github.com(查看配置ssh是否成功)@初始化git git config --global user.name ruo ...
- 阿里云服务器 Windows连接不成功 提示“你的凭证不工作” 解决方法
HKEY_LOCAL_MACHINE -> SYSTEM -> CurrentControlSet -> Control ->Terminal Server -> Wds ...