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() 然后取他

ASP.NET中Ajax改变下拉框动态生成表格的实例

1.建立一个aspx页面,html代码 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() {

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>

JS控制网页动态生成任意行列数表格的方法

 这篇文章主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式   代码如下: <html> <head> &l

JQuery Ajax动态生成Table表格_AJAX相关

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

数据-新手求解asp.net:asp.net中如何根据自己的需要动态的生成表格并能输入保存

问题描述 新手求解asp.net:asp.net中如何根据自己的需要动态的生成表格并能输入保存 新手求解asp.net:asp.net中如何根据自己的需要输入行列数动态的生成表格行和列,并且在网页中生成的表格能够对数据的输入并保存到后台数据库中,如果表格不能实现输入的话用文本框形式又如何解决?如何动态生成文本框并保存到数据库表格中,急啊,谢谢大神指点,好人一生平安0.0! 解决方案 asp.net 动态表格生成1.ASP.NET动态生成HTML页面Asp.net利用Jquery动态添加表格的行数

用Aspose.Words for .NET动态生成word文档中的数据表格

1.概述 最近项目中有一个这样的需求:导出word 文档,要求这个文档的格式不是固定的,用户可以随便的调整,导出内容中的数据表格列是动态的,例如要求导出姓名和性别,你就要导出这两列的数据,而且这个文档不是导出来之后再调整而是导出来后已经是调整过了的.看到这里,您也许马上想到用模板导出!而且.NET中自带有这个组件:Microsoft.Office.Interop.Word,暂且可以满足需求吧.但这个组件也是有局限性的,例如客户端必须装 office组件,而且编码复杂度高.最麻烦的需求是后面那个-

server-动态传给数据库一个以字段名组成的数组,怎样根据数组生成表格字段并创建表格?

问题描述 动态传给数据库一个以字段名组成的数组,怎样根据数组生成表格字段并创建表格? 数据格式如下: t1;t2;t3;t4;t5;t6;t7;t8;t9;t10;t11;t12;t13;t14; ps:字段名没有相似点,只用分号进行隔开 创建的字段类型都是NVARCHAR类型 数据库是sql2000或者2005