handsontable修改表格数据与数据库同步操作

我们用到handsontable插件时，

有时候需求是：在页面表格多行改动时，与数据库数据同步更新。

 

以下教程包括：表格同步数据库新增，表格同步数据库修改，表格同步数据库删除。

 

 

1.首先在你创建new Handsontable实例里面加入 ‘contextMenu’属性（右键弹出菜单）

contextMenu属性部分代码，这里主要功能（删除，新增）

contextMenu: {
		callback: function(key, selection, clickEvent) {
			// 所有选项的通用回调
			//console.log(key, selection, clickEvent);
		},
		items: {
			"copy": {
				name: '复制'
			},
			"remove_row": {
				name: '删除此行'
			},
			"row_below": {
				name: '新增记录',
				disabled: function() { // “禁用”可以是布尔值，也可以是函数
					// 当单击第一行时禁用选项
					return this.getSelectedLast()[0] === 0; // `this` === hot3
				}
			},
			"colors": { // 自定义选项
				name: 'Colors...',
				submenu: {
					// 带有项目子菜单的自定义选项
					items: [{
							// 键的形式必须是“parent_key:child_key”
							key: 'colors:red',
							name: 'Red',
							callback: function(key, selection, clickEvent) {
								setTimeout(function() {
									alert('You clicked red!');
								}, 0);
							}
						},
						{
							key: 'colors:green',
							name: 'Green'
						},
						{
							key: 'colors:blue',
							name: 'Blue'
						}
					]
				}
			}
		}
	}

这是加入 ‘contextMenu’属性后的效果图

 

2.现在我们静态的效果有了，接下来就是加入对应的事件（删除单元行数据事件，新增事件，单元格修改事件）

【1】这是单元行数据删除事件，当你在浏览器上删除handsontable表格的一行则会触发此事件（支持多行删除）

具体操作见下面注释

beforeRemoveRow: function(index, amount) {
	if(!confirm("确定要删除选中行吗？"))
		return false;
    /* 这里获取到删除的行号
    *  如果是多行的话：从 index 开始，共计 amout 行。
    *  单行则取 index
    */
    
    //通过data[index]可以获取行数据
    console.info(JSON.stringify(data[index]))
    //现在既然获取到了数据，你就可以从数据中找到你要根据的值id来删除此行了
    //ajax传到后台执行删除
},

【2】这是单元行数据新增事件，当你在浏览器上右键新增handsontable表格的一行则会触发此事件

做新增时，你可以通过hot.getDataAtRow(行号); 方法获取新增行的数据来进行新增操作

afterCreateRow: function(index,amount,source){
		console.info(index)
		console.info(amount)
		console.info(source)
	},

【3】下面是表格更新触发的方法（支持多行更新）

更新很简单，通过改动行号 获取 改动的行数据，然后ajax传到后台执行更新操作

afterChange: function(changes, source) {
		if(changes != null) {
			var index = changes[0][0]; //行号码
			var rowdata = hot.getDataAtRow(index);
			console.info(rowdata);
		}
	}

 

 

3.这是我项目的实现效果图

删除效果图

更新效果图

新增效果图

 

如果帮助到了你，顺手点个赞吧