Gridx入门

来源:未知 责任编辑:责任编辑 发表时间:2015-09-17 09:43 点击:

虽然同样都是基于Dojo store, 但与DataGrid/EnhancedGrid相比,Gridx有一套完全不同的架构。它有以下特点:

Gridx采用了一套与UI无关的内核来处理所有的表格数据的逻辑操作。
Gridx采用了一套灵活的模块化系统,它与基于plugin的EnhancedGrid架构不同,这种模块化架构不仅能提配置各种表格特性的灵活性,并且当一些功能不使用时,能够减少运行代码的大小。
Gridx开发了一套简洁直接的API,使得各模块之间实现真正的松耦合。
本文将简要介绍如何使用Gridx进行开发。现在Gridx仍处于开发阶段,一些API和实现的细节仍有可能调整。但它的基本用法和架构已经稳定。感兴趣的童鞋不妨一试。

1. 创建
假设我们有如下HTML页面:

[html]
<html> 
<head> 
    <title>Gridx Demo</title> 
    <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script> 
</head> 
<body> 
    <!-- We'd like to show a grid here --> 
    <div id="gridNode" style="width: 400px; height: 300px;"></div> 
</body> 
</html> 

首先,要引入Gridx的CSS:
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx.css" /> 

目前Gridx只支持Claro主题,如果要在RTL模式下运行,请用如下代码来引入:
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx_rtl.css" /> 
我们必须“请求require” 的JavaScript 模块是:

一种Store类型,例如:dojo/store/Memory
gridx/Grid
gridx/core/model/cache/Sync (用于客户端store) or gridx/core/model/cache/Async (用于服务器端 store)
假设我们要创建基于dojo/store/Memory的grid,那么我们需要如下代码:


[javascript]
require([ 
    'dojo/store/Memory', 
    'gridx/Grid', 
    'gridx/core/model/cache/Sync' 
], function(Store, Grid, Cache){ 
    var store = new Store({ 
        data: [ 
            {id: 1, title: 'Hey There', artist: 'Bette Midler'}, 
            {id: 2, title: 'Love or Confusion', artist: 'Jimi Hendrix'}, 
            {id: 3, title: 'Sugar Street', artist: 'Andy Narell'} 
        ] 
    }); 
    ...... 
}); 

与DataGrid/EnhancedGrid类似,我们需要定义列结构:

[javascript]
var columns = [ 
    {field: 'id', name: 'Identity'}, 
    {field: 'title', name: 'Title'}, 

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • Gb2312转utf-8编码的方法(vbs+js)
  • 如何使用Ajax技术开发Web应用程序(1)
  • js跳转路径问题
  • JavaScript模仿桌面窗口
  • 2011年度最佳 jQuery 插件
  • jquery学习笔记---jqGrid学习笔记 完整整理
  • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
  • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
  • 我是如何去了解jquery的(六),案例之幻灯片轮换
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1