您现在的位置:首页 >> 前端 >> 内容

easyui的datagrid动态构建表头及格式化方法formatter

时间:2017/3/21 9:29:00 点击:

  核心提示:easyui的datagrid动态构建表头及格式化方法formatter。easyui的使用构建动态表头 columns的格式化方法formatter构建动态表头 在使用datagrid时代码如下no...

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数据网格](https://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 colList = new ArrayList();
中,colList代表一行,再构建
List> list = new ArrayList>();
将colList add进list中,利用@ResponseBody注解将list返回

$.ajax({
            url : '${path}/byUser/getListData.action?taskId='+taskId,
            type : 'get',
            dataType : 'json',
            success : function(data){ 
                $('#data_p').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(){})() ,这个是匿名自执行函数,第一个()
中是匿名函数,第二个()是自执行的意思。

Tags:EA AS SY YU 
作者:网络 来源:Seraphim_F