Extjs 动态生成表格-阿里云开发者社区

开发者社区> zting科技> 正文

Extjs 动态生成表格

简介:
+关注继续查看

在web显示数据时,会遇到grid的列数和行数不确定的这种情况。如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法。 要创建一个grid需要确定它的列数,再根据数据的数量就可以确定行数了。 看到有人用过一种方法就是讲列的属性和数据一起放在json data里去,这样可以达到效果,但是不难发现,这样的话,就很难进行分页或者更新表格里的数据。 其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格。 首先通过Ajax从服务端反回列的信息,封装成json ,表格数据通过另一个ajax请求来获得,因为列已经获得,所以可以将此封装成一个store.这样大功告成,生成grid所需要的,store,和cm demo 源码如下:(由于考虑到代码简介明了,我将数据写死在了js 中): Ext.onReady(function(){ // NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var myData =[[1,1,1,1], [2,2,2,2] ]; // example of custom renderer function function change(val){ if(val > 0){ return '' + val + ''; }else if(val < 0){ return '' + val + ''; } return val; } // example of custom renderer function function pctChange(val){ if(val > 0){ return '' + val + '%'; }else if(val < 0){ return '' + val + '%'; } return val; } // create the data store var fieldDatas = "{'columModle':["+ "{'header': 'seq','dataIndex': 'number','width':40},"+ "{'header': 'code','dataIndex': 'text1'},"+ "{'header': 'name','dataIndex': 'info1'},"+ "{'header': 'price','dataIndex': 'special1'}"+ "],'fieldsNames':[{name: 'number'},"+ "{name: 'text1'}, {name: 'info1'},"+ "{name: 'special1'}]}"; var json = new Ext.util.JSON.decode(fieldDatas); var cm = new Ext.grid.ColumnModel(json.columModle); var store = new Ext.data.SimpleStore({ fields: json.fieldsNames }); store.loadData(myData); // var ds = new Ext.data.JsonStore({ // data:store.toSource(), // fields:json.fieldsNames // }); // create the Grid var grid = new Ext.grid.GridPanel({ height:200, width:400, region: 'center', split: true, border:false, store:store, cm:cm }); grid.render('grid-example'); });



本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2011/09/22/2185445.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
IText 表格设置
package test; import java.awt.Color;import java.io.FileOutputStream;import java.io.IOException;import com.
606 0
从json自动生成模型代码
http://www.cocoachina.com/ios/20150713/12480.html
704 0
VB.NET版机房收费系统---导出Excel表格
       datagridview,翻译成中文的意思是数据表格显示,使用DataGridView控件,可以显示和编辑来自不同类型的数据源的表格,将数据绑定到DataGridView控件非常简单和直观,大多数情况下,只需要设置DataSource属性即可,在绑定到包含多个列表或表的数据库源时,只需将DataMember属性设置为绑定的列表或表的字符串即可。
1222 0
JSP-讲解(生成java类、静态导入与动态导入)
一、JSP技术简介 JSP是Java Server Page的缩写,它是Servlet的扩展,它的作用是简化网站的创建和维护。 JSP是HTML代码与Java代码的混合体。 JSP文件通常以JSP或JSPX的扩展名。
1111 0
+关注
2853
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载