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引入. 然后 ...
随机推荐
- 图文介绍MyEclipse (2015) 中创建简单的Maven项目的步骤（用于生成可运行jar文件）
利用MyEclipse的引导,能够非常方便的创建简单的.用于生成可运行jar文件的Maven项目: (原创文章,转载请注明转自Clement-Xu的博客:http://blog.csdn.net/cl ...
- Android之输入内容监听回车键【Editor】
2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public b ...
- powershell输出错误信息到文件
https://stackoverflow.com/questions/8925323/redirection-of-standard-and-error-output-appending-to-th ...
- [COI2007] [luogu P1823] Patrik 音乐会的等待 解题报告 （单调栈）
题目链接:https://www.luogu.org/problemnew/show/P1823 题目: N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人. ...
- Where to Store your JWTs – Cookies vs HTML5 Web Storage--转
原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...
- Android属性动画-Interpolator和ViewPropertyAnimator的用法
Interpolator的用法 Interpolator这个东西很难进行翻译,直译过来的话是补间器的意思,它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果.那么什么叫做非线性运 ...
- 基于JavaSwing的例子-非连接数据库
项目结构: Constant.java package com.mstf.test; import java.io.Serializable; public class Constant implem ...
- 查询SqlServer最近执行过的Sql
SELECT TOP 1000ST.text AS '执行的SQL语句' ,QS.execution_count AS '执行次数' ,QS.total_elapsed_time / 10000 AS ...
- PostgreSQL Replication之第四章 设置异步复制（6）
4.6 有效的清理和恢复结束 最近几年, recovery.conf 已经变得越来越强大了.早在初期(在 PostgreSQL 9.0之前), 仅有 restore_command 和一些 recov ...
- 51Nod 独木舟（贪心）
n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...