朴人博客

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年第一篇文章，没什么写的，就随便整理了这篇算是学习笔记的文字了，新手入门，大家勿见笑。

• 固定链接：https://www.poorren.com/two-mode-get-dojo-datagrid
• 文章标签：2013，DataGrid，dojo，dojox，widget
• 扫二维码：两种方式使用Dojox.grid.DataGrid
• 版权所有：除"转载分享"分类外，未经注明，均为原创、整理，转载请注明出处。