[模板]为dgrid表格中的cell添加可编辑复制属性（自用）

最新推荐文章于 2019-05-01 18:02:46 发布

原创最新推荐文章于 2019-05-01 18:02:46 发布 · 847 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#dgrid添加可编辑复制属性

Dojo 专栏收录该内容

7 篇文章

订阅专栏

本文档介绍了如何在dgrid表格中添加可编辑和复制单元格的特性。通过修改html和js文件，实现了对表格数据的交互操作，并提供了示例图展示效果。

html文件

<div>
	<div data-dojo-attach-point="grid"></div>
</div>

js文件

define([
	"dojo/_base/declare",
	"dojo/store/Memory",
	"dojo/store/Observable",
	"dojo/dom-construct",
	
	"dgrid/editor",//引入这个插件
	"dgrid/Keyboard",
	"dgrid/OnDemandGrid",
	"dgrid/Selection",
	"dgrid/selector",
	"dgrid/extensions/Pagination",
	"dgrid/extensions/ColumnResizer",

	"dijit/_TemplatedMixin",
	"dijit/_WidgetBase",
	"dijit/_WidgetsInTemplateMixin",

	"dojo/text!html文件路径/为dgrid表格中的cell添加可编辑复制属性.html"
	"dojo/domReady!"
], function(declare, Memory, Observable, domConstruct,
	editor, Keyboard, OnDemandGrid, Selection, selector, Pagination, ColumnResizer,
	_TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, template) {

	return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
		templateString: template,

		data: [{
			_index: 1,
			userName: "haha"
		}, {
			_index: 2,
			userName: "chanhaha"
		}],

		constructor: function() {
			this.inherited(arguments);
		},

		postCreate: function() {
			this.inherited(arguments);
			this.main();
		},

		main: function() {
			this._setGrid(this.data);
		},

		_setGrid: function(data) {
			var layout = {
				col1 : selector({resizable: false, width: 40}),
				name : editor({label: "用户名", width:55, resizable: false}, "text", "click"),//editor这个插件可以允许对cell进行编辑。
				selfLabel : {label: "自定义标签", 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,
				allowTextSelection: true,//Selection插件中的allowTextSelection属性默认为false，设置为true，可以允许对表格文本进行复制。
				style: "",
				selectionMode: "toggle",
				pagingLinks: 2,
				rowsPerPage: 10,
				pagingTextBox: true,
				firstLastArrows: true,
				loadingMessage: "数据加载中...",
				noDataMessage: "暂无数据。"
			}, this.grid);
			this._grid.startup();
		}

	});

});