Extjs 动态生成表格

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());//初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不 会保存当前的状态,而是重新加载,象如果窗口中有用可拖动面板的话,你在拖动后如果启动了 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 ‘<span style="color:green;">‘ + val + ‘</span>‘;
       }else if(val < 0){
           return ‘<span style="color:red;">‘ + val + ‘</span>‘;
       }
       return val;
   }
   // example of custom renderer function
   function pctChange(val){
       if(val > 0){
           return ‘<span style="color:green;">‘ + val + ‘%</span>‘;
       }else if(val < 0){
           return ‘<span style="color:red;">‘ + val + ‘%</span>‘;
       }
       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);

// 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‘);
});

时间: 2024-10-14 14:45:56

Extjs 动态生成表格的相关文章

Android动态生成表格

最近刚刚学习完Android的五大布局,现在我们进一步深入学习,尝试做一个动态生成表格功能的例子 样式布局代码如下: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4

Javascript动态生成表格的性能调优

    vision 0.8 [耗时672ms]终极优化 将字符串作为数组对象的方式是目前效率最高,性能最优的方式.   <script> var t1 = new Date(); </script> <html> <head> <title></title> <script> function testTime(){ var t2 = new Date(); alert(t2-t1+"ms"); }

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

js动态生成表格(原创)

原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改表格,验证合法性功能,可做学习参考 版权声明:本文为博主原创文章,未经博主允许不得转载.

JS实现动态生成表格并向后端提交表格数据(一)

前段时间开发了一些web应用,其中就有涉及到动态的表格问题,因为很久没有写web前端了,所以在网上找了一些资料,发现很零碎,于是自己就根据找到的资料写了这么一个小功能,主要是供自己记忆,如果能帮到你很荣幸,如果你有更好的方法,也可以相互讨论,相互学习一下. 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. 1 <script src="../js

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">

C#实现动态生成表格的方法

本文以实例形式展现了C#实现动态生成表格的方法,分享给大家供大家参考之用.具体方法如下: public string CreateTable() { StringBuilder sb = new StringBuilder(""); int row = 1;//行数 if (true )//是否有数据 { int nRowCount = 10;//所有条数 row = (int)Math.Ceiling(nRowCount / 5.0);//5.0表示每行有多少条数据 int colN

js动态生成表格

下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td>

0166 DOM 之 节点操作: 删除节点,删除留言案例,复制(克隆)节点,动态生成表格案例,创建元素的三种方式,innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va