Layui中如何在table中筛选列增加 [全选,反选] 功能

直接在JS中引用以下代码:

table.on('toolbar()', function (obj) {
var config = obj.config;
var btnElem = $(this);
var tableId = config.id;
var tableView = config.elem.next();
switch (obj.event) {
    case 'LAYTABLE_COLS':
    // 给筛选列添加全选还有反选的功能
    var panelElem = btnElem.find('.layui-table-tool-panel');
    var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
    var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
    $('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
        '<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
        + ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
        '<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
        .insertBefore(panelElem.find('li').first())
        .on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
        layui.stope(event);
        // 反选逻辑
        panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
        });
    form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
    break;
}
});

// 监听筛选列panel中的全选
form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
$(obj.elem).closest('ul')
    .find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
});

// 监听筛选列panel中的单个记录的change
$(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
var elemCurr = $(this);
// 筛选列单个点击的时候同步全选的状态
$('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
    .prop('checked',
    elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
});
发布了27 篇原创文章 · 获赞 7 · 访问量 3533

猜你喜欢

转载自blog.csdn.net/qq_33966519/article/details/103617778
今日推荐