layui table的id为holterList,现在要实现以下功能,通过行单击或者checkbox选中,为该行增加行选中样式selected,去勾选或者再次单击则移除该行选中的样式,同时支持shift多选,选中同样给这些选中的行增加样式selected,代码该如何实现
时间: 2024-03-31 16:33:51 浏览: 57
您好,根据您的需求,您可以通过以下代码实现:
```javascript
// 获取表格对象
var table = layui.table;
// 监听表格行单击事件
table.on('row(holterList)', function(obj){
// 判断该行是否已选中
if(obj.tr.hasClass('selected')){
// 移除行选中样式
obj.tr.removeClass('selected');
}else{
// 增加行选中样式
obj.tr.addClass('selected');
}
// 阻止事件冒泡
layui.stope(event);
});
// 监听表格复选框选择事件
table.on('checkbox(holterList)', function(obj){
// 获取选中的行
var checkStatus = table.checkStatus('holterList');
var checkedRows = checkStatus.data;
// 循环选中的行,增加行选中样式
layui.each(checkedRows, function(index, row){
var tr = obj.tr.parent().parent().find('tr[data-index="'+ row.LAY_TABLE_INDEX +'"]');
tr.addClass('selected');
});
});
// 监听表格复选框取消选择事件
table.on('checkbox(holterList)', function(obj){
// 获取未选中的行
var uncheckStatus = table.checkStatus('holterList', true);
var uncheckedRows = uncheckStatus.data;
// 循环未选中的行,移除行选中样式
layui.each(uncheckedRows, function(index, row){
var tr = obj.tr.parent().parent().find('tr[data-index="'+ row.LAY_TABLE_INDEX +'"]');
tr.removeClass('selected');
});
});
// 监听表格shift多选事件
var lastSelectedIndex = -1; // 上一次选中的行索引
table.on('checkbox(holterList)', function(obj){
// 获取选中的行
var checkStatus = table.checkStatus('holterList');
var checkedRows = checkStatus.data;
// 判断是否按下shift键且选中的行个数大于1
if(event.shiftKey && checkedRows.length > 1){
// 获取当前选中行的索引
var currentIndex = obj.tr.attr('data-index');
// 判断是否存在上一次选中的行
if(lastSelectedIndex !== -1){
// 获取上一次选中的行与当前选中的行之间的行
var start = Math.min(lastSelectedIndex, currentIndex);
var end = Math.max(lastSelectedIndex, currentIndex);
var rows = table.cache.holterList.slice(start, end+1);
// 循环这些行,增加行选中样式
layui.each(rows, function(index, row){
var tr = obj.tr.parent().parent().find('tr[data-index="'+ row.LAY_TABLE_INDEX +'"]');
tr.addClass('selected');
});
}
// 更新上一次选中的行索引
lastSelectedIndex = currentIndex;
}else{
// 如果未按下shift键或选中的行个数小于等于1,则重置上一次选中的行索引
lastSelectedIndex = -1;
}
});
```
上述代码中,`holterList` 是表格的 id,您需要将其替换为您实际的表格 id。同时,您需要将上述代码放在 layui.use 的回调函数中,确保 layui 已经完全加载。
另外,为了实现 shift 多选,我们需要记录上一次选中的行索引,因此在代码中定义了一个变量 `lastSelectedIndex`,用于保存上一次选中的行索引。
阅读全文