博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Extjs 动态生成表格
阅读量:6318 次
发布时间:2019-06-22

本文共 1953 字,大约阅读时间需要 6 分钟。

在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://wncaa.baihongyu.com/

你可能感兴趣的文章
bash数组
查看>>
Richard M. Stallman 给《自由开源软件本地化》写的前言
查看>>
oracle数据库密码过期报错
查看>>
zip
查看>>
How to recover from root.sh on 11.2 Grid Infrastructure Failed
查看>>
rhel6下安装配置Squid过程
查看>>
《树莓派开发实战(第2版)》——1.1 选择树莓派型号
查看>>
在 Linux 下使用 fdisk 扩展分区容量
查看>>
结合AlphaGo算法和大数据的量化基本面分析法探讨
查看>>
如何在 Ubuntu Linux 16.04 LTS 中使用多个连接加速 apt-get/apt
查看>>
《OpenACC并行编程实战》—— 导读
查看>>
机器学习:用初等数学解读逻辑回归
查看>>
find和xargs
查看>>
数据结构例程—— 交换排序之快速排序
查看>>
IOS定位服务的应用
查看>>
php引用(&)
查看>>
Delphi 操作Flash D7~XE10都有 导入Activex控件 shockwave
查看>>
oracle 学习笔记之名词解释
查看>>
MySQL Cluster搭建与测试
查看>>
python数据分析画图体验
查看>>