存在这样的需求,即如果显示的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);
...
分享到:
相关推荐
在IT领域,特别是Web开发中,动态生成列是构建灵活且响应式用户界面的关键技术之一。本文将深入探讨如何在ExtJS框架下实现GridPanel的动态列生成,这对于那些需要根据用户操作或数据源变化实时调整列布局的应用场景...
本篇文章将深入探讨如何动态地设置Kendo UI Grid中某一列的显示格式,特别是涉及到日期选择器(DatePicker)的自定义过滤功能。 首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤...
- 动态Grid常用于数据分析、报表生成、管理界面等场景,可以根据用户选择或权限动态展示不同的数据列和功能。 通过以上讲解,我们可以看出在ExtJS中动态生成Grid涉及到许多关键技术和API。实际开发中,理解并掌握...
本资源"ng-grid实现动态列表.rar"包含ng-Grid动态列的实现,以及所需的库文件和示例效果。 动态列表是Web应用中常见的需求,特别是在数据管理界面,用户可能希望根据不同的场景显示不同的列。ng-Grid允许我们在运行...
在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....
dhtmlxGrid是一款强大的JavaScript库,用于创建动态、可定制的表格界面,广泛应用于Web应用的数据展示和管理。它提供了丰富的功能,包括排序、筛选、编辑、分页等,使得数据呈现更加灵活且用户友好。 ### dhtmlx...
总的来说,Folio项目展示了React和CSS Grid在构建动态表单方面的强大潜力。React提供了组件化的开发模式和高效的UI更新,而CSS Grid则为表单布局提供了灵活的工具。这样的组合对于现代Web应用开发者来说,无疑是一个...
1. **动态修改和添加功能**:Grid++Report的独特之处在于其支持报表的动态修改和添加。这意味着开发者可以在程序运行过程中,根据用户需求或业务逻辑,实时调整报表结构,如添加新的数据列、修改字段显示方式、调整...
标题"Grid(1)[动态添加列]"暗示我们将关注Flex中的DataGrid控件,特别是关于其列的动态创建。描述中提到的"DataGrid实例「 动态添加列 ]源代码"表明我们将基于实际的MXML代码来学习这一过程。由于标签包括"as"、...
EXT动态列是一种在EXT JS框架下实现表格列动态生成的技术,它允许我们在运行时根据需求创建或修改表格列。EXT JS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,其组件化的设计使得创建复杂的用户界面变...
本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要...
在网页开发中,jQuery Grid是一款强大的数据管理...通过对Grid的配置和扩展,我们可以构建出一款功能强大、用户体验良好的数据管理界面。在实际应用中,还可以结合其他jQuery插件和前端框架,进一步提升交互性和性能。
在本示例中,我们将专注于“grid数据窗口选择显示列”的主题,探讨如何在PB9中设置数据窗口以显示特定的字段或列。 数据窗口是一种数据呈现控件,它能够以表格形式展示来自数据库的数据。在PowerBuilder中,你可以...
在WPF(Windows Presentation Foundation)开发中,我们经常使用Grid控件来构建用户界面,它是一种灵活的布局系统,允许我们将窗口划分为多个行和列。然而,原生的Grid控件在显示表格线和行列合并方面可能无法满足...
3. **EXTJS Grid配置**:在前端,EXTJS的Grid组件需要定义列模型(ColumnModel),指定列的标题、宽度、数据字段等属性。同时,需要配置Store,设置数据源URL(指向ASP.NET控制器的方法)和数据类型(JSON)。 4. *...
Sigma Grid 是构建在jQuery之上的,利用其强大的DOM操作和事件处理能力,为开发者提供了一种快速构建动态表格的方法。 2. **Sigma Grid 功能**: - **数据绑定**:能够绑定到不同的数据源,如JSON、XML或API。 - ...
总结起来,EXT Grid的“AddRemovecolumn”插件提供了强大的动态列管理功能,使得开发人员能够灵活地构建适应变化的数据展示和交互需求的用户界面。通过熟练掌握这一插件,你可以提升EXT Grid的可配置性和用户体验,...
5. **动态生成报表**:在代码中,我们可以根据业务逻辑动态创建报表结构,比如添加表格行、列,设置单元格样式,插入图片等。这种灵活性使得开发人员可以根据实际需求构建各种复杂的报表布局。 6. **性能优化**:在...
6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...
总的来说,`Grid`嵌套`Grid`是`FineUI`框架中的一种强大布局策略,它允许开发者构建出层次分明、易于操作的用户界面。熟练掌握这一技术,将有助于提升前端开发效率和用户体验。在实践中不断探索和优化,你将能够创造...