美文网首页
Layui table中筛选列增加 [全选,反选] 功能【转】

Layui table中筛选列增加 [全选,反选] 功能【转】

作者: zlchen | 来源:发表于2021-02-25 10:26 被阅读0次
    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');
    });
    

    原文链接:https://blog.csdn.net/qq_33966519/article/details/103617778

    相关文章

      网友评论

          本文标题:Layui table中筛选列增加 [全选,反选] 功能【转】

          本文链接:https://www.haomeiwen.com/subject/khpyfltx.html