我们用到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.这是我项目的实现效果图
删除效果图
更新效果图
新增效果图