`
cppasm
  • 浏览: 44550 次
社区版块
存档分类
最新评论

在dojo中如何创建有多表头的data grid

阅读更多
原来使用的是ExtJS来开发前端,但是感觉还是太复杂,想要用得好的话对开发人员的JavaScript水平要求还是比较高的,不然只能写一些toy code(不过即使使用YUI还是dojo或其它什么JavaScript相关的框架铺开了大抵对人员的JavaScript水平要求都不低的),最近看见dojo 1.5发布了,于是打算尝尝鲜,试着用dojo来做一下东西。我首先比较关注的一点就是dojo中的表格组件是否能够实现多表头,也有叫做header grouping或者nested header的(好像YUI中是这么叫的),想想dojo这么全能、强大,god-like一样的框架应该是没什么问题的,于是开始动手做起来。dojo中是用dojox.grid.DataGrid来实现表格组件的,读了一遍相关的参考文档,没什么头绪,看看API文档,也没什么答案,于是google一把,找到下面这篇帖子,http://o.dojotoolkit.org/forum/dojox-dojox/dojox-grid-support/dojo-grid-header-column-grouping,按里面的方案做了做,居然实现了。之所以所居然,是因为我没想到这么简单、直观,想当初在ExtJS里面为实现一个多表头可是费尽九牛二虎之力,好不容易找着一个插件,用起来也有些别扭,不是很直观,YUI里面的DataTable也有多表头的功能,实现和ExtJS里面差不多,总之我都感觉不是很好,主要是在对表头结构的声明上,感觉很别扭,不直观,容易搞混。但是dojo的实现我感觉就不错,其关键就在于DataGrid里的structure属性,在这里声明表格的结构,包括表头的结构就可以了:
var structure = {
  cells: [
    [{name:'多表头',width:'auto',colSpan:3},{name:'',width:'auto'}],
    [{name:'甲',width:'auto',field='a'},{name:'乙',width:'auto',field='c'},{name:'丙',width:'auto',field='c'},{name:'丁',width:'auto',field='d'}]
  ]
};

实现多表头的关键就在于cells的构造上,它就是一个数组,它里面的每一个元素就是一行的结构声明,也是一个数组,里面的每一个元素就是对一列的声明,通过里面的colSpan属性就可以控制该表头是否跨越列,跨越几列,和它在html的table元素中的作用是一样的。
然后将这个变量赋给到dojoType为dojox.grid.DataGrid的html节点的structure属性,就算大功告成了:
<div dojoType="dojox.grid.DataGrid" structure="structure"></div>

为图方便,store之类的属性我就不加了 ,这样就算大功告成了。

分享到:
评论

相关推荐

    dojo Grid例子

    在"dojo Grid例子"这个压缩包中,你将找到多个示例,展示了如何使用Dojo 1.2版本的Grid来处理不同格式的数据。 1. **Dojo Grid基础**:Dojo Grid允许开发者以美观、响应式的方式展示大量结构化数据。它支持排序、...

    dojo1.3_grid

    2. **合并行Grid demo**: 这个示例展示了如何在Grid中合并单元格,这在显示层次结构信息或者组织复杂数据时特别有用。通过合并行,可以创建具有头部和子头部的表格结构,使数据更易于理解和分析。 3. **数据过滤...

    dojo中文文档-dojo手册

    《dojo中文文档-dojo手册》提供了全面而深入的Dojo框架知识,这是一份非常有价值的资源,对于想要理解和掌握Dojo JavaScript库的开发者来说至关重要。Dojo是一个强大的JavaScript工具包,它提供了丰富的功能,包括...

    DOjo中文使用手册

    DOjo提供了三种安装方式:使用美国在线(AOL)的内容分发网络(CDN),在本地使用稳定版本,和从DOjo网站的SVN服务器上获取最新代码。使用CDN上的DOjo非常快捷,用户只需添加一个script标签到HTML文件中就可以使用...

    dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程

    在Dojo实例中,我们通常会遇到以下知识点: 1. **模块系统**:Dojo使用AMD(Asynchronous Module Definition)模块定义协议,允许异步加载模块。`require`和`define`是两个关键函数,`require`用于加载模块,`...

    DOJO API 中文参考手册,附加注解实例(精心重新排版DOC文档)

    手册中列举了一些常用的Dojo包,如dojo.io用于不同类型的IO传输,dojo.dnd提供拖放功能的API,dojo.string提供了字符串处理方法,dojo.date帮助解析和操作日期,dojo.event处理事件驱动和AOP开发,dojo.back管理撤销...

    dojo 官方教程 中文翻译

    11. **dojo/i18n**:国际化支持,帮助开发者轻松创建多语言应用。 12. **dojo/has**:条件编译特性,可以根据浏览器的特性动态加载代码。 此外,这个完整版教程还可能涵盖Dojo的高级特性和最佳实践,如性能优化、...

    dojo精品中文教程(全)

    分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO...

    dojo1.8.chm+dojo1.11中文入门pdf

    在实际项目中,Dojo还可以与其他技术,如jQuery或AngularJS,结合使用,以满足不同场景的需求。 总之,dojo1.8.chm和dojo1.11中文入门手册pdf是学习和掌握Dojo Toolkit不可或缺的参考资料。通过这两份文档,开发者...

    DOJO中文手册【出自dojo中国】

    在技术特性上,Dojo的文件结构包括一个核心代码文件(Dojo.js)和多个JavaScript文件,按照功能不同分为多个版本,如AJAX版、Widget版、Event和I/O版、Event版以及Kitchen Sink版,满足不同应用场景的需求。...

    Dojo官方教程中文翻译完美版

    8. **dojo/parser**:解析器负责在页面加载时查找标记有`data-dojo-type`属性的元素,并自动创建和配置对应的Dijit组件。 9. **dojo/on**:Dojo的事件处理模块,提供了一种统一的方式来监听DOM和非DOM事件,提高了...

    dojo精品中文教程(包二)

    dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记...

    dojo enhancedGrid pagination 分页实现

    对于静态数据加载,你可以直接在JavaScript中创建一个数据数组,然后使用`dojo/store/Memory`创建一个内存存储对象。 ```javascript var data = [ // 数据项... ]; var store = new dojo.store.Memory({data: ...

    DOJO API 中文参考手册

    2. **数据绑定 (dojo/data)**: Dojo 数据接口提供了一种统一的方式来访问和操作数据源,无论是本地存储还是远程服务。它包括多种数据模型,如ItemFileReadStore和JsonRestStore,用于与服务器进行数据交互。 3. **...

    dojo包和例子

    5. **dojo/data**:虽然已被`dojo/store`取代,但在一些较旧的例子中,可能还会看到`dojo/data`,它提供了一种抽象的数据访问机制,可以用于从不同数据源获取和操作数据。 6. **dijit**:Dijit是Dojo的UI组件库,...

    dojo中文文档

    dojo中文文档dojo中文文档

    dojo grid example

    Dojo Grid是一个强大的数据网格组件,它是Dojo Toolkit的一部分,用于在Web应用程序中展示和管理大量结构化数据。Dojo Grid提供了丰富的功能,包括排序、筛选、分页、编辑和自定义格式化,使得用户可以方便地操作和...

    DOJO 学习笔记 dojo

    在 Dojo 中,模块和包的概念是核心组成部分,它们帮助开发者组织和管理代码,使其更易于维护和重用。 模块(Module)是 Dojo 中的独立代码单元,每个模块代表一个特定的功能或者一组相关的函数和对象。通过使用模块...

    Dojo 框架中文手册

    它拥有多个子模块,如`dojo.collections`、`dojo.crypto`、`dojo.date`等,几乎涵盖了Web开发中的各个方面。 - **跨浏览器兼容性**:通过内部的抽象层,Dojo能够处理不同浏览器之间的差异,使得开发者无需关注特定...

    dojo精品中文教程(包一)

    dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记...

Global site tag (gtag.js) - Google Analytics