easyui之datagrid动态修改列

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

[html] view plain copy print?

1. $('#grid').datagrid({columns:[[    
2.     {field:'f1',title:'字段1',width:160},    
3.     {field:'f2',title:'字段2',width:160}    
4. ]]});   

$('#grid').datagrid({columns:[[  
    {field:'f1',title:'字段1',width:160},  
    {field:'f2',title:'字段2',width:160}  
]]}); 

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

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

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

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

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

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

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

[html] view plain copy print?

1. var options={};    
2. $(function(){    
3.     var myNj = 9;    
4.     //初始化    
5.     $("#disgrid").datagrid({    
6.         type: 'POST',    
7.         nowrap: false,    
8.         striped: true,    
9.         fit:true,    
10.         width:1024,    
11.         height:500,    
12.         url:'',    
13.         pageSize:30,    
14.         remoteSort: false,    
15.         pagination:true,    
16.         rownumbers:true,    
17.         singleSelect:true,    
18.         queryParams:{    
19.             nj:myNj,    
20.             unitType:1    
21.         }    
22.     });     
23.         
24.     fetchData(myNj);    
25. });    
26.     
27. function fetchData(nj) {    
28.     var s = "";    
29.     s = "[[";    
30.     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'},";    
31.         
32.     //lu todo 列的定义可从服务器获得    
33.     if (nj==9) {    
34.         s = s + "{field:'aipanel_text_exam',title:'短文朗读',width:80},{field:'aipanel_scene_exam',title:'情景对话',width:80},{field:'aipanel_oral_exam',title:'简短说话',width:80}";    
35.     
36.         //lu 加一个计算列    
37.         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);}}";    
38.     }else if (nj==7||nj==8){    
39.       //....    
40.   }    
41.     s = s + "]]";    
42.     options={};    
43.     options.url = '/app/search.do';    
44.     options.queryParams = {    
45.         nj:nj,    
46.         unitType:1    
47.     };    
48.     options.columns = eval(s);    
49.     //lu 增加一列    
50.     options.columns[0].push(    
51.         {    
52.             field:'desc',title:'查看详情',width:60,    
53.             formatter:function(value,rec){    
54.                 return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">详情</a>";    
55.             }    
56.         }       
57.     );    
58.         
59.     $('#disgrid').datagrid(options);    
60.     $('#disgrid').datagrid('reload');       
61.         
62. }    

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格式，很重要，不能错！如果格式不对，就不能正常工作。

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

[html] view plain copy print?

1. $('#grid').datagrid({columns:[[    
2.     {field:'f1',title:'字段1',width:160},    
3.     {field:'f2',title:'字段2',width:160}    
4. ]]});   

$('#grid').datagrid({columns:[[  
    {field:'f1',title:'字段1',width:160},  
    {field:'f2',title:'字段2',width:160}  
]]}); 

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

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

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

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

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

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

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

[html] view plain copy print?

1. var options={};    
2. $(function(){    
3.     var myNj = 9;    
4.     //初始化    
5.     $("#disgrid").datagrid({    
6.         type: 'POST',    
7.         nowrap: false,    
8.         striped: true,    
9.         fit:true,    
10.         width:1024,    
11.         height:500,    
12.         url:'',    
13.         pageSize:30,    
14.         remoteSort: false,    
15.         pagination:true,    
16.         rownumbers:true,    
17.         singleSelect:true,    
18.         queryParams:{    
19.             nj:myNj,    
20.             unitType:1    
21.         }    
22.     });     
23.         
24.     fetchData(myNj);    
25. });    
26.     
27. function fetchData(nj) {    
28.     var s = "";    
29.     s = "[[";    
30.     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'},";    
31.         
32.     //lu todo 列的定义可从服务器获得    
33.     if (nj==9) {    
34.         s = s + "{field:'aipanel_text_exam',title:'短文朗读',width:80},{field:'aipanel_scene_exam',title:'情景对话',width:80},{field:'aipanel_oral_exam',title:'简短说话',width:80}";    
35.     
36.         //lu 加一个计算列    
37.         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);}}";    
38.     }else if (nj==7||nj==8){    
39.       //....    
40.   }    
41.     s = s + "]]";    
42.     options={};    
43.     options.url = '/app/search.do';    
44.     options.queryParams = {    
45.         nj:nj,    
46.         unitType:1    
47.     };    
48.     options.columns = eval(s);    
49.     //lu 增加一列    
50.     options.columns[0].push(    
51.         {    
52.             field:'desc',title:'查看详情',width:60,    
53.             formatter:function(value,rec){    
54.                 return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">详情</a>";    
55.             }    
56.         }       
57.     );    
58.         
59.     $('#disgrid').datagrid(options);    
60.     $('#disgrid').datagrid('reload');       
61.         
62. }    

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格式，很重要，不能错！如果格式不对，就不能正常工作。