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

ExtJs实现 Grid动态生成列

阅读更多
以下是一个案例,有需求的朋友可以参看下: 
var cmItems = []; 
var cmConfig = {}; 
cmItems.push(new Ext.grid.RowNumberer()); 
cmItems.push(sm); 
cmItems.push({header : 'id',dataIndex : 'id',hidden : true,sortable : true}); 
cmItems.push({header : '单据编号',dataIndex : 'no',sortable : true}); 
cmItems.push({header : '组织',dataIndex : 'orgName',sortable : true}); 
cmItems.push({header : '上报日期',dataIndex : 'reportDate',sortable : true}); 
var priceTypeList = results.root 
for(var i=0;i<priceTypeList.length;i++){ 
     cmConfig = {header : priceTypeList[i].priceType,dataIndex : 'priceType'+priceTypeList[i].id,width : 100,sortable : true} 
     cmItems.push(cmConfig); 
} 
cmItems.push({header : ' 备注',dataIndex : 'note',width : 150,sortable : true}); 
cmItems.push({header : '创建人',dataIndex : 'createUserName',sortable : true}); 
cmItems.push({header : '创建日期',dataIndex : 'createDate',width : 120,sortable : true}); 
cmItems.push({header : '修改人',dataIndex : 'updateUserName',sortable : true}); 
cmItems.push({header : '修改日期',dataIndex : 'updateDate',width : 120,sortable : true}); 
cmItems.push({header : '状态',dataIndex : 'state',sortable : true}); 
// 信息列 
var cm = new Ext.grid.ColumnModel(cmItems); 

 

 

  • 大小: 3.3 KB
分享到:
评论
6 楼 kangsoft 2011-01-05  
zhengpei456 写道
kangsoft 写道
zhengpei456 写道
恕我愚昧,请问一下,你的results.root   中results是从何而来的。能具体一点吗?

这个在开始时需要先通过ajax同步方法获取到数据的

能把详细代码给我看看吗,急用,但是没做出来,我的json字符串获取的数据是这样的:

{"success":true,"
  totalCount":8,
"root":[
      {"semester":{"startDate":"2010-06-01","endDate":"2011-02-01","index":1,"active":true,"year":2009,"id":2},
          "scoreSheet":"語文",
          "score":"測驗1:87.0 平時分:87.0 考試分:86.0 總分:86.5 ",
          "columns":[
                 {"header":"測驗1","score":87.0,"dataIndex":"測驗1","width":50},
                 {"header":"平時分","score":87.0,"dataIndex":"平時分","width":50},
                  {"header":"考試分","score":86.0,"dataIndex":"考試分","width":50},
                  {"header":"總分","score":86.5,"dataIndex":"總分","width":50}
           ]
      },

只取了一条数据,现在需要动态的部分为columns--这部分是从数据库取得的可能是一条可能是多条,但是不管是多少条数据有多少条就需要在grid中动态生成几列。

你的代码results.root    是否是取得columns这部分的内容呢?

加我QQ联系吧(329365156)
5 楼 zhengpei456 2011-01-05  
kangsoft 写道
zhengpei456 写道
恕我愚昧,请问一下,你的results.root   中results是从何而来的。能具体一点吗?

这个在开始时需要先通过ajax同步方法获取到数据的

能把详细代码给我看看吗,急用,但是没做出来,我的json字符串获取的数据是这样的:

{"success":true,"
  totalCount":8,
"root":[
      {"semester":{"startDate":"2010-06-01","endDate":"2011-02-01","index":1,"active":true,"year":2009,"id":2},
          "scoreSheet":"語文",
          "score":"測驗1:87.0 平時分:87.0 考試分:86.0 總分:86.5 ",
          "columns":[
                 {"header":"測驗1","score":87.0,"dataIndex":"測驗1","width":50},
                 {"header":"平時分","score":87.0,"dataIndex":"平時分","width":50},
                  {"header":"考試分","score":86.0,"dataIndex":"考試分","width":50},
                  {"header":"總分","score":86.5,"dataIndex":"總分","width":50}
           ]
      },

只取了一条数据,现在需要动态的部分为columns--这部分是从数据库取得的可能是一条可能是多条,但是不管是多少条数据有多少条就需要在grid中动态生成几列。

你的代码results.root    是否是取得columns这部分的内容呢?
4 楼 kangsoft 2011-01-05  
zhengpei456 写道
恕我愚昧,请问一下,你的results.root   中results是从何而来的。能具体一点吗?

这个在开始时需要先通过ajax同步方法获取到数据的
3 楼 zhengpei456 2011-01-04  
恕我愚昧,请问一下,你的results.root   中results是从何而来的。能具体一点吗?
2 楼 meaijuan 2010-11-04  
1 楼 flyfan 2010-10-20  
谢谢,对我很有帮助

相关推荐

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    grid动态生成列参考!

    动态生成列的能力极大地增强了ExtJS GridPanel的灵活性,使得开发者能够根据不同的业务需求和数据状态,自定义表格的布局和功能。掌握这一技术,不仅有助于提升用户体验,还能简化复杂的前端逻辑,避免不必要的重复...

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

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

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

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

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    extjs 实现动态表头

    标题“extjs 实现动态表头”表明我们要讨论的是如何在ExtJS环境中构建一个能够动态改变列头的表格。动态表头的核心在于理解ExtJS的GridPanel组件和ColumnModel类。GridPanel用于显示数据,而ColumnModel则定义了...

    extjs grid数据导出excel文件

    本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤: 1. **获取Grid数据**:在EXTJS中,Grid的数据存储在Store对象中。要...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    在使用ExtJS4开发一个grid的时候,经常会遇到需要对grid的列进行动态的显示和隐藏操作,以适应不同的显示需求。ExtJS4中的gridpanel组件提供了一些内置的方法来控制列的可见性,但有时候需要一个更直观的方式来实现...

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    EXTJS grid导出EXCEL文件

    EXTJS是一个基于JavaScript的...以上就是EXTJS Grid导出Excel文件的相关知识点,理解并掌握这些内容可以帮助你实现从EXTJS应用中导出数据到Excel的功能。在实际开发中,还需要考虑性能优化、错误处理以及兼容性问题。

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

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

    Extjs Grid 中的 ToolTip效果

    - 对于Grid的列,我们可以使用`Ext.grid.column.Column`的`tooltip`配置项,或者使用`renderer`函数来动态生成Tooltip内容。 2. **配置列的Tooltip**: - 在定义Grid的列模型时,可以直接在列配置对象中设置`...

    ExtJs表格grid中文排序函数方法

    这个函数是ExtJs框架提供的用于生成比较器的函数,它可以根据sorters参数来生成比较器。sorters参数是一个数组,每个元素都是一个sorter对象,sorter对象有两个属性:property和direction。property属性是要排序的...

    extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx

    ### ExtJS4自动生成Grid列显示/隐藏Checkbox的实现方法 #### 一、问题背景及需求分析 在ExtJS4的应用开发过程中,有时会遇到这样的需求:需要为GridPanel中的每一列提供一个Checkbox来控制其是否显示。尽管ExtJS4...

    ExtJS4 动态生成的grid导出为excel示例

    通过以上步骤,你应该能够实现对动态生成的ExtJS4 Grid的任意次数导出,同时支持根据Grid显示的列进行定制化导出。如果遇到动态生成的Grid在重新配置(reconfigure)后的问题,检查并更新列信息的获取方式,确保与...

    ExtJs grid导出Excel

    在ExtJs中,你可以通过以下步骤实现Grid数据导出到Excel: 1. 首先,你需要在项目中引入XLSX.js库。这可以通过CDN链接或者将库文件下载并放在项目的静态资源目录下。 2. 创建一个方法,该方法接收Grid的数据源作为...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...

    EXTJS代码生成器

    EXTJS代码生成器是一款专为开发人员设计的工具,它能够自动生成基于EXTJS框架的MVC模式应用程序的代码,显著提升开发效率。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用,提供了丰富的组件库和强大的...

    ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)

    在标题中提到的"ExtJS4.0 分享Grid导出Excel插件"是一个扩展功能,允许用户将ExtJS Grid中的数据导出为Microsoft Excel格式的文件。这对于数据分析、报表生成以及数据共享非常有用。 这个插件是针对ExtJS 4.0版本...

Global site tag (gtag.js) - Google Analytics