开发者社区> zting科技> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者

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

相关文章
ExtJS表单控件
k代码如下  Php代码   Ext.onReady(function() {                  Ext.
632 0
Extjs中弹出框动态绑定form和按钮
<p>直接贴代码.</p> <p>窗体代码:<br></p> <p></p> <pre code_snippet_id="253781" snippet_file_name="blog_20140324_1_6909581" name="code" class="javascript">/** * 窗体 */ Ext.define('nac.reportForm.view.For
1905 0
JS动态特性
var arr=[]; arr['js']='jquery'; arr['css']='oocss'; var obj={}; for(var i in arr) { obj[i]=arr[i]; } alert(obj.js);   JS语言的动态特性非常灵活,可以给对象动态的增加新的属性或者方法,即便是对数组也是可以动态增加其个数。
638 0
Extjs之对话框系列
作者:小雨 来源: 发表时间:2008-02-17   由于传统使用alert、confirm等方法产生的对话框非常古板,不好看。因此,ExtJS提供了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm等,实现华丽的应用程序界面。
792 0
extjs 配置与表格使用
引用 :http://www.jb51.net/article/20027.htm http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html 中文网站:http://extjs.
1050 0
extjs
引用:http://baike.baidu.com/view/1350145.htm 序言   ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。     功能丰富,无人能出其右。
1408 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载