bootstrap table记录一下

$(function() {
        // 刷新 talbe
        function refresh() {
            $("#table").bootstrapTable('refresh');
        }

        $(function() {
            //初始化表格
            var oTable = new TableInit();
            oTable.Init();
            
            
            $("#btn_sus").click(function() {
                var opts = $('#table').bootstrapTable('getSelections'); // 获取table中选中的列
                console.log(opts);
                if (opts == "") {
                    toastr.warning("请选择要删除的数据");
                } else {
                    
                    $("#delcfmMsg").text("您确定要启用多个用户吗?");
                    $("#delcfmModel").modal();

                }
            });
            $("#btn_del").click(function() {
                var opts = $('#table').bootstrapTable('getSelections');
                console.log(opts);
                if (opts == "") {
                    toastr.warning("请选择要删除的数据");
                } else {
                    $("#delcfmMsg").text("您确定要禁用多个用户吗?");
                    $("#delcfmModel").modal();
                }
            })
            // 更新用户状态 为页面确定取消click事件执行次方法
            $("#confirm").click(function() {
                // 执行逻辑
            })
        });



        function TableInit() {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function() {
                $('#table').bootstrapTable({
                    url: ‘www.baidu.com', //请求后台的URL(*)
                    method: 'get', //请求方式(*)
                    striped: true, //是否显示行间隔色
                    cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    pagination: true, //是否显示分页(*)
                    sortOrder: "asc", //排序方式
                    queryParamsType: '',
                    search: true,
                    contentType: "application/x-www-form-urlencoded",
                    dataType: 'json',
                    paginationShowPageGo: true,
                    toolbar: '#toolbar',
                    showJumpto: true,
                    pageNumber: 1, //初始化加载第一页,默认第一页
                    queryParams: queryParams, //请求服务器时所传的参数
                    sidePagination: 'server', //指定服务器端分页
                    pageSize: 10, //单页记录数
                    pageList: [10, 20, 30, 40], //分页步进值
                    search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                    silent: true,
                    showRefresh: true, //是否显示刷新按钮
                    showToggle: false,
                    minimumCountColumns: 2, //最少允许的列数
                    uniqueId: "id", //每一行的唯一标识,一般为主键列
                    columns: [{
                            checkbox: true
                        }, {
                            field: 'realName',
                            title: '列',
                            align: 'center',
                            valign: 'middle',
                        } ,{
                            field: 'telephone',
                            title: '列',
                            align: 'center',
                            valign: 'middle',
                        },
                    ],
                    responseHandler: function(res) { //后台返回的结果
                        var data = {
                            total: res.data.total,//服务器分页必须传 总数量
                            rows: res.data.list // 数据集合
                        };
                        // 这里使用的是服务器分页
                        return data;
                    },
                });

            };

            // 得到查询的参数 刷新table 就可以执行查询 如果需要其他参数 添加到temp即可 params.pageNumber 数table的 page 和limit是后台自定的分页参数名字
            function queryParams(params) {
                var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                    page: params.pageNumber,
                    limit: params.pageSize
                };
                return temp;
            }
            return oTableInit;
        };

 

// 配置弹出框参数 jquery 弹框需要先引入jquery
        toastr.options = {
            positionClass: "toast-top-center",
            autoDismiss: true,
      }
// 例如
<script src="../js/jQuery-2.2.0.min.js"></script>
<script src="../js/toastr.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">



// 参数配置参考
https://www.cnblogs.com/webcyh/p/11348721.html
// 所有ajax请求之前设置一个header信息,获取其他处理
$.ajaxSetup({
  beforeSend: function(XMLHttpRequest) {
  	XMLHttpRequest.setRequestHeader("msg", "msg")
  },
    complete: function () {
         //ajax请求完成,不管成功失败
     },
     error: function () {
        //ajax请求失败
		toastr.error("请求异常");
    }
});

  

posted @ 2020-06-07 22:31  天葬  阅读(183)  评论(0编辑  收藏  举报