EasyUI datagrid 动态加载表格数据的方式

web HTML代码

    
    type="text/css" href="../../../module/Easyui/css/easyui.css" rel="stylesheet" />
    type="text/css" href="../../../module/Easyui/css/icon.css" rel="stylesheet"/>
    type="text/css" href="../../../module/Easyui/css/color.css" rel="stylesheet"/>
    
    
    
    

"table"class="easyui-datagrid" style="width:99.9%;height:90.8%" iconCls="icon-save"  rownumbers="true" pagination="true">
        

/**
 *  JS代码
 * 加载EasyUI表格
 * 事件触发先加载列名,异步加载数据
 * @table 表格ID
 * @params 加载数据后台所需参数
 */
var init_table = function (table,params) {
    //通过ajax请求生成的新的datagrid的列名
    $.ajax({
        url:"/data/search/gs/title", //获取列名后台接口
        type:"GET",
        dataType:'json',
        data:{table:table},
        rownumbers: true, //行号
        pagination: true, //分页控件
        pageSize: 20,
        pageList: [10, 20, 30, 50, 100, 150, 200, 300, 500],
        success:function(data){
            //获取表头数据成功后，使用easyUi的datagrid去生成表格
            $('#'+table).datagrid({
                url: "/data/search/gs/data", //获取数据后台接口
                method:"GET",
                contentType: "application/json",
                columns:data,//外层ajax请求的表头json
                queryParams:{params},
                rownumbers: true, //行号
                pagination: true, //分页控件
                pageSize: 20,
                pageList: [10, 20, 30, 50, 100, 150, 200, 300, 500],
                striped:true,
                loadMsg:"正在努力加载数据,表格渲染中...",
                onLoadSuccess: function (data) {
                    console.log(data);
                    if (data == null){
                        //自定义页面信息加载框
                        msgShow("error","请求数据为空!",'warning');
                    }
                },
            });
        },
        error:function(e){
            msgShow("error","请求数据出错!",'error');
        }
    });
}

后台接口代码
* 获取列名后台接口*
需要动态获取列名，首先在数据库建立两个对应表，一个是元数据表存放表的名称和数据库表名，一个是指标列名表，外键关联元数据表，存放对应表的列名。
此接口通过查询元数据表得到所要展示的表的ID对应指标表的列名，封装成datagrid column JSON对象，外层通过两次List嵌套，返回column对象

/**
 * 这里新建一个实体类datagrid column对象。
 * Created by sun'f on 2017-09-21.
 */
public class Column {

    private String field;//列字段名称
    private String title;//列标题文本
    //private int width;//列的宽度 不需要设置 默认自适应
    private String align;//指明如何对齐列数据。可以使用的值有：'left','right','center'

    public String getField() {
        return field;
    }

    public void setField(String field) {
        this.field = field;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

   /* public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }*/

    public String getAlign() {
        return align;
    }

    public void setAlign(String align) {
        this.align = align;
    }
}

 /**
     * 这里根据实际情况查询数据列名
     * 
     * 模块化查询数据表表格字段名称
     * @param table 数据表唯一标识 mitmid
     * @return List> 
     * JSON转换需引用 com.alibaba.fastjson.JSON 
     * 和 com.alibaba.fastjson.JSONObject jar
     */
    public List getTitle(String table){
        List tm_list = new ArrayList<>();
        if (table == ""){
            //无参数默认查询第一张表字段名称
            table = "1";
        }
        //此方法根据元数据表ID或名称得到对应指标也就是列名
        // 查询sql为 select "+IDNECODE+","+IDNENAME+" from "+IDENMETA+" where "+MITMID+" = ? （IDENCODE 指标表数据库列名,IDNENAME 指标表要在前段显示的列名,IDENMATA 指标表名,MITMID 元数据表在指标表的外键）
        List