注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Gridx之Tree Module  

2014-01-05 15:01:08|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Gridx实现Tree Grid非常容易,只需简单的两步而已
第一,在module中加入 "gridx/modules/Tree"。
第二,为store加入两个方法。(下面是静态实现,当然也有动态实现,请参见gridx文档)

store.hasChildren = function(id, item){
return item && item.children && item.children.length;
};

store.getChildren = function(item){
return item.children;
};

实例: (注意Memory中的数据中加入了children)

require([
//Require resources.
"dojo/store/Memory",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"dijit/form/Button",
"gridx/modules/Tree",
"gridx/modules/filter/QuickFilter",
"gridx/modules/filter/Filter",
"gridx/modules/Bar"
], function(Memory, Cache, Grid, Button, Tree, QuickFilter, Filter, Bar){

var structure = [
{ id: 'name', field: 'name', name: 'Name', width: '200px'},
{ id: 'city', field: 'city', name: 'City'},
{ id: 'score', field: 'score', name: 'Score', width: '40px'},
{ id: 'birthday', field: 'birthday', name: 'Birthday', width: '80px'}
];

var store = new Memory({
data: [
{ id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5',
children:[
{ id: 6, name: 'John2', score: 82, city: 'San Fran1', birthday: '1990/1/21'},
{ id: 7, name: 'John2', score: 81, city: 'San Fran2', birthday: '1990/1/22',
children:[{ id: 8, name: 'John3', score: 89, city: 'San Francisco', birthday: '1990/1/21'}]
}
]
},
{ id: 2, name: 'Alice', score: 123, city: 'Washington', birthday: '1984/3/7'},
{ id: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '1986/10/8'},
{ id: 4, name: 'Mike', score: 100, city: 'London', birthday: '1988/8/12'},
{ id: 5, name: 'Tom', score: 89, city: 'San Francisco', birthday: '1990/1/21',
children: [
{ id: 9, name: 'Tom1', score: 77, city: 'San Francisco', birthday: '1990/1/21'},
{ id: 10, name: 'Tom2', score: 85, city: 'San Francisco', birthday: '1990/1/21'},
{ id: 11, name: 'Tom3', score: 83, city: 'San Francisco', birthday: '1990/1/21'}
]
}
]
});

store.hasChildren = function(id, item){
return item && item.children && item.children.length;
};

store.getChildren = function(item){
return item.children;
};

//We are using Memory store, so everything is synchronous.
var cacheClass = "gridx/core/model/cache/Sync";

//Create grid widget.
var grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
pageSize: 10,
structure: structure,
modules: [Tree, QuickFilter, Filter, Bar]
//treeNested: true
});

//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
grid.placeAt('gridx');

//Start it up.
grid.startup();
});

Gridx之Tree Module - 星期五 - 星期五

Tree节点默认是不展开的,我们需要通过API使它们展开。
递归将Tree(row id为1)的节点打开:grid.tree.expandRecursive(1);

参考资料:
Tree Wiki: https://github.com/oria/gridx/wiki/How-to-show-tree-structure%3F

Tree Module API: http://oria.github.io/gridx/apidoc/index.html#1.2/gridx/modules/Tree

  评论这张
 
阅读(639)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017