日常小记：easyui的datagrid动态构建表头及格式化方法formatter

easyui的使用

• 构建动态表头
• columns的格式化方法formatter

构建动态表头

在使用datagrid时代码如下

                    nowrap : true,
                    url : url,
                    rownumbers : false,
                    pagination : true,
                    pageSize : 5,
                    pageList : [5,8,10],
                    columns :[[{
                                title : '主题词名称',
                                field : 'wordName',
                                width : 160,
                                rowspan : 2,
                                align : 'center',
                                sortable : true
                            }, {
                                title : '中文',
                                field : 'descriptorName',
                                width : 120,
                                colspan : 3,
                                align : 'center',
                                sortable : true
                            }],[{
                                title : '专家一',
                                field : 'descriptorNameA',
                                width : 40,
                                align : 'center',
                                sortable : true,
                                formatter : $operates
                            }]]
                    ```
>以上部分数据作为示例，第一层**[]**代表表头数据,第二层**[]**代表不同的行，相互以**，**隔开，**{}**中是单元格的各个属性,**colspan**,**rowspan**分别代表合并横向和纵向单元格。**field**代表列名，与 url获取的数据对应。
>详细使用方法可以查看easyui官网对应位置[EasyUI datagrid数据网格](http://www.jeasyui.net/plugins/183.html)
###动态构建表头方法 
>在服务器中构建ColumnInfo类
>```
>//列字段名称
    private String field;
    //表头名字
    private String title;
    //单元格宽度
    private int width;
    //合并行
    private int rowspan;
    //合并列
    private int colspan;
    //对齐方式
    private String align;
    //单元格的格式化函数
    private String formatter;
    //允许被排序
    private boolean sortable;

添加如上属性，在服务器中动态构建ColumnInfo实体，存入
List<ColumnInfo> colList = new ArrayList<ColumnInfo>();
中，colList代表一行，再构建
List<List<ColumnInfo>> list = new ArrayList<List<ColulmnInfo>>();
将colList add进list中，利用@ResponseBody注解将list返回

$.ajax({
            url : '${path}/byUser/getListData.action?taskId='+taskId,
            type : 'get',
            dataType : 'json',
            success : function(data){ 
                $('#data_div').datagrid({
                    nowrap : true,
                    url : url,
                    rownumbers : false,
                    pagination : true,
                    pageSize : 5,
                    pageList : [5,8,10],
                    columns : data

如果是普通的表头基本都这里就差不多了，因为公司的业务需要用到格式化方法formatter来重新定义单元格样式，所以我又在ColumnInfo中加入了formatter属性，但是鉴于后台返回的是个字符串，无法将js中的方法赋值给formatter属性，后来在领导帮助下解决这个问题(小白拜服)

如下，将data替换为一个方法。
`

(function(){
      for(var j in data){
        var d = data[j];
        for(var i in d){
            if(d[i].formatter =="undefined"){ delete d[i].formatter; }else{ d[i].formatter = window[d[i].formatter]; }                           
        }
    }                
     return data;
})()

看懂的就不用看我赘述了，跟我一样小白的我解释下：
js中赋值方式有两种，一种是直接.属性的方式，另一种是通过名字获取
即[name]
放在这里就是d[i].formatter = window[d[i].formatter];全局对象和方法可以直接看作window的属性（js中默认的）
还有一个地方就是(function(){})() ,这个是匿名自执行函数，第一个()
中是匿名函数，第二个()是自执行的意思

小白一枚，如果有什么不对的欢迎指教。