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.这是我项目的实现效果图

删除效果图

更新效果图

新增效果图

 

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

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值