如何动态生成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-前端技术