Bootstrap Table 的用法
记录下 Bootstrap Table 的用法，备忘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebDemo</title> <!--1. Jquery组件引用-->
<script type="text/javascript" src="../Content/jquery/jquery-3.3.1.min.js"></script> <!--2. bootstrap组件引用 -->
<script type="text/javascript" src="../Content/bootstrap/bootstrap.js"></script>
<link rel="stylesheet" href="../Content/bootstrap/bootstrap.css" /> <!--3. bootstrap table组件以及中文包的引用-->
<link rel="stylesheet" href="../Content/bootstrap/bootstrap-table.css">
<script type="text/javascript" src="../Content/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="../Content/bootstrap/bootstrap-table-zh-CN.js"></script> <!--4. layer组件的引用-->
<script type="text/javascript" src="../Content/layer/layer.js"></script> <style type="text/css">
/*bootstrap-table选中行颜色*/
.table tbody .selected td {
background-color: #EEE8AA;
}
/*表头颜色*/
/*thead
{
background-color: #333333;
color: #fdfdfd;
}*/
/*隔行变色*/
/*table tbody tr:nth-child(even)
{
background-color: #b6ff00;
}*/ /*表头固定 todo*/
</style>
</head>
<body>
<div class="panel-body">
<div id="toolbar">
<div class="btn-group" style="float:left">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除
</button>
</div>
<!--https://blog.csdn.net/yaomingyang/article/details/80346678-->
<form class="form-inline" style="float:left;margin-left:5px">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">院系</div>
<input type="text" class="form-control" name="searchTexts" id="txt_search_department" placeholder="请输入关键字...">
</div>
</div>
<button id="btn_search" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
</button>
</form>
</div> <div class="table-responsive">
<!--自适应水平滚动条-->
<table id="table"> </table>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
getStudentQueryByPage();
$("#btn_search").click(function () {
getStudentQueryByPage();
})
}
function getStudentQueryByPage() {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
method: 'post', //请求方式
contentType: "application/x-www-form-urlencoded",
url: "../Controllers/IndexController.ashx?action=getStudentQueryByPage", //要请求数据的文件路径
// height: return $(window).height(), //高度调整
// searchTimeOut: '5000',
// showHeader:true,
striped: true, //是否显示行间隔色
pageNumber: 1, //初始化加载第一页，默认第一页
pagination: true, //是否分页
sidePagination: 'server', //指定服务器端分页
pageSize: 2, //单页记录数
pageList: [2, 5, 10], //分页步进值 [10, 20, 50]
showColumns: true, //是否显示所有的列
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
sortable: 'true', //是否启用排序
sortName: 'id',
sortOrder: 'desc', //排序方式
toolbar: '#toolbar', //工具按钮用哪个容器
cache: true, //是否使用缓存，默认是true
//search: true, //搜索框
//searchOnEnterKey: true, //按回车触发搜索方法
showRefresh: true, //刷新按钮 showToggle: true, //详细视图和列表视图的切换按钮 //cardView:false,
//fixedColumns: true,
//fixedNumber:1, //固定列数
queryParamsType: 'undefined', //查询参数组织方式
queryParams: queryParams, //请求服务器时所传的参数
responseHandler: function (res) {
return res;
},
//单机和双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.RealName"中"RealName"是data-field定义的字段.
onDblClickRow: function (row, $element, field) {
layer.msg("选中行用户的真实姓名:" + row.name);
},
onClickRow: function (row, $element, field) {
//var i = $element.data("index");//可通过此参数获取当前行号
//layer.msg(i + "，" + row.name + "，" + field); var r = row[field]; //获取当前选中单元格内容
//判断当前单元格是否为空
if (r.length != 0) {
layer.msg(r);
}
},
//获取选中行的数据
//onCheck: function (row) {
// layer.msg("您选中的行的姓名为" + row.name + "，您选中的行的院系为" + row.department);
//},
singleSelect: true, //单选checkbox，只能选中一行
columns: [
{
checkbox: true
},
{
title: '编号',
align: 'center',//居中
//valign: 'bottom',
//手动实现编号 或者通过row_number实现服务器编号
formatter: function (value, row, index) {
var pageNumber = $('#table').bootstrapTable("getOptions").pageNumber;
var pageSize = $('#table').bootstrapTable("getOptions").pageSize;
return pageSize * (pageNumber - 1) + index + 1;
}
},
{
field: 'id',
title: '学号',
align: 'center',
sortable: true
},
{
field: 'name',
title: '姓名',
sortable: true,
align: 'center',
formatter: function (value, row, index) {
return "<span style='color:#FF0000'>" + value + "</span>";
//return "<img onclick=\"FindPersonMeg('" + proCode + "','" + projectName + "')\" title='点击查看责任人信息' src='/Themes/Images/16/application_form_magnify.png' style='vertical-align: middle;cursor: pointer;' alt='' />";
//return "<span style='color:#FF0000' onclick='TestLayer()'>" + value + "</span>";
}
},
{
field: 'sex',
title: '性别',
align: 'center',
sortable: true
},
{
field: 'birth',
title: '出生日期',
align: 'center',
sortable: true
},
{
field: 'department',
title: '院系',
align: 'center',
sortable: true
},
{
field: 'address',
title: '家庭地址',
align: 'center'
},
{ title: '详细信息',
align: 'center',//居中
formatter: function (value, row, index) {
// "<img title='点击查看详细信息' src='Content/favicon.ico' style='vertical-align: middle;cursor: pointer;' alt='' />"; var detail = "<button type=\"button\" onclick=\"detailMsg('" + row.id + "','"+row.name+"')\" >"
+ "<span class=\"glyphicon glyphicon-search\">查看详细信息</span> </button>";
return detail;
}
}
]
});
} function queryParams(params) {
//方式一
//params.project = $("#project").val();
//params.start = $("#start").val();
//params.end = $("#end").val();
//params.alarmType = $("#alarm-type").val();
params.txt_search_department = $("#txt_search_department").val();
return params; //方式二
//return {
// pageSize: params.limit,
// pageNumber: params.pageNumber
//}
} // 获取选中行的数据
$("#btn_edit").click(function (e) { //var allTableData = $('#table').bootstrapTable('getData');//获取表格的所有内容行 var getSelectionsRows = $('#table').bootstrapTable("getSelections"); //获取suoyou选中行的内容
var name = getSelectionsRows[0].name;
var sex = getSelectionsRows[0].sex;
var birth = getSelectionsRows[0].birth;
var department = getSelectionsRows[0].department;
var address = getSelectionsRows[0].address; if (getSelectionsRows.length == 1) {
//layer.open({
// type: 2, // iframe层
// title: '编辑',
// shadeClose: true,
// shade: 0.8,
// area: ['800px', '600px'],
// content: ['./Test3Form.aspx?Account=' + escape(Account) + "&RealName=" + escape(RealName)
// + "&Gender=" + escape(Gender) + "&Mobile=" + escape(Mobile) + "&Email=" + escape(Email)
// + "&LastVisit=" + escape(LastVisit) + "&CreateDate=" + escape(CreateDate), 'no']
//}); alert("姓名：" + name + ", 性别：" + sex + ", 院系：" + department);
} else {
alert("请只选中一行！！！");
}
}); //获取详细信息
function detailMsg(id,name) {
//var id = document.getElementById("id").value;
//var url = "/Controllers/IndexController.ashx"
//var data = "action=getDetail&name=" + name + "&id=" + id;
//$.ajax({
// type: "get",
// url: url,
// data: data,
// dataType: "text",
// success: function (msg) {
// //return msg;
// alert("姓名：" + msg);
// },
// error: function () {
// Console.log("请求失败" + data);
// },
// //beforSend: function () {
// // // 禁用按钮防止重复提交
// // $("#submit").attr({ disabled: "disabled" });
// //}
//});
alert(name);
}
</script>
</body>
</html>
如果初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。
Bootstrap Table 的用法的更多相关文章
- bootstrap table footerFormatter用法 统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- Bootstrap table的基础用法
一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 使用bootstrap table小记（表格组件）
前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...
- 表格组件神器：bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表
这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...
随机推荐
- 在pycharm中配置Anaconda以及pip源配置
在学习推荐系统.机器学习.数据挖掘时,python是非常强大的工具,也有很多很强大的模块,但是模块的安装却是一件令人头疼的事情. 现在有个工具--anaconda,他已经帮我们集成好了很多工具了!an ...
- chrome默认打开隐身模式
chrome图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动chrome了
- zoj 1655 单源最短路 改为比例+最长路
http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=655 没有理解清题意就硬套模板.所以WA了好几次. 解析看我的还有一篇http ...
- LeetCode SQL
SQL查询练习一(From LeetCode) 1 select name,population,area 2 from World 3 where area > 3000000 or popu ...
- android取高度
Rect rect = new Rect(); getWindow().getDecorView().getWindowVisibleDisplayFrame(rect); int top = r ...
- GPU学习笔记（二）
找到了一个还不错的教程http://blog.csdn.net/augusdi/article/details/12527497 今天课比较多,但是有了这个教程解决了昨天不能运行的问题.
- XML与Plist文件转换
由于工作需要,要解析xml,举一个简单的例子,例如地址,如果是plist的话我们会很好的解析,但是如果已知一个xml的话,当然用原生的xml解析也能解析的出来,但是解析xml的话会是根据标签的头来解析 ...
- c# IndexOf()用法
IndexOf()用法 查找字符串中字符或者字符串首次出现的位置,返回的是索引值; str1.indexOf('字');//查找“字”在字符串中首次出现的索引值 str1.indexOf(" ...
- HDU 4324 Triangle LOVE【拓扑排序】
题意:给出n个人,如果a喜欢b,那么b一定不喜欢a,如果b不喜欢a,那么a一定喜欢b 就是这n个点里面的任意两点都存在一条单向的边, 所以如果这n个点不能构成拓扑序列的话,就一定成环了,成环的话就一定 ...
- Centos安装masscan
1.yum install git gcc make libpcap-devel2.git clone https://github.com/robertdavidgraham/masscan3.cd ...