easyui之datagrid动态修改列

水深无声 2021-06-24 14:34 629阅读 0赞

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

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

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

在网上搜了一篇文章：[再次谈谈easyui 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');     
          
    }

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

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

[easyui datagrid]: http://www.easyui.info/archives/204.html

发表评论取消回复

表情：

评论列表（有 0 条评论，629人围观）

还没有评论，来说两句吧...

相关阅读

相关 esayui datagrid 动态列

今天碰到一个需求,查询数据列表的列会根据查询条件而变化.有多少组区域(区域1,区域2...),查询结果就要有多少列区域数(区域1,区域2..),限制区域数最多5组. 网上搜索

ゝ一世哀愁。/ 2022年08月22日 12:21/ 0 赞/ 229 阅读

相关 EasyUI DataGrid 相同连续列合并

$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) {

超、凢脫俗/ 2022年08月21日 02:13/ 0 赞/ 213 阅读

相关动态创建DataGrid 列

这个例子是根据XML中的节点值来创建DataGrid中的列，并且还包含了一些对列的属性得设置。 <?xml version="1.0" encoding="utf-8"

朴灿烈づ我的快乐病毒、/ 2022年08月07日 06:48/ 0 赞/ 190 阅读

相关 jquery easyui datagrid实现数据修改

1、单击选中待修改行 ![Center][] 2、使用单独对话框修改数据 3、使用updateRow方法修改数据（注意这里只是修改了网页上显示的数据，并没有同步修改

梦里梦外;/ 2022年08月03日 05:13/ 0 赞/ 331 阅读

相关【easyui】datagrid的列可编辑

1 使用editor方法，来实现可编辑 { field: 'value', title: '分配计划', width: 100, align: 'center', s

迈不过友情╰/ 2022年07月13日 00:43/ 0 赞/ 472 阅读

相关【easyui】动态显示datagrid列

以前做法 $("datagridId").datagrid("hideColumn", "columnField"); // 设置隐藏列现在做法

深藏阁楼爱情的钟/ 2022年06月13日 06:18/ 0 赞/ 349 阅读

相关 easyui datagrid自定义按钮列,最后操作列

目前小菜总结了两种方法：一、datagrid绑定数据列是通过HTML设置好的 <table id="dg" title="用户管理" style="width:

￡神魔★判官ぃ/ 2022年06月07日 04:38/ 0 赞/ 223 阅读

相关 EasyUI实践之路之datagrid（菜单栏、工具栏、格式化、动态换列）

一、datagrid： 1、table菜单栏：先在div中添加<a easyui-linkbutton>，再在table 属性中设置toolbar=div的id；

傷城~/ 2022年05月24日 06:26/ 0 赞/ 235 阅读

相关 easyui之datagrid：动态生成列(动态报表)

我们都知道，使用easyui可以很容易的生成datagrid，代码如下： _queryGrid = $("datagrid_queryReport").datagri

素颜马尾好姑娘i/ 2021年09月10日 12:40/ 0 赞/ 451 阅读

相关 easyui之datagrid动态修改列

easyui datagrid 定义列的方式通常是： $('grid').datagrid({columns:[[ {field:'f1',tit

水深无声/ 2021年06月24日 14:34/ 0 赞/ 630 阅读