layui table实现shift多选
时间: 2023-08-08 21:10:17 浏览: 163
要实现 shift 多选,需要监听鼠标按下和抬起事件,以及键盘按下和抬起事件。
首先,给每个需要选择的行添加一个 `data-index` 属性,表示该行的索引。
然后,在鼠标按下事件中记录下当前选中的行的索引(如果没有选中,则记录当前点击的行的索引),在鼠标抬起事件中记录结束选中的行的索引,计算出这两个行的之间的行,并将它们选中。
在键盘按下事件中,如果按下的是 shift 键,记录下当前选中的行的索引(如果没有选中,则记录当前焦点所在的行的索引),在键盘抬起事件中记录结束选中的行的索引,计算出这两个行的之间的行,并将它们选中。
以下是示例代码:
```javascript
// 监听鼠标按下事件
table.on('checkboxMouseDown', function(obj){
var index = obj.tr.data('index');
if (!table.config.checkStatus.isAll) {
table.checkStatus(obj.config.index).data.forEach(function(data){
if (data.index === index) {
data.mousedown = true;
} else {
data.mousedown = false;
}
});
} else {
table.checkStatus(obj.config.index).data.forEach(function(data){
data.mousedown = false;
});
}
});
// 监听鼠标抬起事件
table.on('checkboxMouseUp', function(obj){
var index = obj.tr.data('index');
var checked = false;
table.checkStatus(obj.config.index).data.forEach(function(data){
if (data.index === index) {
checked = true;
} else if (data.mousedown) {
data.checked = true;
} else if (data.checked) {
data.checked = false;
}
});
if (checked) {
table.checkStatus(obj.config.index).push(obj.data);
} else {
table.checkStatus(obj.config.index).remove(obj.data);
}
});
// 监听键盘按下事件
table.on('checkboxKeyDown', function(obj){
if (obj.event.keyCode === 16) {
var index = obj.tr.data('index');
if (!table.config.checkStatus.isAll) {
table.checkStatus(obj.config.index).data.forEach(function(data){
if (data.index === index) {
data.keydown = true;
} else {
data.keydown = false;
}
});
} else {
table.checkStatus(obj.config.index).data.forEach(function(data){
data.keydown = false;
});
}
}
});
// 监听键盘抬起事件
table.on('checkboxKeyUp', function(obj){
if (obj.event.keyCode === 16) {
var index = obj.tr.data('index');
var checked = false;
table.checkStatus(obj.config.index).data.forEach(function(data){
if (data.index === index) {
checked = true;
} else if (data.keydown) {
data.checked = true;
} else if (data.checked) {
data.checked = false;
}
});
if (checked) {
table.checkStatus(obj.config.index).push(obj.data);
} else {
table.checkStatus(obj.config.index).remove(obj.data);
}
}
});
```
阅读全文