一个简单的dgrid表格

最新推荐文章于 2024-05-10 09:40:49 发布

海宏_

最新推荐文章于 2024-05-10 09:40:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Dojo 文章标签： dgrid表格模板

本文链接：https://blog.youkuaiyun.com/chanhaha/article/details/40348389

Dojo 专栏收录该内容

7 篇文章

订阅专栏

本文档提供了一个简单的dgrid表格示例，适用于快速搭建表格布局。适合需要频繁使用dgrid表格的开发者，方便复制粘贴使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为经常需要经常使用到dgrid表格，所以抽出来方便以后直接复制粘贴用。

define([
    "dojo/dom",
	"dojo/_base/declare",
	"dojo/store/Memory",
	"dojo/store/Observable",
	
	"dgrid/Keyboard",
	"dgrid/OnDemandGrid",
	"dgrid/Selection",
	"dgrid/selector",
	"dgrid/extensions/Pagination", 
	"dgrid/extensions/ColumnResizer",
	"dijit/form/Button"

    "dojo/domReady!"
], function(dom, declare, Memory, Observable,
		Keyboard, OnDemandGrid, Selection, selector, Pagination, ColumnResizer, Button) {
	var data = [{_index: 1, userName: "haha"}, {_index: 2, userName: "chanhaha"}];
	var obj = {
		init: function() {
			obj._setGrid(data);
		},
		_setGrid : function(data) {
			var renderCell = function(object, data, cell) {
				new Button({
					label: "renderCell",
					onClick: function () {
						
					}
				}, cell.appendChild(document.createElement("div")));
			};
			var layout = {
				col1 : selector({resizable : false, width: 40}),
				name : {label: "用户名", resizable : false},
				todo : {label: "操作", renderCell: renderCell, resizable : false, width: 210}
			};
			this._store = new Memory({data : data});
			this._store = new Observable(this._store);
        	this._grid = new (declare([OnDemandGrid, Selection, Keyboard, Pagination, ColumnResizer]))({
				columns : layout,
				store : this._store,
				allowSelectAll: true,
				style : "",
				selectionMode : "toggle",
				pagingLinks : 2,
				rowsPerPage : 4,
				pagingTextBox : true,
				firstLastArrows : true,
				loadingMessage : "数据加载中...",
				noDataMessage : "暂无数据。"
    		}, dom.byId("zhengzeGrid"));
        	this._grid.startup();
		}
	};
	
	return obj;
});