如何動態生成EasyUI的表頭

2021 年 3 月 17 日
筆記
02-前端技術

需求

前幾天遇到了這樣一個需求，在頁面上展示一組數據，但是表頭不固定，需要動態加載出來。比如這次查詢表頭有【姓名】【年齡】，可能下次查詢表頭就變成了【姓名】【年齡】【性別】。

思路簡介

我剛剛接手這個項目，前端技術用的是EasyUI，不大熟悉。翻看了一下前人的代碼，表頭都是寫死的。在網上查了一下，形形色色的答案，但是思路大致是統一的，無非就是把datagrid的columns拼出來，只是在前端拼還是在後端拼的問題。
我覺得還是在前端拼比較好，看起來沒有那麼亂。大概就是說後端封裝一個對象包含比如title、filed、width等屬性，然後將這個對象的數組返回給前端。前端通過JS遍歷這個數組，拼接出需要的數據結構，賦值給columns。
但是我沒有用這種方式，因為我是一個後端選手，還是用後端代碼寫起來更得心應手些。
後端的寫法最初我是定義了一個 TableHeader 對象，把前端需要的字段封裝起來，然後前端，直接將接收到的數組賦值到 columns，不需要再進行其他處理。

public class TableHeader{
String title;
String filed;
int width;
}

這種寫法有一個問題，就是當我需要為數據添加 formatter 函數進行數據處理的時候，我需要的是 formatter : function(value,row,index){…} 這種數據格式，但是json解析出來給我加上了雙引號「formatter」:「function(value,row,index){…}「。我不知道怎麼去掉這個雙引號，所以選擇的另外一種簡單粗暴的方式，拼接字符串。

代碼展示

後端提供數據的方法：

public String getTableHeaders(Object param) {
    StringBuilder sb = new StringBuilder();
    sb.append("["); 
    List<String> columns = baseDao.getDynamicColumns(param);
    if (columns.isEmpty()) { 
        sb.append("]"); 
    } else {    
        for (String column : columns) { 
        String str = String.format("{field:\"%s\", title:\"%s\", width:%d, align:\"right\"},",column,column, 150);          
        sb.append(str);     
        }        
        sb.replace(sb.length() - 1, sb.length(), "]");   
    }    return sb.toString();
}

如果需要添加formatter或者rowstyler函數，直接在字符串里拼就行了。不大好看，但是絕對好使。

前端調取數據的方法：

var columns = [[]];
$.ajax({    
    type: "post", 
    async: false, // 這裡要注意設置為false, 表頭要先於數據加載
    data: param,   
    dataType: "json",  
    traditional: true, //這裡設置為true  
    url: ctx + "/report/" + headerUri + "/tableheaders",  
    success: function (ret) {    
    columns = [eval(ret)]; // 這裡要注意使用 eval() 方法解析字符串 
 }});
    $('#list').datagrid({ 
        url:'xxxxx',
        queryParams:xxxx,
        rownumbers: true,
        columns: columns
 })

其實只要思路搞清楚，實現起來並不複雜。

easyUI 是一個有點老但是十分簡單的框架，文檔也很清晰，在使用它的時候不妨多看看文檔，有時候比在網上搜來搜去更有效。比如動態顯隱行，一個rowStyler就能解決的問題，網上好多人搞得很複雜，甚至有說easyUI不支持的，很是誤導人。

rowStyler: function (index, row) {
                    if (row.indicator == '1') {                 
                            return 'display:none';
                        }else{
                            return 'background-color: yellow;';
                        }
                    }
                }

前人的經驗，不可不信，不可盡信。

Tags: 02-前端技術