bootstrap-table 显示列下拉框中全选功能实现

发布于 2022-09-11 16:16:40 字数 248 浏览 31 评论 0

求助:bootstrap-table 列表可显示字段的下拉框中全选功能如何实现?

clipboard.png

需要实现全选的功能,如图

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不打扰别人 2022-09-18 16:16:40

给自己填坑吧……
解决方案:
1,列参数配置上添加“全选”

columns: [
        {
            title: '全选',
            field: '',
            visible: false,
        },
        ……
    ]

2.bootstrap-table渲染

$("#tb_transitList").bootstrapTable(newOption);

3.添加点击事件

var checkOne = $(".dropdown-menu li input");
var checkAll = checkOne.eq(0);
checkAll.off('click').on('click', function () {
    var flag = checkAll.prop("checked");
    checkOne.each(function(i){
        if (i>0){
            var $this = $(this);
            if (flag) {
                if (!$this.prop('checked')) {
                    $this.click();
                }
            } else {
                if ($this.prop('checked')) {
                    $this.click();
                }
            }
        }
    });
});
checkOne.on('click', function () {
    var len = checkOne.length;
    var _l = 0;
    checkOne.each(function(i){
        if (i>0){
            if ($(this).prop('checked')) {
                _l++;
            }
        }
    });
    if (_l === len-1){
        checkAll.prop("checked", true)
    } else {
        checkAll.prop("checked", false)
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文