Extjs动态生成表头

蔚落 2022-09-22 01:29 238阅读 0赞

原文：[Extjs动态生成表头][Extjs]

[源代码下载地址][Extjs]

var cm = [{
    
           header : "编号",
    
           dataIndex : "id",
    
           width : 65
    
          }, {
    
           header : "名称",
    
           dataIndex : "name",
    
           width : 65
    
          }, {
    
           header : "路径",
    
           dataIndex : "url",
    
           width : 65
    
          }]
    
          var colModel = new Ext.grid.ColumnModel({
    
           columns : cm
    
          });
    
          var fd = ["id", "name", "url"];
    
          var store = new Ext.data.JsonStore({
    
           fields : fd
    
          })
    
          var grid = new Ext.grid.GridPanel({
    
           cm : colModel,
    
           store : store,
    
           tbar : [{
    
            xtype : "combo",
    
            id : 'my_combo',
    
            triggerAction : "all",
    
            store : ["新增列","更换列"],
    
            mode : 'local',
    
            resizable : true,
    
            editable: false,
    
            lazyRender : true,
    
            width : 100
    
           },"-",{
    
            text : "生成",
    
            icon : "images/icons/add.png",
    
            cls : "x-btn-text-icon",
    
            handler : function() {
    
             var temp = Ext.getCmp('my_combo').getValue();
    
             if(temp == null || temp == "") return;
    
             var newfd="";
    
             var newcm="";
    
             if(temp == "新增列"){//在原有列的基础上追加新的列
    
              newfd = fd;
    
              newcm = cm;
    
              var res = {//要添加的列信息,可以动态获取
    
               fields : [{
    
                name : "sex"
    
               }],
    
               columns : [{
    
                header : '性别',
    
                dataIndex : "sex",
    
                width : 65
    
               }]
    
              };
    
              var fields = res.fields;
    
              var columns = res.columns;
    
              for (var i = 0; i < fields.length; i++) {//自己可以写控制不重复追加
    
               newfd.push(fields[i]);
    
               newcm.push(columns[i]);
    
              }
    
             }else if(temp == "更换列"){//更换表格中所有的列
    
              var res = {//要更换的列信息,可以动态获取
    
               fields : ["number", "age", "address"],
    
               columns : [{
    
                header : '号码',
    
                dataIndex : "number",
    
                width : 80
    
               },{
    
                header : '年龄',
    
                dataIndex : "age",
    
                width : 80
    
               },{
    
                header : '地址',
    
                dataIndex : "address",
    
                width : 80
    
               }]
    
              };
    
              newfd = res.fields;
    
              newcm = res.columns;
    
             }
    
    
    
             // 重新绑定store及column
    
             newStore = new Ext.data.JsonStore({
    
              fields : newfd
    
             });
    
             var newColumnModel = new Ext.grid.ColumnModel(newcm);
    
             grid.reconfigure(newStore , newColumnModel);//使用新的Store和ColumnModel并刷新
    
    
    
             //列变动之后，就可以做数据的加载了，加载的就是对应新的列的数据了。
    
    
    
            }
    
           }]
    
          })
    
    
    
    
    
          var myWin = new Ext.Window({
    
           title:"动态改变ColumnModel",
    
           width : '600',
    
           height : 500,
    
           frame : true,
    
           layout : 'fit',
    
           items : [grid]
    
          });
    
          myWin.show();

![20140606105607931.jpg][]

由最代码官方编辑于2014-6-6 11:39:43

[Extjs]: http://www.zuidaima.com/share/1809516277238784.htm
[20140606105607931.jpg]: http://static.zuidaima.com/images/12844/201406/20140606105607931.jpg

发表评论取消回复

表情：

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

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

相关阅读

相关 laravel根据数据动态生成表头和表格数据

求：根据数据动态配置表头，动态适配表头数据如下图，两个表的表头和数据一一对应，都为动态生成；完成功能思想：1.找出数据中的存在的最长表头，即所有数据都为表头的...

约定不等于承诺〃/ 2024年04月17日 05:45/ 0 赞/ 60 阅读

相关 Extjs动态生成表头

原文：[Extjs动态生成表头][Extjs] [源代码下载地址][Extjs] var cm = [{ header :

蔚落/ 2022年09月22日 01:29/ 0 赞/ 239 阅读

相关 ExtJS4 grid表头分层并赋值

效果图： ![Center][] Ext.define('V5.cxb.view.Grid', \{ extend : 'Ext.grid.Panel', c

谁践踏了优雅/ 2022年07月17日 02:12/ 0 赞/ 207 阅读

相关 extjs grid隐藏表头

Ext.define('V5.auditoper.rule.view.FuncGrid', { extend: 'Ext.grid.Panel',

以你之姓@/ 2022年06月14日 11:45/ 0 赞/ 350 阅读

相关 easyUI实现动态表头

前台主要代码 $(function()\{ //初始化方法 defaultTime(); $('\pagination').datagrid

青旅半醒/ 2022年06月12日 08:19/ 0 赞/ 381 阅读

相关 Extjs grid表头换行

声明：本博文用于学习总结及工作心得在grid中添加afterrender事件： afterrender: function (grid) {

朱雀/ 2022年06月12日 02:09/ 0 赞/ 273 阅读

相关 easyui 实现动态表头

主要的思路就是:创建datagrid的时候将colums和数据当成参数，columns属性里面的field,和title通过后台传过来的数据进行循环拼接。 func

r囧r小猫/ 2022年06月09日 23:48/ 0 赞/ 555 阅读

相关 AdvancedDataGrid动态表头和多表头设计方法

这几天在学习Flex4，碰到DataGrid的一些问题，就在这说一下。首先是使用ActionScript来自定义组件，也可以使用MXML标签来定义组件，这都一样就不多说了。

缺乏、安全感/ 2022年06月09日 03:00/ 0 赞/ 260 阅读

相关 java 动态表头

<dependency> <groupId>cglib</groupId>

叁歲伎倆/ 2022年03月25日 07:48/ 0 赞/ 556 阅读

相关 Layui动态添加表头

需求:根据选择查询条件,动态添加clo列,并展示结果实现效果如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

迈不过友情╰/ 2021年09月21日 09:42/ 0 赞/ 563 阅读