`

如何构建动态的Grid的列

    博客分类:
  • Ext
阅读更多
存在这样的需求,即如果显示的Grid的列是通过配置获取的,如何实现?
关键点:
加载配置的列数据
var store = new Ext.data.JsonStore({
                autoDestroy:true,
                fields     : ['mainTaskColumnConfig'],
                url: 'getUserDefineCols_columnConfig.do'
            });

            store.on('load', function(st, records) {
               this.grid = new MyGrid({columnConfig:records[0].data.mainTaskColumnConfig});
            }, this)

            store.load();

对应的JSON数据:
[{"mainTaskColumnConfig":[{"align":"center","dataIndex":"taskName","header":"任务名称","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"priority","header":"优先级","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"proposeSystem","header":"提交系统","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"executeMode","header":"任务执行模式","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"taskType","header":"任务类型","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"groupName","header":"组名","hidden":false,"sortable":true,"width":80},{"align":"center","dataIndex":"progress","header":"进度","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"proposeInterfaceType","header":"提交接口类型","hidden":false,"sortable":true,"width":100},{"align":"center","dataIndex":"taskHint","header":"任务描述","hidden":false,"sortable":true,"width":60},{"align":"center","dataIndex":"proposer","header":"提交者","hidden":false,"sortable":true,"width":100}]}]

自扩展的MyGrid的定义:
...
 this.cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer()
            ]);

    var defaultLength = this.cm.config.length;
    for(i = 0 ; i < columnConfig.length ;i++){
   if (columnConfig[i].dataIndex === 'executeMode') {//add render
            columnConfig[i].renderer = someRenderFn;
        }
      this.cm.config[defaultLength + i] =  columnConfig[i];
    }
    this.cm.setConfig(this.cm.config);
...
分享到:
评论

相关推荐

    grid动态生成列参考!

    在IT领域,特别是Web开发中,动态生成列是构建灵活且响应式用户界面的关键技术之一。本文将深入探讨如何在ExtJS框架下实现GridPanel的动态列生成,这对于那些需要根据用户操作或数据源变化实时调整列布局的应用场景...

    动态设置显示kendoui grid控件某一列的格式

    本篇文章将深入探讨如何动态地设置Kendo UI Grid中某一列的显示格式,特别是涉及到日期选择器(DatePicker)的自定义过滤功能。 首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤...

    ExtJs动态grid的生成

    - 动态Grid常用于数据分析、报表生成、管理界面等场景,可以根据用户选择或权限动态展示不同的数据列和功能。 通过以上讲解,我们可以看出在ExtJS中动态生成Grid涉及到许多关键技术和API。实际开发中,理解并掌握...

    ng-grid实现动态列表.rar

    本资源"ng-grid实现动态列表.rar"包含ng-Grid动态列的实现,以及所需的库文件和示例效果。 动态列表是Web应用中常见的需求,特别是在数据管理界面,用户可能希望根据不同的场景显示不同的列。ng-Grid允许我们在运行...

    Extjs动态GRID

    在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....

    dhtmlxGrid取一列方法

    dhtmlxGrid是一款强大的JavaScript库,用于创建动态、可定制的表格界面,广泛应用于Web应用的数据展示和管理。它提供了丰富的功能,包括排序、筛选、编辑、分页等,使得数据呈现更加灵活且用户友好。 ### dhtmlx...

    Folio使用React和CSSGrid布局构建的动态表单

    总的来说,Folio项目展示了React和CSS Grid在构建动态表单方面的强大潜力。React提供了组件化的开发模式和高效的UI更新,而CSS Grid则为表单布局提供了灵活的工具。这样的组合对于现代Web应用开发者来说,无疑是一个...

    Grid++Report 扩展 报表控件 可扩展 可动态添加

    1. **动态修改和添加功能**:Grid++Report的独特之处在于其支持报表的动态修改和添加。这意味着开发者可以在程序运行过程中,根据用户需求或业务逻辑,实时调整报表结构,如添加新的数据列、修改字段显示方式、调整...

    Grid(1)[动态添加列]

    标题"Grid(1)[动态添加列]"暗示我们将关注Flex中的DataGrid控件,特别是关于其列的动态创建。描述中提到的"DataGrid实例「 动态添加列 ]源代码"表明我们将基于实际的MXML代码来学习这一过程。由于标签包括"as"、...

    ext动态列

    EXT动态列是一种在EXT JS框架下实现表格列动态生成的技术,它允许我们在运行时根据需求创建或修改表格列。EXT JS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,其组件化的设计使得创建复杂的用户界面变...

    ExtJS grid过滤操作

    本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要...

    Jquery 实现列的拖动 jquery grid

    在网页开发中,jQuery Grid是一款强大的数据管理...通过对Grid的配置和扩展,我们可以构建出一款功能强大、用户体验良好的数据管理界面。在实际应用中,还可以结合其他jQuery插件和前端框架,进一步提升交互性和性能。

    grid数据窗口选择显示列

    在本示例中,我们将专注于“grid数据窗口选择显示列”的主题,探讨如何在PB9中设置数据窗口以显示特定的字段或列。 数据窗口是一种数据呈现控件,它能够以表格形式展示来自数据库的数据。在PowerBuilder中,你可以...

    WPF 为Grid自定义表格线,支持单元格行列合并

    在WPF(Windows Presentation Foundation)开发中,我们经常使用Grid控件来构建用户界面,它是一种灵活的布局系统,允许我们将窗口划分为多个行和列。然而,原生的Grid控件在显示表格线和行列合并方面可能无法满足...

    ASP.NET结合EXTJS动态生成Grid列表的例子程序源码

    3. **EXTJS Grid配置**:在前端,EXTJS的Grid组件需要定义列模型(ColumnModel),指定列的标题、宽度、数据字段等属性。同时,需要配置Store,设置数据源URL(指向ASP.NET控制器的方法)和数据类型(JSON)。 4. *...

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    Sigma Grid 是构建在jQuery之上的,利用其强大的DOM操作和事件处理能力,为开发者提供了一种快速构建动态表格的方法。 2. **Sigma Grid 功能**: - **数据绑定**:能够绑定到不同的数据源,如JSON、XML或API。 - ...

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    总结起来,EXT Grid的“AddRemovecolumn”插件提供了强大的动态列管理功能,使得开发人员能够灵活地构建适应变化的数据展示和交互需求的用户界面。通过熟练掌握这一插件,你可以提升EXT Grid的可配置性和用户体验,...

    Grid++Report报表代码填充数据

    5. **动态生成报表**:在代码中,我们可以根据业务逻辑动态创建报表结构,比如添加表格行、列,设置单元格样式,插入图片等。这种灵活性使得开发人员可以根据实际需求构建各种复杂的报表布局。 6. **性能优化**:在...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...

    grid嵌套grid

    总的来说,`Grid`嵌套`Grid`是`FineUI`框架中的一种强大布局策略,它允许开发者构建出层次分明、易于操作的用户界面。熟练掌握这一技术,将有助于提升前端开发效率和用户体验。在实践中不断探索和优化,你将能够创造...

Global site tag (gtag.js) - Google Analytics