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');

  });

时间: 2016-08-29

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

Jquery 动态生成表格示例代码

 在某些特殊的情况下是需要动态生成表格的,下面为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友不要错过 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content

用jquery怎么动态生成表格

问题描述 用jquery怎么动态生成表格 求大神帮忙![CSDN移动问答][1] ![CSDN移动问答][1] 表头已经固定了,本人是个jquery小白 最好写上每一步都是干什么的 ![CSDN移动问答][1] http://hi.baidu.com/nyrbduupwobikwd/item/e0d28c1941bc9563f1090e66 解决方案 取到整个table对象 $("table") 然后取他的子对象 $("table").children() 然后取他

aspose.words 动态生成表格的问题,有谁用过吗?麻烦帮忙解决下

问题描述 aspose.words 动态生成表格的问题,有谁用过吗?麻烦帮忙解决下 我的一个word里面有多个表格,会定义多个标签,但是获取动态生成表格的宽度时就会出问题?如何获取某个标签下的表格宽度呢? List widthList = new List(); if (doc.Range.Bookmarks["POregTable" + k + ""] != null) { for (int i = 0; i < dtsearch.Columns.Count

急急急!!!c#动态生成表格时遇到的怪问题

问题描述 动态生成表格,本来应该是类似如下形式:14TimestampTrue----------------------------15TimestampTrue----------------------------16TimeTrue----------------------------但现在遇到的情况时当数据较多时,在分页时产生下列情况:14TimestampTrue-----------------------------------------15TimestampTrue----

JS实现动态生成表格并提交表格数据向后端_javascript技巧

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

请教:如何用asp.net动态生成表格

问题描述 asp.net动态生成表格,表格某列有不一样的控件,或Textbox,或Dropdownlist,现在生成后,如何在控件里输入值,然后插入到数据库中,同时因为表格行列不固定,数据库怎么设计 解决方案 解决方案二:行列不固定,可以用稀疏矩阵的方法表示.解决方案三:该回复于2012-03-21 09:02:34被版主删除解决方案四:该回复于2012-03-21 09:02:35被版主删除解决方案五:像LZ这样需要动态生成的效果的话建议还是直接在后台拼接html代码比较方法,如果需要text

用EL动态生成表格

问题描述 用EL怎么样动态生成表格,并且表格的每一列都要有单击事件. 解决方案 解决方案二:用标签吧..EL可以实现态生成表格吗??解决方案三:<tableborder="1"><tr><td>Name</td><td>Age</td><td>Group</td></tr><c:choose><c:whentest="${emptyuserlist}&

Jquery 动态生成表格示例代码_jquery

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

请教,如何动态生成表格

问题描述 如何生成如下表格业务类型2G3G固话地域本月收入上月收入增长率本月收入上月收入增长率本月收入上月收入增长率昌平丰台海淀-------行,列都是从数据库中动态读取.用struts实现.