easyui中根据后台数据动态改变datagrid的列
2017-12-26 15:51
661 查看
最近在做系统的时候需要根据后台提供的数据改变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 代码:
<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属性
在点击下拉框改变年份的时候动态改变列
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 代码:
<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属性
相关文章推荐
- easyui DataGrid checkbox 根据后台传递过来的数据进行勾选
- 根据后台数据,更改EasyUI的DataGrid的显示。比如后台数据库的数据是true和false.显示出来的是喝否
- EasyUI datagrid 改变url属性 实现动态加载数据
- EasyUI DataGrid 双击编辑单元格,保存并且后台数据改变
- easyui datagrid 根据请请求返回数据动态增加列
- EasyUI 动态改变数据窗口列 Dynamic Change DataGrid Coiumns
- [VB.NET]vb.net 根据数据情况动态改变datagrid样式(急)
- [转]扩展jQuery easyui datagrid增加动态改变列编辑的类型
- easyUI 根据一些条件改变DataGrid 行背景颜色
- easyui datagrid 动态改变大小
- jquery easyui dataGrid动态改变排序字段名
- easyui-datagrid---动态创建表头和加载数据
- JQuery EasyUI 根据数据动态生成datagrid
- EXT根据数据绘制chart柱状图和饼图,动态改变坐标轴
- 动态改变easyui datagrid 列的title
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
- layui动态设置下拉框数据,根据后台数据设置选中
- EasyUI 1.3.1 datagrid动态绑定列名和数据
- 根据后台数据动态在html页面显示新的数据的方法:
- easyUI_动态改变datagrid的url值