bootstrap-tables翻页选中

bootstrap-tables翻页选中

翻页选中问题!  直接复制就可以,代码多 但是不用你改 也不用你懂!需要懂的都已经有注释了!!  

直接复制就可以! 直接复制就可以! 直接复制就可以!重要事说三遍!!!!!

记录一次bootstrap-tables翻页后不影响选中的方法,看了好多文章,都有小问题,必须全选出问题或者 选不中等等

直接上代码(直接照着搬过去就可以! ):

<script type="text/javascript">
    var selectionIds = [];
    #这块是你要初始化选中的的内容 例如:20,30,15,10
    $.each("{{$aa}}>".split(','),function(k,v){
        selectionIds.push(v);
    })
    $(document).ready(function(){
        var tables = $('#tables');
        tables.bootstrapTable({
            search: true,
            pagination: true,
            pageSize: 25,
            pageList: [15, 25, 35],
            showColumns: true,
            showRefresh: true,
            //showToggle: true,
            locale: "zh-CN",
            clickToSelect:true,
            striped: true,
            url:"aaa.php",
            method:"post",
            columns: [
                {
                    field:"state",
                    checkbox: true,
                    formatter: function (i,row) {
                        if($.inArray(row.user_id,Array.from(selectionIds))!=-1){    // 因为 Set是集合,需要先转换成数组
                            return {
                                checked : true               // 存在则选中
                            }
                        }
                    }
                },
                {
                    field: 'id',//域值
                    title: 'ID',//标题
                    visible: true,//false表示不显示
                    sortable: true,//启用排序
                    align: 'center',
                },
                {
                    field: 'name',//域值
                    title: '姓名',//标题
                    visible: true,//false表示不显示
                    sortable: true,//启用排序
                    align: 'center',
                },

            ],

        });


        //选中事件操作数组
        var union = function(array,ids){
            $.each(ids, function (i, id) {
                if($.inArray(id,array)==-1){
                    array[array.length] = id;
                }
            });
            return array;
        };
        //取消选中事件操作数组
        var difference = function(array,ids){
            $.each(ids, function (i, id) {
                var index = $.inArray(id,array);
                if(index!=-1){
                    array.splice(index, 1);
                }
            });
            return array;
        };
        var _ = {"union":union,"difference":difference};
        tables.on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
            var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
                return row.user_id;
            });
            func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
            selectionIds = _[func](selectionIds, ids);
        });
        $("form").submit(function(e){
            console.log(selectionIds);//form提交时候打印所有选中项 这是一个数组
            //下边开始转换成字符串 剩下怎么改 自己发挥吧~~~
            var user_str = '';
            $.each(selectionIds,function(k,v){
                user_str+=v+',';
            })
            $("#user_str").val(user_str);
        });

       
    });
</script>

试试吧!如果有问题欢迎留言o~   

bootstrap-tables翻页选中

喜欢(0)

评论 抢沙发

表情