两种方式使用Dojox.grid.DataGrid打赏

Dojo的widget机制设计的很不错,默认提供了很多好用的widget,其中DataGrid就是最常用的一种,正常情况下,很多人会选择使用声明式的引入,就是在页面上写入任意html标签,指定dojoType为Dojox.grid.DataGrid,当然,既然是widget,也就支持另外一种方式,也是我比较喜欢用的方式,即编程式引入。

第一种

先通过引入dojo.data.ItemFileWriteStore,构建test_store,简单的理解,即数据源,对应DataGrid的store。dojo的dojo.data.ItemFileWriteStore可以方便的使用ajax请求的相应数据。下面是示例代码:

dojo.require("dojo.data.ItemFileWriteStore");
(function(){
	// some sample data
	// global var "data"
	data = {
		identifier: 'id',
		label: 'id',
		items: []
	};
	data_list = [
		{ col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false },
		{ col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false },
		{ col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true },
		{ col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true },
		{ col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true },
		{ col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true },
		{ col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false }
	];
	var rows = 100;
	for(var i=0, l=data_list.length; i

之后声明一个structure,其实就是知道数据的显示格式。下面是示例代码:

var layout = [[
	new dojox.grid.cells.RowIndex({ width: 5 }),
	{name: 'Column 1', field: 'col1'},
	{name: 'Column 2', field: 'col2'},
	{name: 'Column 3', field: 'col3'},
	{name: 'Column 4', field: 'col4', width: "150px"},
	{name: 'Column 5', field: 'col5'}
	],[
	{name: 'Column 6', field: 'col6', colSpan: 2},
	{name: 'Column 7', field: 'col7'},
	{name: 'Column 8'},
	{name: 'Column 9', field: 'col3', colSpan: 2}
]];

到这里准备工作基本上就做完了。其实这些数据在实际应用中完全可以再服务器端直接生成后返回,本例只用作介绍,故写了出来。
下面就是使用了,首先引入需要的js和css:
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
js脚本注意使用parseOnLoad: true,这样dojo才能在加载时候将声明式的标签转换为最终显示元素。

@import "../resources/Grid.css";
@import "../resources/tundraGrid.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";

注意相对路径,也可以使用自定义的样式,当然,要对生成的标签中所使用的Class名十分熟悉。

<div jsId="grid" id="grid" dojoType="dojox.grid.DataGrid" store="test_store" query="{ id: '*' }" structure="layout" rowSelector="20px"></div>

最后就是使用了,在body里面加入一个div,dojoType="dojox.grid.DataGrid",stort、structure分别为上面准备的数据。保存页面,加载后即可看到最基础的dojox.grid.DataGrid。

第二种

这种方式比较适合全ajax的加载,这种情况就不能使用parseOnLoad: true来使标签在加载时被解析了,所以,我们可以使用new的方式新建widget对象,即dojox.grid.DataGrid。

具体数据还使用上面声明的,使用格式如下:

var grid = new dojox.grid.DataGrid({store:test_store,structure:layout},"grid1");
grid.startup();

这样,就简单的以编程的方式将new出来的widget放到id为grid1的html元素中了,与声明式不同的是,这里的grid1可以是在new dojox.grid.DataGrid之前动态创建的,而不是必须在页面中添加的html元素。

其实dojo的DataGrid是很强大的,很多可扩展功能,在这里仅仅为了介绍其使用方法,因为网上铺天盖地的文章都是声明式的,我之前在使用到编程式引入的时候走了很多弯路,最后才发现最基础的DataGrid根本不需要那么多东西,所以分享出来给和我一样新接触dojo的朋友一个参考。当然了,dojo的DataGrid还有更多其它类型的扩展,大家可以花费点时间看一下官网的例子,具体的扩展功能小子还在学习中,就不写出来了。大家有兴趣可以自己去研究一下。2013年第一篇文章,没什么写的,就随便整理了这篇算是学习笔记的文字了,新手入门,大家勿见笑。

两种方式使用Dojox.grid.DataGrid
文章《两种方式使用Dojox.grid.DataGrid》二维码
  • 微信打赏
  • 支付宝打赏