easyui datagrid 动态拼接columns以及赋值

Posted 2020-10-06 FlyHeLanMan

easyui datagrid columns 动态生成

需求背景如下：

后台java代码动态拼接datagrid的columns，然后赋值，实现过程如下：

后台java代码拼接过程，只是举个例子，可以根据具体业务拼接：

java代码：

　　　　　
　　　　　Map<String, Object> map = new HashMap<String,Object>();
　　　　　StringBuffer cols = new StringBuffer();
        cols.append("[[");
        cols.append("{field:\\"field0\\",title:\\"field0title\\",width:80}").append(",");
        cols.append("{field:\\"field1\\",title:\\"field1title\\",width:80}");
        cols.append("]]");
        
        StringBuffer data = new StringBuffer();
        data.append("[");
        data.append("{\\"field0\\":\\"1\\"").append(",").append("\\"field1\\":\\"2\\"").append("}").append(",");
        data.append("{\\"field0\\":\\"11\\"").append(",").append("\\"field1\\":\\"22\\"").append("}");
        data.append("]");
        
        map.put("columns", cols.toString());
        map.put("data", data.toString());

把map输出到前台页面，之后前台页面在ajax请求成功后的回调函数里写：

        var colObject = eval("(" + res.columns + ")");
        var dataObject = eval("(" + res.data + ")");
        $("#grid").datagrid({
            columns:colObject,
            data:dataObject
        });

效果如下：