easyuidatagrid
easyuidatagrid动态添加columns属性
公司在项⽬设计的时候，有⼀个需求，就是查出来的表的字段不唯⼀，⼀张表的字段可能是三个，也可能是五个，但是却要把它显⽰到页⾯，这个给我做ui的带来⼀点⿇烦。因
为以前⼀般⽤easyui 的datagrid⾥的columns属性都是对应数据库表⾥的字段，现在字段都不知道，怎么⽤datagrid显⽰数据呢？本⼈在这⾥介绍最笨的办法，就是拼接出
columns 属性的格式，我承认，我的办法效率不⾼，但是当你⽆从下⼿的时候，，这未尝不是解决问题的办法，当然在解决这个问题之前，我也百度了⼀下，试了⼀些办法，有
的是是去更改datagrid⾥的⽅法，以及从新构造⾥的的⽅法，本⼈是菜鸟，太⾼深的东西看不懂，所以只⽤了这个本办法。
第⼀步：获取这个张表的所有列，（表名你应该知道的），我⽤的是mysql数据库，所以根据表名获取的sql是：
select column_name from lumns where table_name='tableName'and TABLE_SCHEMA='dbName'；
tableName：是你的表的名字：dbName：是你的数据库的名字。该条sql语句执⾏的是结果是（这是本⼈表）：
这样就获取表的字段。
第⼆步：编写js代码，获取后台的⽅法我就不在此介绍。
var array =[];
var columns=[];
$.ajax({
url:_ctx+'/nodeManage/getMysqlFields',
type:'POST',
data:'id='+node['id'],
success:function(data){//data后台的传过来的表字段数组
$(data).each(function(){
array.push({field:'',title:'',width:''});
});
columns.push(array);
$(data).each(function(index,el){
columns[0][index]['field']= el['column_name'].toLocaleLowerCase();
columns[0][index]['title']= el['column_name'];
columns[0][index]['width']= "130";
});
$('#dg').datagrid({
fit:true,checkOnSelect:true,  selectOnCheck:true,  singleSelect:true,toolbar:'#queryToolbar',
pageSize : 5,
columns:columns,
dataType: 'json',
pageList: [5,10,30,50,70,100],
pageNumber : 1,
pagination:true,
queryParams:{id:node['id']},
url:_ctx+'/nodeManage/getMd5Datagrid'
});
},
dataType:'json'
});
解题思路：
⾸先我们知道datagrid colums的属性格式是：[[{field:'createtime',title:'创建时间',width:130},{field:'updatetime',title:'更新时间',width:130},]]。
⼀开始我以为是字符串，但是当我⽤console.info()输出带控制台的时候，发现它是个对象，所以⼀开始字符串拼接就是错了。所以要想动态构造column 的属性格式，必备按照它原来的格式来。
所在我定义两个数组，array[],colums[](这个columns 是我⾃定的数组对象，不是datagrid的属性)。
$(data).each(function(){
array.push({field:'',title:'',width:''});
})；这个⽅法是为了给array添加⼀定长度的内容，让后在将这个array通过push()放进⾃⼰定义的columns⾥，这样我们的得到的columns的对象格式就是跟datagrid ⼀样，然后将⾃定义的columns付给dagagrid的columns属性（别晕呀）。$(data).each(function(index,el){
columns[0][index]['field']= el['column_name'].toLocaleLowerCase();（因为field的值必须是⼩写，⽤过的都知道，为了防⽌数据库⾥建字段的时候你的是⼤写，所以在这⾥做个转换）
columns[0][index]['title']= el['column_name'];
columns[0][index]['width']= "130";
})；这⼀步是给刚定义的columns数组赋值，也就是你从后台获取的字段名。像formatter：functions(value,row,index){}也可以在次添加，这⾥⽤了两次循环，⽐较烦。
我再次承认效率上是存在问题的，欢迎请⼤家品评与指正！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。