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

之前写过一篇gridpanel有关动态列的博客,当时只是实验性的写写,实际项目中也没有用,因为是实验性的写,所以对实际项目考虑的问题不是很多,比如,如果是动态列,数据也是动态的,而且可能不固定,这些具体的问题,只有在实际开发后,才会明白,这次正好顺利开发完gridpanel的动态列,总结一下过程,为遇到同样问题的同学提供一个思路。

因为是实际开发项目,具体的代码比较多,这里只简单说说重点的一些代码,其实这些代码明白后,其他的功能都很好弄。顺便说一下,我后台数据库相关操作用的是c#。

既然是动态列,应该是包括两部分动态的信息,一部分是动态的表头信息,一部分是动态的数据信息。表头信息可以直接动态生成,而动态的数据嘛,我之前有考虑过动态生成类,然后根据生成的类,构造数据集合,后来试了一下,行不通,所以动态的数据信息还是使用js构造吧,也不复杂。

生成动态表头时,我创建了一个表头类,如下

因为我的动态列都是int类型,所以直接在前台生成的时候固定写好了,你的要是不同的类型,也可以多增加一个字段,表示字段的数据类型。

动态表头生成后,有两个地方需要,那就是gridpanel的columns集合,以及构建数据集合store的fields集合。

表头集合和数据集合都是通过后台序列化传到前台页面,操作起来也很简单,上面的代码基本就是刚刚说的,构建columns和fields数组。

下一步就是有个数据的构建了,一般这种动态列,都是行转列的操作,如果不是行转列那就更简单。什么是行转列呢?举个例子

有一个集合是这样的

科目   姓名  分数

语文   李一   20

数学  李一    30

英语  李一    40

语文  李二    50

数学  李二    50

最终的动态列要求是这样的

姓名  语文  数学  英语

李一    20   30     40

李二    50    50     0

说是动态列,其实下动态列的来源是固定有的,当然你也可以说,我可以使用sql,联合查询可以得到行转列。没错,关键是传递到前台的方式,如果你是要序列化,你就需要根据一个动态类序列化,然后传到前台,也就是以json的格式,如果只传递一个类似于DataTable的方式,前台是没法显示的,gridpanel数据源一般是store。

那我们就按照需要的格式组织我们的数据就行了,这里就体现了js的一个灵活的地方,属性可以直接的添加,比如上面生成的表头集合中的动态的dataIndex,我们就可以定义一个对象,动态给这个对象添加dataIndex和对应的数据值。

好了,动态表头集合有了,构造的对应的数据集合有了,下面的就简单了,只需要构造store,和重新配置grid就行了

大功告成,动态列和动态表头也就完成了

时间: 2024-10-05 05:07:40

再谈extjs4.1中gridpanel动态表头动态列的相关文章

C++ Primer 学习笔记_43_STL实践与分析(17)--再谈迭代器【中】

STL实践与分析 --再谈迭代器[中] 二.iostream迭代[续] 3.ostream_iterator对象和ostream_iterator对象的使用 能够使用ostream_iterator对象将一个值序列写入流中,其操作过程与使用迭代器将一组值逐个赋值给容器中的元素同样: ostream_iterator<string> out_iter(cout,"\n"); istream_iterator<string> in_iter(cin),eof; wh

easyui动态表头 &amp;&amp; 动态添加tabs

今天在实现一个业务的时候,需要根据后台业务数据生成多个tab页,并且每个tab页中表格的表头需要根据数据动态生成. 后台返回的数据格式如下: 实现方法如下: //$("#compareResWin")//弹窗 //$('#compareResTabs')//弹窗内的tab页面 success: function(result) {  if(result.length==0){   alert('无比对结果');  }else{   $("#compareResWin"

再谈Linux内核中的RCU机制

转自:http://blog.chinaunix.net/uid-23769728-id-3080134.html RCU的设计思想比较明确,通过新老指针替换的方式来实现免锁方式的共享保护.但是具体到代码的层面,理解起来多少还是会有些困难.在<深入Linux设备驱动程序内核机制>第4章中,已经非常明确地叙述了RCU背后所遵循的规则,这些规则是从一个比较高的视角来看,因为我觉得过多的代码分析反而容易让读者在细节上迷失方向.最近拿到书后,我又重头仔细看了RCU部分的文字,觉得还应该补充一点点内容,

再谈Spring Boot中的乱码和编码问题

编码算不上一个大问题,即使你什么都不管,也有很大的可能你不会遇到任何问题,因为大部分框架都有默认的编码配置,有很多是UTF-8,那么遇到中文乱码的机会很低,所以很多人也忽视了. Spring系列产品大量运用在网站开发中,而Spring Boot是为了简化配置而出现的,理论上讲Spring Boot应该默认配置UTF-8为默认编码,但是网络上依然可以看到很多关于Spring Boot乱码的文章,大部分解决方案沿用Spring MVC的方案,自定义EncodingFilter. 但是仔细查看Spri

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

Unity教程之再谈Unity中的优化技术

这是从 Unity教程之再谈Unity中的优化技术 这篇文章里提取出来的一部分,这篇文章让我学到了挺多可能我应该知道却还没知道的知识,写的挺好的 优化几何体 这一步主要是为了针对性能瓶颈中的”顶点处理“一项.这里的几何体就是指组成场景中对象的网格结构. 3D游戏制作都由模型制作开始.而在建模时,有一条我们需要记住:尽可能减少模型中三角形的数目,一些对于模型没有影响.或是肉眼非常难察觉到区别的顶点都要尽可能去掉.例如在下面左图中,正方体内部很多顶点都是不需要的,而把这个模型导入到Unity里就会是

.NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤

转:http://www.cnblogs.com/jaxu/archive/2011/08/04/2127365.html 我们见过Excel中的数据过滤功能,可以通过点击表头上的下拉列表来实现数据的过滤,这个功能很实用,省去了我们需要在程序中单独设计数据的查询过滤模块,功能直接依赖于数据绑定控件DataGridView.先来看看Excel中的数据过滤功能. 要想在DataGridView中实现类似于Excel的这种功能其实也并非难事.来看看msdn上的一篇文章,上面有详细的介绍,不过目前只有全

再谈word2003编程

再谈word2003编程 近期因为项目需要,写了许多word2003编程的东东.有时候遇到难题想查sdk说明,很难找到中文解释,对于e文不好的我来说,简直是天书.想必很多人多有感慨.     下面列出内容是一些常用的内容说明,希望对大家有帮助.     那就开始吧注意,下文的WAPP是我定义的word文档工程变量 的 //合并单元格    table.Cell(2, 2).Merge(table.Cell(2, 3));  //单元格分离     object Rownum = 2;     o

再谈CMake与RPATH

之前写过一篇<探讨CMake中关于RPATH的使用>,只要针对的方面是在编译生成之后(不包括安装的make install)如何去除RPATH的问题.今天给大家主要介绍一下如何让CMake在用install命令之后如何保持RPATH. 我先来简单介绍下CMake关于RPATH的机制,在之前文章中介绍过,如果你没有显示指定CMAKE_SKIP_RPATH,CMAKE_BUILD_WITH_INSTALL_RPATH,CMAKE_SKIP_BUILD_RAPTH,CMAKE_SKIP_INSTAL