你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Web开发
easyui datagrid 动态生成列
 

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

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

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

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

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

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

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

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


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


[javascript]
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}"; 
        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格式,很重要,不能错!如果格式不对,就不能正常工作。

  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089