核心提示: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实体,存入
ListcolList = 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(){})() ,这个是匿名自执行函数,第一个()
中是匿名函数,第二个()是自执行的意思。