前几天遇到了这样一个需求，在页面上展示一组数据，但是表头不固定，需要动态加载出来。比如这次查询表头有【姓名】【年龄】，可能下次查询表头就变成了【姓名】【年龄】【性别】。
思路简介我刚刚接手这个项目，前端技术用的是EasyUI，不大熟悉。翻看了一下前人的代码，表头都是写死的。在网上查了一下，形形色色的答案，但是思路大致是统一的，无非就是把datagrid的columns拼出来，只是在前端拼还是在后端拼的问题。
我觉得还是在前端拼比较好，看起来没有那么乱。大概就是说后端封装一个对象包含比如title、filed、width等属性，然后将这个对象的数组返回给前端。前端通过JS遍历这个数组，拼接出需要的数据结构，赋值给columns。
但是我没有用这种方式，因为我是一个后端选手，还是用后端代码写起来更得心应手些。
后端的写法最初我是定义了一个 TableHeader 对象，把前端需要的字段封装起来，然后前端，直接将接收到的数组赋值到 columns，不需要再进行其他处理。
这种写法有一个问题，就是当我需要为数据添加 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;'; } } }前人的经验，不可不信，不可尽信。