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

web HTML代码

    <!-- Easyui引用css文件 -->
    <link type="text/css" href="../../../module/Easyui/css/easyui.css" rel="stylesheet" />
    <link type="text/css" href="../../../module/Easyui/css/icon.css" rel="stylesheet"/>
    <link type="text/css" href="../../../module/Easyui/css/color.css" rel="stylesheet"/>
    <!-- Easyui引用js文件 -->
    <script type="text/javascript" src="../../../module/Easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../../module/Easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../module/Easyui/easyui-lang-zh_CN.js"></script>
<!--HTML代码-->
<table id="table" class="easyui-datagrid" style="width:99.9%;height:90.8%" iconCls="icon-save"  rownumbers="true" pagination="true">
        <thead>
            <tr></tr>
        </thead>
</table>

/**
 *  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<List<JSON>> 
     * 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<Object []> list = getIdenListByMit(table);
        if (list.isEmpty()){
            return null;
        }else {
            //自定义JSON格式
            List column = new ArrayList<>();
            /**
             * 将列名转换为JSONObject格式
             * arr[0]
             */
            for (Object [] arr :list){
                Column columns = new Column();
                //arr[0] 为IDENCODE 指标表数据库列名
                columns.setField(arr[0].toString());
                //arr[1] 为IDNENAME 指标表显示列名(一般为中文)
                columns.setTitle(arr[1].toString());
                //columns.setWidth(width); 一般不需要设置width
                columns.setAlign("center");

                String jsons = JSON.toJSONString(columns);
                JSONObject object = JSON.parseObject(jsons);

                column.add(object);
            }
            tm_list.add(column);
        }
        return tm_list;
    }

获取数据接口
这是获取数据接口，由于需要查询多张表，并需要在页面指定查询条件，写的比较复杂，只是查询简单数据的同学可以简化此函数

    /**
     * 模块化查询数据
     * 此函数返回 EasyUI 要求的 datagrid 数据对象格式
     * @param table 元数据表唯一标识
     * @param iden  条件指标名称（单个）
     * @param where 查询条件，从数据字典获取(如：=，<,>)
     * @param value 查询阈值
     * @param page  第几页
     * @param rows  页面数据量
     * @return datagrid数据对象 List<JSON> JSON转换函数同上需引用jar
     */
    public JSONObject getData(String table, String iden, String where, String value, String page, String rows){
        //外层封装list
        List result = new ArrayList();
        JSONObject jsonObjects;
        //data数据封装map，通过map转换JSONObject
        Map se_map = new HashMap();

        //计算分页
        int pageNumber = Integer.valueOf(page);
        int size = Integer.valueOf(rows);
        int first = (pageNumber - 1) * size;

        //默认查询第一个表
        if (table == ""){
            table = "1";
        }

        //查询数据准备对象
        //元数据表对象
        TMicroTablemeta tm = getTableByMitmid(table);
        //元数据数据库表名
        String tableCode = tm.getTableName();
        //得到元数据表对应指标 "col1,col2,col3......"
        String iden_code = getIdenByMit(table,0);
        //将指标转换为数组 方便遍历
        String [] iden_code_array = iden_code.split(",");
        //得到查询数据sql（分页） select skip 'first' first 'size' iden_code from tableCode (这是informix数据库语法，oracle或mysql等自行组装分页sql)
        String data_sql = getDataSql(first,size,tableCode,iden_code);
        //获取查询数据总数sql 此处不必多做解释
        String count_sql = getDataCountSql(tableCode);
        List<Object []> list;
        //计算查询条件 where 简单查询忽略此处
        //条件不为空
        if (value.length() != 0){
            //阈值不为空
            if (where.length() != 0 || where != null){
                int condition = Integer.valueOf(where);
                TConditionDictionary dictionary = getMarkByDictionary(condition);
                data_sql += " where " + iden +" "+ dictionary.getMark() + "'" + value + "'";
                count_sql += " where " + iden +" "+ dictionary.getMark() + "'" + value + "'";
            } else {
                //阈值为空
                data_sql += " where " + iden + " is null";
                count_sql += " where " + iden + " is null";
            }
        }

        //计算count值
        List<String> count_list = frDao.query(count_sql);
        int count = 0;
        if (count_list.size() > 0){
            String count_str = count_list.get(0).toString();
            //System.out.println(count_str);
            count = Integer.valueOf(count_str);
        }else System.out.println("查询总数为空 : " + count_sql);

        //计算data数据
        System.out.println("动态查询数据 ：" + data_sql);
        list = frDao.query(data_sql);
        if (list.isEmpty()){
            System.out.println("查询数据为空！　:  " + data_sql);
        }else {
            Map map = new HashMap();
            //遍历查询结果 list
            //将结果转换成JSON对象存放在list中
            for (Object [] arr : list){
                //遍历查询结果字段
                for (int k = 0; k < arr.length;k++){
                    //将查询结果封装成map
                    map.put(iden_code_array[k],arr[k]);
                }
                //JSON转换map
                String json = JSON.toJSONString(map);
                JSONObject jsonObject = JSON.parseObject(json);
                //Lsit嵌套
                result.add(jsonObject);
            }
            //设置数据总数 se_map封装最外层total对象
            se_map.put("total",count);
            //设置数据集 se_map封装最外层rows对象
            se_map.put("rows",result);
        }
        //转换为输出JSON对象
        jsonObjects = JSON.parseObject(JSON.toJSONString(se_map));
        return  jsonObjects;
    }

页面展示