Easy DataGrid 实现动态列、行

时间:2022-04-29 17:50:38

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

}