easyui動態生成列

需求：一個id對應多個key value 將id作為標識列 key值作為表頭 value作為值顯示。數據表可分為兩張表

param數據表：

下表一個id對應上表多個key及value 如下圖 id_param數據表：

然后將這些對應關系在前端顯示成這樣（頁數及總記錄沒有顯示，但可實現分頁功能）

方法思路：

1.獲取param的key value 作為 columns當做表頭信息 key作為表頭的field，value作為表頭的title；

2.獲取id_param的所有id(不重復的)，構成ids，ids的size 作為總記錄數；

3.新建一個map的list對象mapputs。對ids進行遍歷，每次遍歷的id作為查詢條件查詢id_param獲取每條id對應的key，value，構成一個HashMap對象 mapput。每次遍歷結束將mapput加入mapputs中。

實現代碼：

 創建實體類Test（getter setter方法省略）

    private String key;//參數名稱
    private String value;//參數內容
    private String key_cn;//參數中文名稱 用於顯示表頭的title

 

后台獲取數據方法

@RequestMapping(value = "/test.do", method = RequestMethod.POST)
    public
    @ResponseBody
    String test(HttpServletRequest request, HttpServletResponse response, Model model, String type, String page, String rows) {
        Map map = new HashMap();
        List<Test> columns = licenseService.getColumns();//查詢param表 獲取表頭信息 sql語句 SELECT `key`,`key_cn` FROM test.`param`
        List<String> ids = licenseService.getIds();//查詢id_params中 不重復的 id集合 SELECT DISTINCT id FROM test.`id_param`  ORDER BY id
        List<Map> mapputs = new ArrayList<Map>();//用於添加對 ids 每次遍歷中獲得的mapput
        for(String id : ids){
            map.put("id",id);//放入此次查詢需要的id
            Map mapput = new HashMap();
            List<Test> list = licenseService.getTestListById(map);//根據id 獲取對應key value 的list
            for(Test test : list){
                mapput.put(test.getKey().toLowerCase(),test.getValue());//對list進行遍歷 將key value放入mapput中
            }
            mapputs.add(mapput);//結束一次遍歷添加此次獲得的mapput
        }
        map.put("total",ids.size());//將ids的長度作為記錄的總數傳入
        map.put("columns",columns);
        map.put("mapputs",mapputs);
        return gson.toJson(map);//將對象轉為json數據 gson工具類是com.google.gson
    }

 

前端代碼

<div data-options="region:'center',title:'Test'">
    <table id="userList" class="easyui-datagrid" style="width:100%;" height=100% border="0px" title="Test"
           data-options="rownumbers:true,singleSelect:true" pagination="true">
    </table>
</div>

 

js代碼

<script type="text/javascript">
    $(function () {
        var paramdata = getparam(1, 10);//首次加載 獲取第一頁10條記錄的數據
        processparam(paramdata);//處理thead和tbody信息
        $("#userList").datagrid("getPager").pagination({//更換頁數和每頁記錄數時重新加載表格數據
            onSelectPage: function (pageNumber, pageSize) {
                var page = pageNumber;
                var rows = pageSize;
                paramdata = getparam(page, rows);
                processparam1(paramdata);//只加載tbody信息
            }
        });
    })

    //根據頁數和每頁記錄數記錄獲取數據
    function getparam(page, rows) {
        var page = page;
        var rows = rows;
        var paramdata;
        $.ajax({
            url: "${pageContext.request.contextPath}/license/test.do",
            async: false,//異步 false return值
            data: {
                "page": page,//當前頁
                "rows": rows,//每頁記錄數
            },
            type: 'POST',
            dataType: 'json',
            success: function (data) {//data后台的傳過來的表字段數組
                paramdata = data;
            }
        });
        return paramdata;
    }

    //加載columns和data數據 用於重新加載頁面時第一次生成表格確定表頭數據
    //注意：此方法僅適用於第一次加載頁面和重新加載頁面生成表格 在點擊下一頁等使用分頁功能時若使用此方法加載數據會導致表格重新生成，分頁功能不可用 故在分頁時使用processparam1方法只加載tbody數據 不重新生成表格
    function processparam(data) {
        var array = [];
        var columns = [];
        $(data.columns).each(function (index, el) {
            array.push({field: '', title: '', width: '', align: 'center'});//初始化表頭的屬性
        });
        var successData = {
            total: data.total,//總記錄數
            rows: data.mapputs,//每頁顯示行數
        };
        columns.push(array);
        $(data.columns).each(function (index, el) {
            columns[0][index]['field'] = el.key.toLocaleLowerCase();//field賦值 注意field 一定要與 后台傳來的mapputs集合里mapput的key 相等!
            columns[0][index]['title'] = el.key_cn;//title賦值
        });
        var userList = $('#userList')//加載數據 生成表格
            .datagrid({
                columns: columns,
                data: successData,
                rownumbers: true,
                singleSelect: true,
                pagination: true,
            });
    }

    //根據分頁參數傳來的page rows得到的data 加載tbody數據
    function processparam1(data) {
        //只加載tbody數據
        var successData = {
            total: data.total,
            rows: data.mapputs
        }
        $('#userList').datagrid('loadData', successData);
    }
    //與主體方法無關 若需要在頁面當前的page rows基礎上刷新表格 可使用此方法
    function reloadUserList() {
        var table = $('#userList');
        var options = table.datagrid('getPager').data("pagination").options;
        var page = options.pageNumber;
        var rows = options.pageSize;
        var paramdata = getparam(page, rows);
        if (paramdata.mapputs.length <= 0) {//若用戶刪除當前頁面的最后一條記錄 刷新當前頁會無記錄可顯示 所以判斷傳入數據是否為空 若為空則重新加載當前頁面 返回第一條頁面
            window.location.reload();
        }
        processparam1(paramdata);//不為空則加載重新獲取到的數據
    }
</script>