ABP入门系列（14）——应用BootstrapTable表格插件 - 简书
ABP入门系列（14）——应用BootstrapTable表格插件
之前的文章讲解了如何进行分页展示，但其分页展示仅适用于前台web分页，在后台管理系统中并不适用。后台管理系统中的数据展示一般都是使用一些表格插件来完成的。这一节我们就使用BootstrapTable进行举例说明。
最终效果图
2. BootstrapTable
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
Bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。从命名来看就知道该表格样式由Bootstrap接手了，我们就不必纠结于样式的调整了。想对其有详细了解，可参考。
废话不多说，下面我们就直接上手演练。
3. 实操演练
因为使用BootstrapTable进行分页，主要的难点在插件的配置上，所以这一次我们直接对主要代码进行讲解，源码请自行前往Github上查看。
3.1. 添加BackendTasksController控制器
控制器中主要定义了列表、创建、编辑相关Action。其中最重要的方法是进行数据绑定的Aciton GetAllTasks，代码如下：
[DontWrapResult]
public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status) {
var sort = !string.IsNullOrEmpty(sortfiled) ? string.Format("{0} {1}", sortfiled, sortway) : "";
TaskState currentS
if (!string.IsNullOrEmpty(status)) Enum.TryParse(status, true, out currentState);
var filter = new GetTasksInput {
SkipCount = offset,
MaxResultCount = limit,
Sorting = sort,
Filter = search
if (!string.IsNullOrEmpty(status)) if (Enum.TryParse(status, true, out currentState)) filter.State = currentS
var pagedTasks = _taskAppService.GetPagedTasks(filter);
return Json(new {
total = pagedTasks.TotalCount,
rows = pagedTasks.Items
JsonRequestBehavior.AllowGet);
下面来一一讲解下参数：
limit：分页参数，指定每页最多显示多少行；
offset：分页参数，指定偏移量；
sortField：排序参数，排序字段；
sortWay：排序参数，排序方式（升序or降序）；
search：过滤参数，指定过滤的任务名称；
status：过滤参数，指定过滤的任务状态
这里面要注意的是参数的命名和顺序必须和前端传参保持一致细心的你可能发现Action使用了[DontWrapResult]特性进行修饰，这样返回的json结果就不会被Abp提供的AbpJsonResult包裹，了解AbpJsonResult可参考。
3.2. 添加List.cshtml进行列表展示
List.cshtml中主要的代码为：
@using Abp.Web.Mvc.Extensions
ViewBag.Title = L("BackendTaskList");
ViewBag.ActiveMenu = "BackendTaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
&!-- 加载bootstrap-tablel的样式 --&
&link rel="stylesheet" href="/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css"&
@section scripts{
@Html.IncludeScript("~/Views/backendtasks/list.js");
&!-- 加载bootstrap-tablel的script脚本 --&
&script src="/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"&&/script&
&!-- Latest compiled and minified Locales --&
&script src="/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"&&/script&
&div class="row"&
&div class="panel-body"&
&!-- 过滤框 --&
&div class="panel panel-default"&
&div class="panel-heading"&查询条件&/div&
&div class="panel-body"&
&form id="formSearch" class="form-horizontal"&
&div class="form-group" style="margin-top: 15px"&
&label class="control-label col-sm-1" for="txt-filter"&任务名称&/label&
&div class="col-sm-3"&
&input type="text" class="form-control" id="txt-filter"&
&label class="control-label col-sm-1" for="txt-search-status"&状态&/label&
&div class="col-sm-3"&
@Html.DropDownList("TaskStateDropdownList", null, new {id = "txt-search-status", @class = "form-control "})
&div class="col-sm-4" style="text-align:"&
&button type="button" style="margin-left: 50px" id="btn-query" class="btn btn-primary"&查询&/button&
&!-- bootstrap-tablel指定的工具栏 --&
&div id="toolbar" class="btn-group"&
&button id="btn-add" type="button" class="btn btn-primary"&
&span class="glyphicon glyphicon-plus" aria-hidden="true"&&/span&新增
&button id="btn-edit" type="button" class="btn btn-success"&
&span class="glyphicon glyphicon-pencil" aria-hidden="true"&&/span&修改
&button id="btn-delete" type="button" class="btn btn-danger"&
&span class="glyphicon glyphicon-remove" aria-hidden="true"&&/span&删除
&!--bootstrap-table表体--&
&table id="tb-tasks"&&/table&
&!--通过初始加载页面的时候提前将创建任务模态框加载进来--&
@Html.Partial("_CreateTask")
&!--编辑任务模态框通过ajax动态填充到此div中--&
&div id="edit"&
由于是demo性质，我直接使用的CDN来加载bootstrap table相关的css，js。其中首先定义了过滤框，然后定义了bootstrap table专用的工具栏，其会在后续bootstrap table初始化指定。接着使用&table id="tb-tasks"&&/table&来定义bootstrap-table表体。
3.3. 添加list.js初始化bootstrap table
初始化就是为bootstrap table指定数据来源进行数据绑定、列名定义、排序字段、分页，事件绑定等。我们新建一个list.js来进行初始化：
$(function() {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
var taskService = abp.services.app.
var $table = $('#tb-tasks');
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$table.bootstrapTable({
url: '/BackendTasks/GetAllTasks', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
radio: true
field: 'Title',
title: '任务名称',
sortable: true
field: 'Description',
title: '任务描述'
field: 'AssignedPersonName',
title: '任务分配'
field: 'State',
title: '任务状态',
formatter: showState
field: 'CreationTime',
title: '创建日期',
formatter: showDate
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter: operateFormatter,
events: operateEvents
这段JS中bootstrap table初始化配置的参数说明已经在代码中进行了注释。下面对几个重要的参数进行讲解：
3.3.1. queryParams查询参数
初始化的时候我们指定了查询参数为：queryParams: oTableInit.queryParams, //传递参数（*）其中queryParams函数定义如下：
//指定bootstrap-table查询参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit,
//页面大小
offset: params.offset,
sortfiled: params.sort,
//排序字段
sortway: params.order,
//升序降序
search: $("#txt-filter").val(),
//自定义传参-任务名称
status: $("#txt-search-status").val() //自定义传参-任务状态
和控制器中的Action的函数命名进行比较public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status)，其中参数命名的大小写以及顺序与js中定义的查询参数保持一致，这也是必须要注意的一点。
3.3.2. 数据绑定
数据绑定包括以下三个部分：
url：就是用来指定请求后台的URL；
uniqueid：用来绑定每一行的唯一标识列，一般为主键列
columns：用来绑定每一列要显示的数据。
针对columns参数，其中field必须与你请求返回的json数据的key大小写保持一致；title就是显示的列名；align指定列的水平对其方式；valign指定列的垂直对齐方式；formatter用来指定列如何进行格式化输出，如操作列中指定formatter: operateFormatter,用来显示统一格式的操作组；
//指定操作组
function operateFormatter(value, row, index) {
'&a class="like" href="javascript:void(0)" title="Like"&',
'&i class="glyphicon glyphicon-heart"&&/i&',
' &a class="edit" href="javascript:void(0)" title="Edit"&',
'&i class="glyphicon glyphicon-edit"&&/i&',
' &a class="remove" href="javascript:void(0)" title="Remove"&',
'&i class="glyphicon glyphicon-remove"&&/i&',
].join('');
events用来指定列的事件，比如操作列中指定events: operateEvents来指定每个操作对应的事件处理：
//指定table表体操作事件
window.operateEvents = {
'click .like': function(e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
'click .edit': function(e, value, row, index) {
editTask(row.Id);
'click .remove': function(e, value, row, index) {
deleteTask(row.Id);
3.3.3. 工具栏事件绑定
工具栏是我们在List.cshtml定义的新增、编辑、删除三个按钮，表格初始化时，直接为toolbar参数指定工具栏对应的id即可，如本例toolba: '#toolbar'。那工具栏按钮的事件在哪绑定呢？直接上代码吧：
//bootstrap-table工具栏按钮事件初始化
var ButtonInit = function() {
var oInit = new Object();
var postdata = {};
oInit.Init = function() {
//初始化页面上面的按钮事件
$("#btn-add")
.click(function() {
$("#add").modal("show");
$("#btn-edit")
.click(function() {
var selectedRaido = $table.bootstrapTable('getSelections');
if (selectedRaido.length === 0) {
abp.notify.warn("请先选择要编辑的行！");
editTask(selectedRaido[0].Id);
$("#btn-delete")
.click(function() {
var selectedRaido = $table.bootstrapTable('getSelections');
if (selectedRaido.length === 0) {
abp.notify.warn("请先选择要删除的行！");
deleteTask(selectedRaido[0].Id);
$("#btn-query")
.click(function() {
$table.bootstrapTable('refresh');
该方法会在页面加载初被调用：var oButtonInit = new ButtonInit();
oButtonInit.Init();
另外函数中使用了bootstrap table预置的2个比较实用的函数：
$table.bootstrapTable('getSelections')：获取表格选择项
$table.bootstrapTable('refresh')：刷新表格
本文主要讲解了如何使用bootstrap table进行后台分页的一般用法，讲解了bootstrap table参数的配置和几个注意事项。其中有很多功能并未讲到，具体请自行查询文档。前端的插件用法，看似复杂，实则动手操作也还ok，所以重在动手实践。
一枚立志成为架构狮并为之努力奋斗的程序猿bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）_Javascript教程-织梦者
当前位置:&>&&>& > bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）
bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）
本文将为关注织梦者的朋友提供的是的bootstrap table 获取数据后的前台页面（后台怎么传就不必详细说明了吧）相关教程，具体实例代码请看下文:&%@ page contentType="text/charset=UTF-8" language="java" %&&%@ taglib
uri="/jsp/jstl/core" prefix="c" %&&!DOCTYPE HTML&&html lang="zh-cn"&&head&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&通用增删改查&/title&
&link href="/resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/&
&link href="/resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/&
&link href="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/&
&link href="/resources/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/&
&link href="/resources/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/&
&link href="/resources/plugins/select2/css/select2.min.css" rel="stylesheet"/&
&link href="/resources/css/common.css" rel="stylesheet"/&&/head&&body&&div id="main"&
&div id="toolbar"&
&a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"&&i class="zmdi zmdi-plus"&&/i& 新增类型&/a&
&%--&a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"&&i class="zmdi zmdi-edit"&&/i& 编辑类型&/a&--%&
&a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"&&i class="zmdi zmdi-close"&&/i& 删除类型&/a&
&table id="table"&&/table&&/div&&!-- 新增 --&&div id="createDialog" class="crudDialog" hidden&
&form onsubmit="return false"&
&div class="form-group"&
id="selectpid"
class="form-group"&
&option value="0"&请选择父级&/option&
&c:forEach items="${types}" var="type"&
&option value="${type.id}" &${type.title}&/option&
&/c:forEach&
&div class="form-group"&
&label for="input1"&标题&/label&
&input id="input1" type="text" value="" class="form-control"&
&div class="form-group"&
&label for="input3"&描述&/label&
&input id="input3"
type="text" value="" class="form-control"&
&/form&&/div&&script src="/resources/plugins/jquery.1.12.4.min.js"&&/script&&script src="/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js"&&/script&&script src="/resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"&&/script&&script src="/resources/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"&&/script&&script src="/resources/plugins/waves-0.7.5/waves.min.js"&&/script&&script src="/resources/plugins/jquery-confirm/jquery-confirm.min.js"&&/script&&script src="/resources/plugins/select2/js/select2.min.js"&&/script&&script src="/resources/js/common.js"&&/script&&script&
var $table = $('#table');
var servlet_url = "/manage/type/index";
$("#input1").val("ssss");
$(function() {
$(document).on('focus', 'input[type="text"]', function() {
$(this).parent().find('label').addClass('active');
}).on('blur', 'input[type="text"]', function() {
if ($(this).val() == '') {
$(this).parent().find('label').removeClass('active');
// bootstrap table初始化
// http://bootstrap-table./zh-cn/documentation/
$table.bootstrapTable({
url: servlet_url+'?m=ajax_all',
height: getHeight(),
striped: true,
search: true,
searchOnEnterKey: true,
showRefresh: true,
showToggle: true,
showColumns: true,
minimumCountColumns: 2,
showPaginationSwitch: true,
clickToSelect: true,
detailView: true,
detailFormatter: 'detailFormatter',
pagination: true,
paginationLoop: false,
classes: 'table table-hover table-no-bordered',
//sidePagination: 'server',
//silentSort: false,
smartDisplay: false,
idField: 'id',
sortName: 'id',
sortOrder: 'desc',
escape: true,
searchOnEnterKey: true,
maintainSelected: true,
toolbar: '#toolbar',
columns: [
{field: 'state', checkbox: true},
{field: 'id', title: '编号',
halign: 'center',align:"center"},
{field: 'title', title: '标题',
halign: 'center',align:"center"},
{field: 'pid', title: '父级ID',
halign: 'center',align:"center"},
{field: 'description', title: '描述',
halign: 'center',align:"center"},
{field: 'createTime', title: '创建时间',
halign: 'center',align:"center",formatter: 'timeFormatter'},
{field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
}).on('all.bs.table', function (e, name, args) {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
function timeFormatter(value,row,index){
return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");
function actionFormatter(value, row, index) {
'&a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"&&i class="glyphicon glyphicon-heart"&&/i&&/a&　',
'&a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"&&i class="glyphicon glyphicon-edit"&&/i&&/a&　',
'&a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"&&i class="glyphicon glyphicon-remove"&&/i&&/a&'
].join('');
window.actionEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
//搞修改数据
$("#input1").val(row.title);
$("#input3").val(row.description);
$("#selectpid").val(row.pid);
alert($("#input1").val());
$.confirm({
title:"修改数据",
content:function(){
var self =
var h = $("#createDialog").html();
self.setContent($("#createDialog").html());
text:"确定",
action:function(){
alert($(".jconfirm-content form input")[0].value)
//发送修改后的数据到服务器端，更新数据库//
$.post(servlet_url+"?m=update",{//
id:row.id,//
title:$(".jconfirm-content form input")[0].value,//
pid:$(".jconfirm-content form select")[0].value,//
description:$(".jconfirm-content form input")[1].value//
},function(txt){//
//服务器端响应内容回调函数//
$.alert(txt.message);//
$("#createDialog").html(ht);//
$table.bootstrapTable('refresh');//
text:"取消",
action:function(){
$("#createDialog").html(ht);
console.log(value, row, index);
'click .remove': function (e, value, row, index) {
removeByUniqueId = row.
alert('You click remove icon, row: ' + JSON.stringify(row));
$.confirm({
title:"提示",
content:"是否永久删除数据？",
text:"确定",
action:function(){
//执行删除操作
$.get(servlet_url+"?m=delete",{'id':row.id},function(txt){
$.alert(txt.message);
$table.bootstrapTable('refresh');
},"json");
text:"取消"
console.log(value, row, index);
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('&p&&b&' + key + ':&/b& ' + value + '&/p&');
return html.join('');
var ht = $("#createDialog").html();
function createAction() {
$("#createDialog").html("");
$.confirm({
type: 'dark',
animationSpeed: 300,
title: '新增系统',
content: ht,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
var t =$("#input1").val();
var desc = $("#input3").val();
var pid = $("#selectpid").val();
if(t==""){
$.alert('标题不能为空');
$.get("/manage/type/index?m=add",{"title":t,"description":desc,"pid":pid},function(txt) {
$("#createDialog").html(ht);
$.confirm({
title:"提示",
content:txt.message,
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
$table.bootstrapTable('refresh');
},"json");
text: '取消',
btnClass: 'waves-effect waves-button'
function updateAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
$.confirm({
title: false,
content: '请至少选择一条记录！',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
text: '取消',
btnClass: 'waves-effect waves-button'
$.confirm({
type: 'blue',
animationSpeed: 300,
title: '编辑系统',
content: $('#createDialog').html(),
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
$.alert('确认');
text: '取消',
btnClass: 'waves-effect waves-button'
function deleteAction() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
$.confirm({
title: false,
content: '请至少选择一条记录！',
autoClose: 'cancel|3000',
backgroundDismiss: true,
buttons: {
text: '取消',
btnClass: 'waves-effect waves-button'
$.confirm({
type: 'red',
animationSpeed: 300,
title: false,
content: '确认删除该系统吗？',
buttons: {
confirm: {
text: '确认',
btnClass: 'waves-effect waves-button',
action: function () {
var ids = new Array();
for (var i in rows) {
ids.push(rows[i].systemId);
$.alert('删除：id=' + ids.join("-"));
text: '取消',
btnClass: 'waves-effect waves-button'
Date.prototype.format = function(fmt) {
"M+" : this.getMonth()+1,
"d+" : this.getDate(),
"h+" : this.getHours(),
"m+" : this.getMinutes(),
"s+" : this.getSeconds(),
"q+" : Math.floor((this.getMonth()+3)/3), //季度
: this.getMilliseconds()
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}&/script&&/body&&/html&通过本文的学习希望对您了解和学习jQuery编程的相关知识有一些好的帮助.感谢关注织梦者.我们将为您收集更多更好的jQuery教程.
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章bootstrap-table使用总结
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势
bootstrap-table使用总结
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、、JAVASCRIPT 的，具有简便灵活，快速的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js，css文件。
接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。
好了，简介的话就说到这，直接上代码和效果图之后，再做进一步的讨论。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&title&bootstrap-table&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="description" content="" /&
&meta name="keywords" content="" /&
&script type="text/javascript" src="./js/jquery-2.2.1.js"&&/script&
&script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"&&/script&
&script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"&&/script&
&link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" &
&link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" &
&script language="javascript"&
&div class="col-md-offset-3
col-md-6"&
&div class="panel panel-default"&
&div class="panel-heading"&
&h3 class="panel-title text-center"&已添加教师账号&/h3&
&div class="panel-body"&
&div id="toolbar" class="btn-group"&
&button id="btn_edit" type="button" class="btn btn-default" &
&span class="glyphicon glyphicon-pencil" aria-hidden="true"&&/span&修改
&button id="btn_delete" type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-remove" aria-hidden="true"&&/span&删除
&table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5"&
&th data-field="name"&用户账号&/th&
&th data-field="pwd"&用户密码&/th&
&th data-field="t_name"&教师姓名&/th&
好接下来我们 分步骤剖析一下上面的代码的含义。
1.首先我们需要去下载相应的 jquery bootstrap bootstrap-table的包，这些网上都有教程，在此不再叙述如何下载。
标签中引用js和css文件名可知我们必须引进这几个文件。
注意bootstrap，下载编译过的压缩包中只有三个文件夹 css ，fonts， js
1.jquery-2.2.1.js ---- 最新的jquery文件
2.bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件
4.bootstrap-table-all.js ---最新bootstrap-table下的js文件
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件
6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件
这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加载了这个文件我们的一些表格显示信息才会被设置成中文。
我们来实验一下 将bootstrap-table-zh-CN.js去掉后的显示效果。
当然我们还可以把显示信息设置成其他语言，只要将bootstrap-table-zh-CN.js换成其他语言的js文件即可。bootstrap-table包中都有支持。
我们还可以看看这个文件中的，我们看一下，就知道这个文件干了什么了。
* Bootstrap Table Chinese translation
* Author: Zhixin Wen
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
formatSearch: function () {
return '搜索';
formatNoMatches: function () {
return '没有找到匹配的记录';
formatPaginationSwitch: function () {
return '隐藏/显示分页';
formatRefresh: function () {
return '刷新';
formatToggle: function () {
return '切换';
formatColumns: function () {
return '列';
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
粗略一看就知道，引用该js文件后，在加载时，便祈祷了初始化的效果。将一些显示信息的内容转为相应的中内容。
2.接着我们来说相关的html代码，实际上与bootstrap-table有关的html代码只有这一部分
对，就只有一个table标签，再加上一大堆了 参数，而表格的展现形式就是通过这些在参数 来实现的。要知道有哪些样式和功能，光靠我列举肯定是九牛一毛，授人以鱼不如授人以渔，我告诉大家去哪查找这些类.class的含义。 我们可到bootstrap-table的专业网站上去查找 这有一个我用的链接
点击打开链接如果无效的可以 直接输入http://bootstrap-table./documentation
当然还可以在example中看一些例子
我们如何查看 相应的参数的含义呢？ 看到上面这张图，最右边的是一些选项，可以选这可以设置的表格属性，行属性，以及可绑定的事件。
点击表格属性 Table options 显示如下图，首先看到标题Name用于js创建表格是使用，而Attribute是html创建表格使用的，
举几个例子在我们上面的代码中有这么几个 参数他们的意思是：
data-url：索取数据的url。
data-method：请求方式。
data-height：设置表格的高
data-query-params="queryParams" ：设置
data-toolbar="#toolbar" :设置装按钮的容器为id为toolbar的。
data-pagination="true" ：设置是否显示页码数
data-search="true" ：设置search框
data-show-refresh="true" ：设置刷新按钮
data-show-toggle="true" ：设置数据显示格式
这下你该明白怎么样查看了吧！
注意其中下面段代码是核心，表示一行 一个格，data-field="name"表示一行中一个格子中的数据名 你可以把data-field理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
对于不想用html静态生成，也可以使用js动态生成。给一个代码demo，要设置相关的参数只需要采用 上面讲的Name:options 即可。例如在html中设置数据请求的目的文件data-url："./data.php" 在js中只要声明 url:"./data.php"
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
field: 'name',
title: 'Item Name'
field: 'price',
title: 'Item Price'
name: 'Item 1',
price: '$1'
name: 'Item 2',
price: '$2'
3.这样说，其他代码是干什么的，其中一部分代码是使用了 boostrap中的面板来设置格式，即将table镶嵌在面板中。 所去掉面板的代码后bootstrap-table的效果是这样的
仅仅是没有了面板而已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的
在上面可以看到请求的后台地址为:"./data.php",我们来看一下他的内容
"aoze","pwd"=&"","t_name"=&"张三");
$results[1]=array("name"=&"lisi","pwd"=&"1234","t_name"=&"李四");
$results[2]=array("name"=&"wangwu","pwd"=&"44455","t_name"=&"王五");
echo json_encode($results);
很简单吧！ 当然这只是我手写的一些测试数据，在项目中当然是从中查找出来的。
5.当然仅仅使显示数据有时候还是不够的，我们需要和table进行一些互动，比如进行一些删除，修改的功能，这时就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中镶嵌了两个button如图
这个镶嵌的实现办法是在在table的属性中 添加了这么一行data-toolbar="#toolbar"
其意思就是在工具栏的一行添加 id为toolbar的标签。
在本人做到这个项目中，要通过这两个按钮对table中点击选中的行进行相应的操作。
编写相应的事件，首先为table绑定一个选中的触发事件，然后通过getSelectRow函数获得点击选中行的数据。
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
function getSelectedRow()
var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据}