如何动态生成EasyUI的表头

需求

前几天遇到了这样一个需求，在页面上展示一组数据，但是表头不固定，需要动态加载出来。比如这次查询表头有【姓名】【年龄】，可能下次查询表头就变成了【姓名】【年龄】【性别】。

思路简介

我刚刚接手这个项目，前端技术用的是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;';

                        }

                    }

                }

前人的经验，不可不信，不可尽信。

巴特西

如何动态生成EasyUI的表头

需求

思路简介

代码展示

最新文章

热门文章