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("请求异常");
}
});
bootstrap table记录一下的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- 后台系统组件:一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- .Net MVC+bootstrap Table学习
一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
随机推荐
- windows+R键的应用
windows+R:然后输入以下几个命令 1.cmd :用于Windows命令行操作,比如:ping某个网络,看看是不是通的,或者directory等等Windows命令行操作 2.远程桌面连接:ms ...
- Netty 框架学习 —— 引导
概述 前面我们学习了 ChannelPipeline.ChannelHandler 和 EventLoop 之后,接下来的问题是:如何将它们组织起来,成为一个可实际运行的应用程序呢?答案是使用引导(B ...
- RESTful API实践总结
REST架构 你是如何理解上网这件事的? 打开浏览器,输入网址,展现在你面前的就是一个网站了. 你可以在网站里看视频.看博客.写文章.听音乐. 但凡写过点代码的人都知道,我们平时访问的网站,其实是HT ...
- 远程代码执行MS08-067漏洞复现失败过程
远程代码执行MS08-067漏洞复现失败过程 漏洞描述: 如果用户在受影响的系统上收到特制的 RPC 请求,则该漏洞可能允许远程执行代码. 在微软服务器系统上,攻击者可能未经身份验证即可利用此漏洞运行 ...
- 怎样用好PS中的钢笔工具(附练习钢笔工具网站)
想要在PS中得心应手的的描绘出自己想要的线条(也就是路径),就需要对[钢笔工具]有一个充分的理解. [钢笔工具]绘出来的线条全部都是贝赛尔曲线,所以你在学习[钢笔工具]之前,要补习一下贝赛尔曲线的常识 ...
- Springboot整合shardingsphere和druid进行读写分离
最近在使用springboot整合shardingsphere和druid实现mysql数据库读写分离时遇到了一些问题,特此记录一下. 依赖版本 Springboot 2.1.6.RElEASE sh ...
- java设计模式(9):模板方法模式(TemplateMethod)
一,定义:模板方法模式定义了一个操作中的算法骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 二,类图: 三,通过小例子讲解: 这个模式一般用在 ...
- mysql中的条件语句case when/if函数
主要知识点为case函数,if函数,ifnull函数,elt函数几部分,主要用于mysql语句中的逻辑判断 待操作的表如下: p.p1 { margin: 0; font: 16px Menlo; c ...
- Spring中如何使用自定义注解搭配@Import引入内外部配置并完成某一功能的启用
文章背景 有一个封装 RocketMq 的 client 的需求,用来提供给各项目收.发消息,但是项目当中常常只使用收或者发消息的单一功能,而且不同的项目 group 等并不相同而且不会变化,可以在项 ...
- CTF反序列化逃逸
刷了一下CTF反序列化的题,去年没有好好了解.又补了一次PHP,害太菜了.每天看看别人的博客真的可以鼓舞人.简单记录一下两道字符串逃逸问题 推荐一个反序列化总结的很好的笔记https://www.cn ...