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='#' οnclick='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 代码:

<div class="f14 w pr bgWhite p-5" id="Ssearch" >
    <label  >年份:</label>
    <select id="Year_Combobox" >
   <option value="2021">2021</option>
   <option value="2020">2020</option>
   <option value="2019">2019</option>
   <option value="2018">2018</option>
   <option value="2017">2017</option>
   </select>
   <a href='#' id='Slink_button' class='easyui-linkbutton fb f16 ml-25' data-options="iconCls:'icon-search'" >查询</a>
</div>
<table id="Sdatagrid"></table>

 

需要注意两点:

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

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

 

转载于:https://www.cnblogs.com/wenyan/p/8118384.html