shift选择多条table数据,layui怎么实现,有具体代码吗
时间: 2024-03-20 08:43:45 浏览: 76
在layui中,你可以使用table模块提供的工具栏来实现shift选择多条数据。具体实现如下:
1. 在table的配置中添加toolbar属性,并定义工具栏的HTML元素,如下所示:
```javascript
table.render({
// ...其他配置
toolbar: '<div class="layui-table-toolbar">' +
'<div class="layui-table-toolbar-left">' +
'<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</button>' +
'</div>' +
'<div class="layui-table-toolbar-right">' +
'<div class="layui-btn-group">' +
'<button class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-prev" lay-event="prev"></button>' +
'<button class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-next" lay-event="next"></button>' +
'</div>' +
'</div>' +
'</div>',
});
```
2. 在工具栏中添加一个checkbox元素,用于shift选择多条数据:
```javascript
'<div class="layui-table-toolbar-left">' +
'<input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose">' +
'<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</button>' +
'</div>'
```
3. 在工具栏的渲染完成事件中,为checkbox元素添加事件监听器,实现shift选择多条数据:
```javascript
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'delete':
// ...删除操作
break;
case 'prev':
// ...上一页操作
break;
case 'next':
// ...下一页操作
break;
}
// shift选择多条数据
if (obj.event === 'LAYTABLE_ALLChoose') {
var $checkbox = $('.layui-table-header th[data-field="0"] input[type="checkbox"]');
$checkbox.on('change', function() {
var checked = $(this).prop('checked');
var $tbodyCheckbox = $('.layui-table-body tbody input[type="checkbox"]');
var index = $checkbox.index(this);
var len = $tbodyCheckbox.length;
var start = index;
var end;
if (start === 0) {
end = $tbodyCheckbox.index($tbodyCheckbox.filter(':checked').eq(-1));
} else {
var checkedIndex = $tbodyCheckbox.index($tbodyCheckbox.filter(':checked').eq(-1));
end = checkedIndex === -1 ? start : (checkedIndex < start ? start : checkedIndex);
}
for (var i = start; i <= end; i++) {
$tbodyCheckbox.eq(i).prop('checked', checked).next().toggleClass('layui-form-checked', checked);
}
});
}
});
```
以上代码示例是一个完整的table渲染配置,你可以根据你自己的实际需求进行修改。
阅读全文