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'); });
Extjs 动态生成表格相关推荐
- php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
- 一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
- JS实现动态生成表格并提交表格数据向后端 表格中数据转为json
原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
- 应用Java程序片段动态生成表格
通过Jsp页面动态来显示数据库中的数据,在根据条件进行查询时,将调查结果显示在jsp页面中,使用java程序片段(Scriptlet)动态生成表格 在jsp文件中,可以在"<%&quo ...
- WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究 文章目录 动态生成表格 动态生成表格 从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...
- 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据...
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格 转载于:https://www. ...
- 动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
PS: 游戏公司后台开发,工作模式:996. 于是写博客这事也荒废了.... 想想还是写一点吧. 呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的. 我建两个相似的表是为了,给后台使用 ...
- django通过ajax请求接口返回多条数据,并动态生成表格,请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
- javascript案例:动态生成表格
js案例:动态生成表格 一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
最新文章
- 计算机网络工程实用技术考试,计算机网络实用技术期中考试复习题.doc
- 29个你必须知道的Linux命令
- 学习XHTML的强烈欲望、!
- Android10.0应用进程创建过程以及Zygote的fork流程-[Android取经之路]
- Python 之 风格规范(Google )
- linux openssh升级8.1,Centos7利用rpm升级OpenSSH到openssh-8.1p1版本
- 异或运算交换两个整数
- 人物志 | KDD Cup 2017双料冠军燕鹏
- ES6——class和继承,保护对象
- 两数相除赋值整数变量(T-SQL)
- POI实现大数据EXCLE导入导出,解决内存溢出问题
- java内存溢出前端_【面试笔录】内存溢出和内存泄漏
- 太疯狂了!刚刚,马斯克脑机接口试验成功!这次是活猪下次是人脑!
- 根据文件大小搜索电脑文件
- 学籍管理系统mysql实训报告_学生学籍管理系统数据库设计
- windows计算机资源管理器,windows10系统打开资源管理器的三种方法
- uniapp使用IPA苹果支付
- 优化-规划问题(数学建模)
- 《海上钢琴师》斗琴部分的曲子
- 爬取豆瓣电影短评并使用词云简单分析top50
热门文章
- C++并查集Disjoint Set(附完整源码)
- C语言鸡尾酒排序cocktail sort算法(附完整源码)
- C++实现基数排序(附完整源码)
- 经典C语言程序100例之七
- 1.Slf4j使用log4j的配置参数、配置sl4j/log4j输出到不同的文件、案例
- 28 Java类的加载机制、什么是类的加载、类的生命周期、加载:查找并加载类的二进制数据、连接、初始化、类加载器、双亲委派模型、自定义类加载器
- Nginx缓存引发的跨域惨案(转:https://www.baidu.com/home/news/data/newspage?nid=9966642810298490574n_type=0p_f)
- Solr Admin中带高亮查询,带score查询;edismax的mm查询
- 使用POI读取excel文件内容
- Spket在Eclipse/MyEclipse下的安装和配置(图文教程)