dojo dgrid demo

jiangtie

浏览: 212534 次
性别:
来自: 深圳

最近访客更多访客>>

jx1031

zishan

jk_zero

qsjiangs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前台开发


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tutorial: Hello dgrid!</title>
	<link rel="stylesheet" href="../dojolib/dojo/resources/dojo.css">
	<link rel="stylesheet" href="dgrid.css">
	<link rel="stylesheet" href="claro.css">
	<!-- load Dojo -->
	<script>
		var dojoConfig;
		(function(){
			var baseUrl = location.pathname.replace(/\/[^/]+$/, "/../../../../dojolib/");
			dojoConfig = {
				async: 1,
				// Load dgrid and its dependencies from a local copy.
				// If we were loading everything locally, this would not
				// be necessary, since Dojo would automatically pick up
				// dgrid, xstyle, and put-selector as siblings of the dojo folder.
				packages: [
					{ name: "dgrid", location: baseUrl + "dgrid" },
					{ name: "xstyle", location: baseUrl + "xstyle" },
					{ name: "put-selector", location: baseUrl + "put-selector" }
				]
			};
		}());
	</script>
	<script src="../dojolib/dojo/dojo.js"></script>
	<script>
		require(["dojo/_base/declare", "dgrid/Grid", "dgrid/Keyboard", "dgrid/Selection", "dojo/domReady!"],
		function(declare, Grid, Keyboard, Selection){
			var data = [
				{ first: "Bob", last: "Barker", age: 89 },
				{ first: "Vanna", last: "White", age: 55 },
				{ first: "Pat", last: "Sajak", age: 65 }
			];

			// Create a new constructor by mixing in the components
			var CustomGrid = declare([ Grid, Keyboard, Selection ]);

			// Now, create an instance of our custom grid which
			// have the features we added!
			var grid = new CustomGrid({
				columns: {
					first: "First Name",
					last: "Last Name",
					age: "Age"
				},
				selectionMode: "single", // for Selection; only select a single row at a time
				cellNavigation: false // for Keyboard; allow only row-level keyboard navigation
			}, "grid");
			grid.renderArray(data);

			grid.on("dgrid-select", function(event){
				// Report the item from the selected row to the console.
				console.log("Row selected: ", event.rows[0].data);
			});
			grid.on("dgrid-deselect", function(event){
				console.log("Row de-selected: ", event.rows[0].data);
			});
			grid.on(".dgrid-row:click", function(event){
				var row = grid.row(event);
				console.log("Row clicked:", row.data);
			});
		});
	</script>
</head>
<body class="claro">
	<div id="grid"></div>
</body>
</html>

分享到：

dojo building | dojo loading over lay

2012-11-23 18:37
浏览 1558
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dojo dgrid demo

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

dojo dgrid demo

评论

发表评论

相关推荐

js 兼容性

网站设计资源

网站推广

美工-面试技巧

JS虚拟键盘

dojo loading over lay

网页设计

Dojo study

web一次完整的的请求

最近访客更多访客>>