ExtJS5.1.2 实现双表头动态列

需求:用ExtJS5.1.2制作以下Grid效果(其中列3是动态的):
ExtJS3的实现方式和5不一样。

基本代码:
为了实现双表头,需要嵌套columns。

{
    id : ‘grid1‘,
    xtype : ‘grid‘
    columns : [{
            header : ‘列1‘,
            xtype : ‘gridcolumn‘
        }, {
            header : ‘列2‘,
            xtype : ‘gridcolumn‘
        }, {
            header : ‘列3‘,
            xtype : ‘gridcolumn‘,
            columns : [{
                    header : ‘列3-1‘,
                    xtype : ‘gridcolumn‘
                } , {
                    header : ‘列3-2‘,
                    xtype : ‘gridcolumn‘
                }, {
                    header : ‘列3-3‘,
                    xtype : ‘gridcolumn‘
                }]
        }]
}

解决思路:

  1. 先显示所有动态列,然后隐藏。
    --> 失败,使用Ext.getCmp(id).hide()或者show()会导致页面无响应。这个方法在单表头的时候没有问题。
  2. 先全部按单列(不嵌套columns)显示,然后使用hide()隐藏不需要的列,再合并第一行表头。
    --> 目前没有找到实现方法。
  3. 动态追加列3。
    --> 使用columnManager.secondHeaderCt.insert(指定位置, column数组)或者add(column数组)。
    代码样本:
    var columnList = [];
    columns.push({
        header : ‘列3-1‘,
        xtype : ‘gridcolumn‘
    }, {
        header : ‘列3-2‘,
        xtype : ‘gridcolumn‘
    }, {
        header : ‘列3-3‘,
        xtype : ‘gridcolumn‘
    });
    var grid = Ext.getCmp(‘grid1‘);
    grid.columnManager.secondHeaderCt.add(
        xtype : ‘gridcolumn‘,
        header : ‘列3‘,
        columns : columnList
    );

ExtJS并不建议使用Ext.grid.ColumnManager,官方API也找不到grid.columnManager.secondHeaderCt,可以通过Chrome/F12/Console/输入“Ext.getCmp(‘grid‘).columnManager”找到secondHeaderCt。

原文地址:http://blog.51cto.com/13685327/2351363

时间: 2024-10-08 03:50:16

ExtJS5.1.2 实现双表头动态列的相关文章

ExtJS 2.2.1 实现双表头动态列

默认所有列(假设列3最大3列,动态显示),使用headerRowsEx中的rowspan实现双表头,第一层表头的width也必须要设置正确. 使用"grid.getColumnModel().setHidden"即可实现列的隐藏,也不需要动态设置colspan. { xtype : 'filtergrid', id : 'grid1', cm : new Ext.grid.ColumnModel({ columns : [{ header: '列1', id: 'col1', data

再谈extjs4.1中gridpanel动态表头动态列

之前写过一篇gridpanel有关动态列的博客,当时只是实验性的写写,实际项目中也没有用,因为是实验性的写,所以对实际项目考虑的问题不是很多,比如,如果是动态列,数据也是动态的,而且可能不固定,这些具体的问题,只有在实际开发后,才会明白,这次正好顺利开发完gridpanel的动态列,总结一下过程,为遇到同样问题的同学提供一个思路. 因为是实际开发项目,具体的代码比较多,这里只简单说说重点的一些代码,其实这些代码明白后,其他的功能都很好弄.顺便说一下,我后台数据库相关操作用的是c#. 既然是动态列

Silverlight系列--动态生成DataGrid列 根据动态列绑定Dictionary数据

1.获取表头数据源动态生成DataGrid表头 DataGridTextColumn d = new DataGridTextColumn(); d.Header = itemPriceClass.PriceKindCode + itemPriceClass.PriceKindName; Binding bin = new Binding(); bin.Converter = new RowIndexConverter(); bin.ConverterParameter = itemPriceC

C# 使用Epplus导出Excel [2]:导出动态列数据

上一篇导出excel,是导出已知固定列,有时候我们根本就不知道有几列.列名是什么,因此这些动态列,可以用Dictionary<string,string>接收. 1.实体Student上加上一个字段Dictionarys Student.cs public class Student { public String Name { get; set; } public String Code { get; set; } public Dictionary<string, string>

数据导出Excel,动态列

今天碰到一个需求,要求将用户回答的问卷及问题导出Excel表格,问卷对应的问题数量不一致,需要动态添加列表头,简单记录. 要导出Excel需要添加poi.jar包 用户-问卷实体(固定列): package com.lwl.bean; import com.util.annotation.BeanField; import lombok.Data; import java.sql.Timestamp; import java.util.List; /** * 问卷实体(用于导出excel) *

jquery.dataTables动态列

jquery.dataTables  版本1.10.7 直接上代码: 0.table <table id="popReportTable"> <thead> <tr id="trId"> <td>显示名,这里可以给tr一个id,然后用$("#trId").html("列名...")来改变显示列名</td> </tr> </thead> <

MariaDB 10.0.X中,动态列支持 JSON 格式来获取数据。

MariaDB 10.0.X中,动态列(Dynamic Columns),可以支持 JSON 格式来获取数据. 为了兼容传统SQL语法,MariaDB 10和MySQL5.7支持原生JSON格式,即关系型数据库和文档型NoSQL数据库集于一身. 使用说明: ###表结构 create table assets (   item_name varchar(32) primary key, -- A common attribute for all items   dynamic_cols  blo

extjs动态树 动态grid 动态列

由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代码目录表: CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL, TABLENAME VARCHAR2(50 BYTE), ZH_CN VARCHAR2(200 BYTE), ENABLE CHAR(1

树形报表支持动态列统计

汇总方式 选择 遍历字段 ,默认为数据汇总求和 字段语言 里填写要 在列 遍历 的字段 ,在后面的筛选条件里 增加 遍历字段='@now'  和其他条件 兼容原来的模式 树形报表支持动态列统计,布布扣,bubuko.com