解决bootstrap-table固定列checkbox选中没效果问题

bootstrap-table固定列实际上是在远table上多固定一层,所以点击固定列的checkbox并不会选中对应的列,
下边图片中红框中是固定列的div。
解决bootstrap-table固定列checkbox选中没效果问题_第1张图片
解决步骤:
1、最上层的固定列的checkbox绑定事件,使得点击checkbox会触发选中对应下一层checkbox
2、在option的onLoadSuccess配置这个方法。

//重新注册固定列的checkbox,$element是下层table的jq对象
    function registCheckbox($element) {
        var options = $element.bootstrapTable('getOptions')
        if (!options.singleSelect) {
            //全选
            $('.fixed-table-header-columns').on('click', 'input[name="btSelectAll"]', function () {
                if ($(this).is(':checked')) {
                    $('input[name="btSelectItem"]').prop('checked', true);
                } else {
                    $('input[name="btSelectItem"]').prop('checked', false);
                }
                $('.fixed-table-header').find('input[name="btSelectAll"]').click();
            });

        }

        $('.fixed-table-container').on('click', 'input[name="btSelectItem"]', function () {
            var inputs = $(this).parents('.fixed-table-body-columns').find('input[name="btSelectItem"]');

            //true为单选   false为多选
            if (options.singleSelect) {
                var checked = $(this).is(":checked");//记录点击的状态
                inputs.each(function () {
                    if ($(this).is(':checked')) {
                        $(this).prop('checked', false);//将之前的全部取消
                    }
                });
                $(this).prop('checked', checked);
            } else {
                var num = 0;
                inputs.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == inputs.length) {
                    $('input[name="btSelectAll"]').prop('checked', true);
                } else {
                    $('input[name="btSelectAll"]').prop('checked', false);
                }
            }
            var index = $(this).parents('tr').index();
            $element.find('input[name="btSelectItem"]').eq(index).click();
        });

    }

var option = {
	//此处省略很多其他配置........
	onLoadSuccess: function () {
                    registCheckbox($('#bootstrap-table'))
                }
}

你可能感兴趣的:(前端)