Easui中datagrid实现动态控制columns

转载自：http://blog.csdn.net/majian_1987/article/details/8126168

easyui datagrid 定义列的方式通常是：

[javascript] view
plain copy

$('#grid').datagrid({columns:[[

{field:'f1',title:'字段1',width:160},

{field:'f2',title:'字段2',width:160}

]]});

但在实际项目中，我们会经常需要datagrid能动态生成列。

在网上搜了一篇文章：再次谈谈easyui datagrid 的数据加载

很佩服这个作者，他居然能在easyui那一堆满是数字和字母组合的变量的被混淆的源码中，找到自己想要扩展的功能。。。强！

但是我不喜欢这种方式。毕竟修改源码有很多副作用，还是喜欢原生态。

动态生成列，这个很常见的需求，easyui不太可能不支持。

只是官方文档没有提到而已，可能作者是想靠这些高级功能赚咨询费。。。

说了很多废话，现在贴出我费了不少周折搞定的方法：

[javascript] view
plain copy

var options={};

$(function(){

var myNj = 9;

//初始化

$("#disgrid").datagrid({

type: 'POST',

nowrap: false,

striped: true,

fit:true,

width:1024,

height:500,

url:'',

pageSize:30,

remoteSort: false,

pagination:true,

rownumbers:true,

singleSelect:true,

queryParams:{

nj:myNj,

unitType:1

}

});

fetchData(myNj);

});

function fetchData(nj) {

var s = "";

s = "[[";

s = s + "{field:'unitname',title:'单元',width:160},{field:'practicetime',title:'测试时间',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";

//lu todo 列的定义可从服务器获得

if (nj==9) {

s = s + "{field:'aipanel_text_exam',title:'短文朗读',width:80},{field:'aipanel_scene_exam',title:'情景对话',width:80},{field:'aipanel_oral_exam',title:'简短说话',width:80}";

//lu 加一个计算列

s = s + ",{field:'tatal_score',title:'总分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";

}else if (nj==7||nj==8){

//....

}

s = s + "]]";

options={};

options.url = '/app/search.do';

options.queryParams = {

nj:nj,

unitType:1

};

options.columns = eval(s);

//lu 增加一列

options.columns[0].push(

{

field:'desc',title:'查看详情',width:60,

formatter:function(value,rec){

return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">详情</a>";

}

}

);

$('#disgrid').datagrid(options);

$('#disgrid').datagrid('reload');

}

是不是觉得很简单？优雅的原生支持。。。

需要注意的是，列定义的JSON格式，很重要，不能错！如果格式不对，就不能正常工作。