当前位置: 代码迷 >> Web前端 >> 在dojo中怎么创建有多表头的data grid
  详细解决方案

在dojo中怎么创建有多表头的data grid

热度:404   发布时间:2012-11-05 09:35:11.0
在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之类的属性我就不加了 ,这样就算大功告成了。

  相关解决方案