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("请求异常"); } });
哇!又赚了一天人民币