`
jobar
  • 浏览: 346905 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs中根据后台数据动态创建表格列及其数据

 
阅读更多
    renderDynamicTable: function(dataset,type, tab) {
        var resultSetId = type === 'control' ? '#controlResultSet' : '#testResultSet';
        var ctlSet = dataset;
        if(Ext.isArray(ctlSet) && ctlSet.length > 0){
            var ctlData = [];
            var fields = [];
			//根据数据集动态创建store fields及行数据
            ctlSet.forEach(function(row,index){
                var rowData = {};
                if(row && row.length > 0){
                    if(fields.length === 0){
                        for(var i=0;i<row.length;i++){
                            fields.push('col' + i);
                        }
                    }
                    row.forEach(function(value,index){
                        rowData[fields[index]] = value;
                    });
                    ctlData.push(rowData);
                }
            });
            var columns = [];
			//根据数据集动态创建列
            fields.forEach(function(name,index){
                columns.push({
                    text: name,
                    dataIndex: name,
                    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                        if(!Ext.isEmpty(value)){
                            metaData.tdAttr = 'data-qtip="' + value + '"';
                        }
                        return value;
                    }});
            });
			//创建内存store,绑定数据及fields
            Ext.create('Ext.data.Store', {
                storeId:'ctlStore',
                fields:fields,
                data: ctlData,
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json'
                    }
                }
            });
			//给表格重写配置store和列
            tab.down(resultSetId).reconfigure(Ext.data.StoreManager.lookup('ctlStore'),columns);
        }
    }
分享到:
评论
5 楼 桃汁天天 2016-01-21  
非常感谢 为我们剩下了许多研究时间 
4 楼 jobar 2015-10-19  
mistake 写道
var resultSetId = type === 'control' ? '#controlResultSet' : '#testResultSet';
这里的后面两个值是什么意思
还有输入的三个参数分别是什么

根据参数type分别指定需要用到的控制器
输入的三个参数指:需要render的dataset,控制器的类型以及在哪个tab上操作
3 楼 mistake 2015-07-15  
var resultSetId = type === 'control' ? '#controlResultSet' : '#testResultSet';
这里的后面两个值是什么意思
还有输入的三个参数分别是什么
2 楼 jobar 2015-06-15  
340045267 写道
请问一下 这个是版本几的  然后这个grid的那边的代码能不能贴出来给我看看 谢谢了

4.2的,grid跟普通的没啥区别
1 楼 340045267 2015-03-18  
请问一下 这个是版本几的  然后这个grid的那边的代码能不能贴出来给我看看 谢谢了

相关推荐

    extjs动态生成表格,前台+后台

    动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...

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

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

    extjs 动态表格完整版

    1. **创建表格**:创建一个基本的表格需要定义列模型(`columns`)和数据源(`store`)。列模型包含了每一列的属性,如字段名、标题、宽度等。数据源通常是`Ext.data.Store`对象,它管理着表格的数据,可以与后台...

    基于ExtJS技术实现的DataGrid 动态数据绑定检索例子程序代码

    在DataGrid组件中,动态数据绑定是指将表格的数据源与服务器上的数据实时连接,当数据发生变化时,DataGrid会自动更新显示。这种特性在处理大量或频繁更新的数据时非常有用,因为它减少了不必要的页面刷新,提高了...

    extjs与后台数据交换的一些测试类

    4. **Grid组件**:Grid是ExtJS中的表格控件,用于显示和编辑表格数据。测试类可能涉及如何配置列、行,以及如何绑定数据存储进行动态加载和编辑。 5. **文件上传**:ExtJS提供了文件上传组件,如`Ext.form....

    EXTJS产品级别管理后台源代码

    EXTJS的Grid Panel支持动态分页和列排序,用户可以通过配置`Ext.grid.plugin.PagingToolbar`实现分页,通过设置`sortable`属性对列进行排序。 5. **权限与角色管理**:对于后台系统,权限控制必不可少。EXTJS可以...

    ExtJs Filter 表格过滤

    在实现"ExtJs Filter 表格过滤"的Demo中,开发者通常会创建一个数据网格,配置每个列的过滤器,然后通过用户界面或代码触发过滤操作。通过分析和学习这个Demo,你可以理解如何集成过滤功能到自己的应用程序中,从而...

    EXTJS 行列转换

    对于行列转换的情况,可能需要根据后台返回的数据动态创建模型,确保能够正确映射到每列的数据。 2. **列模型配置**:EXTJS的列模型(ColumnModel)定义了Grid中的列,包括列的标题、宽度、对齐方式等。在行列转换...

    ExtJS静态使用示例

    在示例中,可能展示了如何创建一个基本的Grid,配置列模型,加载数据,以及实现基本的交互操作。 3. **Panel的使用**:Panel是ExtJS中的一个基础组件,可以理解为带有标题、边框和内容区域的容器。Panel可以包含...

    EXTjs4.2中文版

    EXTjs4.2中的图表组件得到了显著提升,提供了丰富的图表类型,包括柱状图、饼图、线图等,可以动态展示和交互,为数据分析和可视化提供了强大的工具。此外,4.2版本还改进了表格组件,增加了行编辑、列拖动等功能,...

    ExtJs与.Net结合开发实例

    动态添加数据字段是指在运行时根据需求增加或减少表格列。这在处理动态数据结构或者用户自定义视图时非常有用。在ExtJS中,可以通过创建新的ColumnModel实例并将其添加到grid的columns数组来实现。 **7. 示例代码...

    Extjs 2.0 中文帮助文件

    10. **API文档**:提供的中文API文档详细列出了每个类、方法、属性及其用法,是学习和使用ExtJS 2.0的关键参考资料。 通过深入学习这些知识点,开发者能够熟练掌握ExtJS 2.0,创建出高效、动态且用户友好的Web应用...

    ExtJS 中文手册2

    以下是一段创建表格控件的示例代码: ```javascript renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }]); var grid = new Ext.grid.Grid('grid-example', { ds: ds, cm: colModel });...

    extjs2.2.1

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽...

    ExtJS4 表格的嵌套 rowExpander应用

    总结来说,ExtJS4表格的嵌套rowExpander应用主要涉及表格组件的定义、数据存储和模型的配置、动态内容的处理、事件监听和处理、以及子表格的创建和销毁。通过实现这一功能,可以向用户提供更加丰富和详细的数据展示...

    Extjs中文教程

    - GridPanel是Extjs中用于显示表格数据的组件。 - 支持分页、排序、过滤等多种功能。 - **列模型与数据** - 列模型定义了表格的列结构,包括列名、宽度、对齐方式等。 - 数据通常通过Store加载到表格中。 - **...

    extjs-3.2.1包和相关资料.zip

    通过阅读文档,你可以了解到如何创建和配置组件,如何处理用户交互,以及如何利用ExtJS的数据模型和数据存储进行数据操作。 在开发过程中,ExtJS允许你使用MVC(Model-View-Controller)架构模式,这是一种常见的...

    ext.net-extjs

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽...

    Extjs+Struts整合入门实例

    它提供了丰富的组件库,包括数据网格、表格、图表等,使得开发者可以创建出功能强大且用户界面友好的网页应用。Struts,则是Java EE平台上的一款开源MVC框架,主要用于处理后端逻辑和服务端的业务流程。 本入门实例...

Global site tag (gtag.js) - Google Analytics