码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap table 跨页全选

时间:2018-04-17 11:56:50      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:ons   enc   表格   cancel   val   win   too   paginati   数组   

此代码是针对于bootstrap table中分页的跨页全选。

  以下是整个bootstrap的定义

  

       <script type="text/javascript" src="http://cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>//一定要引用这个js不然文档加载函数中的的_[func]不会生效
     $table.bootstrapTable({ method:
get, url: queryUrl, toolbar: #toolbaruser, //工具按钮用哪个容器 height: $(window).height() - 220, striped: false, //是否显示行间隔色 pagination: true, singleSelect: false, //是否多选 pageSize: 10, pageNumber: 1, showRefresh: true, pageList: [10], search: false, //不显示 搜索框 // showColumns: true, //不显示下拉框(选择显示的列) sidePagination: "server", //服务端请求 queryParams: queryParams, showToggle: true, clickToSelect: true, responseHandler: responseHandler, //这里是引用的下面的responseHandler方法
// showExport: true, // exportDataType: "basic", minimunCountColumns: 2, columns: [{ field: state, checkbox: true }, { //field: ‘Number‘,//可不加 title: 序号, //标题 可不加  formatter: function (value, row, index) { return index + 1; } } , { title: 流水号, field: Id, sortable: true }, { field: UserName, title: 用户名, sortable: true }, { field: Number, title: 工号/学号, sortable: true }, { field: CreateName, title: 创建人, sortable: true }, { field: CreateTime, title: 创建时间, sortable: true }, { field: State, title: 状态, sortable: true, formatter: function (value, row) { return stateFormatter(value, row); } } ], onLoadSuccess: function () { }, onLoadError: function () { mif.showErrorMessageBox("数据加载失败!"); } });

 

  在文档就绪函数中添加如下代码:

            $(function () {
      
                $table.on(check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table, function (e, rows) {
                    var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
                        debugger
                        return row.Id; //注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等
                    });
                    debugger
                    func = $.inArray(e.type, [check, check-all]) > -1 ? union : difference;
                    selectionIds = _[func](selectionIds, ids);

                });
            });

  添加responseHandler方法

    此方法在bootstrap table中有定义,一定要加上

            function responseHandler(res) {
                debugger
                $.each(res.rows, function (i, row) {

                    //注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等
                    row.state = $.inArray(row.Id, selectionIds) !== -1;
                });
                return res;
            }

  下面是全选按钮以及取消全选的click事件:

    click事件的目的是获取bootstrap table中的所有数据的id

        function checkall() {
            $.ajax({
                //async: false,
                type: "POST",
                data: {
                    State: $("#organization").val(),
                    OrgCode: $("#userrole").val(),
                    RoleCode: $("#name").val(),
                    UserName: $("#number").val()
                },
                url: GetAll,
                dataType: text,
                success: function (data) {

                    console.log(data)
                    selectionIds.splice(0, selectionIds.length); //清空selectionIds数组
                    var arr = data.split(,);
                    console.log(arr);
                    for (var i = 0; i < arr.length; i++) {
                        selectionIds.push(parseInt(arr[i]));
                    }
                    console.log(selectionIds)
                    query();   //query方法的目的主要是刷新表格
                }
            });
        }

  function cancel() {

    selectionIds.splice(0, selectionIds.length); //
    console.log(selectionIds)
    query();
  }

 
       function query() {
            $table.bootstrapTable(refresh);
        }

  以上就是bootstraptable的跨页全选,代码没贴完,但是认真读了,是没有问题的。
  eg:此博客是本人原创,转载请注明出处。

Bootstrap table 跨页全选

标签:ons   enc   表格   cancel   val   win   too   paginati   数组   

原文地址:https://www.cnblogs.com/liubaojing/p/8862099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!