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 + "]";
}
}