easyui中根据后台数据动态改变datagrid的列

最近在做系统的时候需要根据后台提供的数据改变datagrid的列的field和 title，效果如下：

在点击下拉框改变年份的时候动态改变列

js 代码如下

//获取选择的月份
$('#Year_Combobox').combobox({
value:nowYear, //当前年份
panelHeight:true,
onSelect:function(record){
$.getJSON('interface/asynRead.php?cmd=getColumns',{
year:record.value
},function(data){
if(data.ret=='OK'){
columns1.length=0; //清空列的数组
columns2.length=0; //清空列的数组
var arr=data.rows;
$.each(arr, function(i,item){
var year=item.YMonth;
columns1.push({
"field": year+'', // 要求这里必须是 year+‘’ 将year转化为字符串
"title": year+'', //同理
"halign": 'center' ,
"colspan":3
});
columns2.push({
field: 'a'+year,
title: year,
width: 150,
align: 'right',
halign: 'center',
formatter: function(v, r, i) {
if(typeof v == 'undefined') {
return '-';
} else {
return "<a href='#' onclick='checkNum("+year+"," + r.checkNum + ");'>" + v + "</a>";
}
}
},{
field: 'a'+year+'Num',
title: year+'笔数',
width: 100,
align: 'right',
halign: 'center',
formatter: function(v, r, i) {
if(typeof v == 'undefined') {
return '-';
} else {
return v;
}
}
},{
field: 'a'+year+'check',
title: '核对',
width: 30,
align: 'right',
halign: 'center',
formatter: function(v, r, i) {
if(v == 0) {
return "<img src='img/no2.png'/>";
} else if(v == 1) {
return "<img src='img/yes.png'/>";
} else if(v == 2) {
return "<img src='img/quan.png'/>";
} else {
return '-';
}
}
});
});
$('#Sdatagrid').datagrid('loadData', {
rows: [],
ret: "OK"
});
$('#Sdatagrid').datagrid({
columns:[columns1,columns2],
url:''
});

}});

}});

html 代码:

需要注意两点:

1. feild 是 year+'' 把year转化为字符串

2. 在selelct 年份切换的时候 datagrid会自动加载，从而出错，需要设置 datagrid的url 为空，在点击查询的时候再给datagrid赋上url属性

秒客网

easyui中根据后台数据动态改变datagrid的列

相关文章