Extjs动态生成表格 android软件开发教程

  次阅读 作者:智能小宝 来源:互联网 2016-03-01 10:42 我要评论(0)

在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(),

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...