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‘,
                dataIndex: ‘col1‘,
                width : 100
            }, {
                header: ‘列2‘,
                id: ‘col2‘,
                dataIndex: ‘col2‘,
                width : 100
            }, {
                header: ‘列3-1‘,
                id: ‘col31‘,
                dataIndex: ‘col31‘,
                width : 100
            }, {
                header: ‘列3-2‘,
                id: ‘col32‘,
                dataIndex: ‘col22‘,
                width : 100
            }, {
                header: ‘列3-3‘,
                id: ‘col33‘,
                dataIndex: ‘col33‘,
                width : 100
            }],
            headerRowsEx : [[{
                dataIndex : ‘col1‘,
                rowspan : 2
            }, {
                dataIndex : ‘col2‘,
                rowspan : 2
            }, {
                id : ‘col3Header‘,
                header : ‘列3‘,
                colspan : 3,
                width : 300
            }], [{
                header : ‘列1‘
            }, {
                header : ‘列2‘
            }, {
                dataIndex : ‘col31‘,
                columnIdRef : [‘col3Header‘]
            }, {
                dataIndex : ‘col32‘,
                columnIdRef : [‘col3Header‘]
            }, {
                dataIndex : ‘col33‘,
                columnIdRef : [‘col3Header‘]
            }]]
        }),
        filters : new Ext.ux.GridFilters({
            filters : [{
                ......
            }, {
                ......
            }]
        }),
        store : ...,
        listeners : ...
    },
    
    initialize : function(param) {
        var grid = Ext.getCmp(‘grid1‘);
        var cm = grid.getColumnModel();
        cm.setHidden(cm.findColumnIndex(‘col33‘), true);
    
        //  查找列的Index
        //cm.findColumnIndex(‘col33‘);
        // 单元格背景色设置
        // grid.getView().getCell(i, j).style.backgroundColor = "gray";
    }

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

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

    ExtJS 2.2.1 实现双表头动态列的相关文章

    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

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

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

    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

    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

    树形报表支持动态列统计

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