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(){})()
,这个是匿名自执行函数,第一个()
中是匿名函数,第二个()是自执行的意思小白一枚,如果有什么不对的欢迎指教。