转载自:http://blog.csdn.net/majian_1987/article/details/8126168
easyui datagrid 定义列的方式通常是:
- $('#grid').datagrid({columns:[[
- {field:'f1',title:'字段1',width:160},
- {field:'f2',title:'字段2',width:160}
- ]]});
但在实际项目中,我们会经常需要datagrid能动态生成列。
在网上搜了一篇文章:再次谈谈easyui datagrid 的数据加载
很佩服这个作者,他居然能在easyui那一堆满是数字和字母组合的变量的被混淆的源码中,找到自己想要扩展的功能。。。强!
但是我不喜欢这种方式。毕竟修改源码有很多副作用,还是喜欢原生态。
动态生成列,这个很常见的需求,easyui不太可能不支持。
只是官方文档没有提到而已,可能作者是想靠这些高级功能赚咨询费。。。
说了很多废话,现在贴出我费了不少周折搞定的方法:
- 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');
- }
是不是觉得很简单?优雅的原生支持。。。