`

dojo dgrid demo

 
阅读更多 

<!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 loading over lay
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics