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引入. 然后 ...
随机推荐
- Python 安装 httplib2
简述 httplib2 是一个使用 Python 写的支持的非常全面的 HTTP 特性的库.需要 Python2.3 或更高版本的运行环境,0.5.0 版及其以后包含了对 Python3 的支持. 简 ...
- 集合框架(List和Set)
一.概述 集合是一种可变数据项的容器,具有统一的父类接口Collection<E>(Map并没有继承之),与其子集合的关系例如以下 图.集合的特点是长度可变,能够存储多种类型的对象(不加泛 ...
- Delphi的时间 x87 fpu control word 精度设置的不够
在win7 64位系统下, 一个DELPHI写的DLL注入一个C语言程序后. 出现非常奇怪的浮点数相加出错的情况. (注: 在XP系统下是正常的).比如: 40725.0001597563 + 0.7 ...
- bzoj1016: [JSOI2008]最小生成树计数(kruskal+dfs)
1016: [JSOI2008]最小生成树计数 题目:传送门 题解: 神题神题%%% 据说最小生成树有两个神奇的定理: 1.权值相等的边在不同方案数中边数相等 就是说如果一种方案中权值为1的边有n条 ...
- jni java与c++交互返回三维数组jobjectArray
1.在java里创建一个类,在类里添加静态方法调用c++的类库dll,在java里创建要返回数组的函数.在java的main方法里创建返回后的测试方法. package cn.gov.cma.cnn. ...
- zzulioj--1841--so easy！麻麻再也不用担心我的数学了！（数学水题）
1841: so easy!麻麻再也不用担心我的数学了! Time Limit: 1 Sec Memory Limit: 128 MB Submit: 27 Solved: 15 SubmitSt ...
- Hadoop框架基础（三）
** Hadoop框架基础(三) 上一节我们使用eclipse运行展示了hdfs系统中的某个文件数据,这一节我们简析一下离线计算框架MapReduce,以及通过eclipse来编写关于MapReduc ...
- WebApp之H5登录注册
代码indexhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- PostgreSQL Replication之第七章 理解Linux高可用（5）
7.5 高可用性是所有冗余 让我们从一个不同的角度看一下前面的混合超市的例子.为了处理大量顾客无需长排队,无需关闭超市,混合超市雇用更多的出纳员以及安装许多(甚至更多)的收银机. 这样,如果一个收银机 ...
- session 存入 redis
<?php header('content-type:text/html;charset=utf-8'); /* * 更改 session 存储位置及存储方式. */ ini_set('sess ...