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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

Gridx 静态实例  

2013-12-04 23:04:54|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Gridx 作为下一代Dojo Grid控件,弥补 Dojo 现有的 Grid 控件(主要是 DataGrid 及其子类 EnhancedGrid)的各种不足。Gridx 脱离了 DataGrid 框架,重新设计,高度模块化,高性能,高可用性。

下面以一个简单的静态实例,展示它的用法。
第一, 当然是下载它了,解压并将其放在dojo代码包下,与dojo,dijit,dojox处于同级目录。
第二, 引入CSS样式

<style type="text/css">
/*Use claro theme.*/
@import "dojo-release-1.9.1-src/dijit/themes/claro/claro.css";
@import "dojo-release-1.9.1-src/dijit/themes/claro/document.css";
/*Import the main CSS file of Gridx.*/
@import "dojo-release-1.9.1-src/gridx/resources/claro/Gridx.css";
/*import RTL css if you need to support rtl.*/
@import "dojo-release-1.9.1-src/gridx/resources/claro/Gridx_rtl.css";
</style>
<style>
.gridx {
width: 400px;
height: 200px;
}

第三,配置dojoConfig,指定gridx的package

<script type="text/javascript">
dojoConfig = {
async: true,
tlmSibingOfDojo: false,
parseOnLoad: true,
//isDebug: false,
locale: 'en-us',
baseUrl: "./dojo-release-1.9.1-src",
packages: [
{name: "dojo", location: "./dojo"},
{name: "dijit", location: "./dijit"},
{name: "dojox", location: "./dojox"},
{name: "gridx", location: "./gridx"}
]
};
</script>
<script src="http://zhenghaoju700.blog.163.com/blog/./dojo-release-1.9.1-src/dojo/dojo.js"></script>

第四, HTML

<body class="claro">
<div id="gridx"></div>
</body>

第五, 开始Gridx创建(6 Steps)

require([
//1.Require resources.
"dojo/store/Memory",
"gridx/core/model/cache/Sync",
"gridx/Grid"
], function(Memory, Cache, Grid){
//2.定义structure
var structure = [
{ id: 'name', field: 'name', name: 'Name', width: '50px'},
{ id: 'city', field: 'city', name: 'City'},
{ id: 'score', field: 'score', name: 'Score', width: '80px'}
];
//3.配置store,Gridx可以直接从store中读取数据
var store = new Memory({
data: [
{ id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5'},
{ 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'}
]
});
//4.指定Cache,这里是客户端实例,数据时同步的,所以使用同步的Cache
//Create grid widget.

var grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
pageSize: 10,
structure: structure
});

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

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

实际效果
Gridx 静态实例 - 星期五 - 星期五

参考资料:
http://oria.github.io/gridx/
https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx
  评论这张
 
阅读(637)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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