本人前端菜鸟一枚,最近使用bootstrap table实现表格,记录一下以便日后翻阅,废话不多说,先看效果图:

1、首先说下要实现该效果需要添加的css样式及所需的js文件,具体下载地址就不粘贴了(因为太懒)

 <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>

2、html页面中需要准备的元素如下:

 <div class="container">
<!--存放工具栏-->
<div id="toolbar"></div>
<!--存放生成的表格-->
<table id="searchResults" class="table table-hover">
</table>
</div>

3、万事俱备只欠东风,东风就是数据问题,这里有一点需要注明,客户端(client)的数据和服务端(server)的数据格式略有差异,这里展示出来以供参考(本人使用的是客户端的数据)。

客户端数据格式(clientJson.json):

[
{
"id": 0,
"name": "李雷",
"sex": "男",
"age": "12",
"cls": "一年级",
"score": "81",
"action": "操作"
},
{
"id": 1,
"name": "韩梅梅",
"sex": "女",
"age": "11",
"cls": "一年级",
"score": "90",
"action": "操作"
}
]

服务端数据格式(serverJson.json):

{
"total": 2,
"rows": [
{
"id": 0,
"name": "李雷",
"sex": "男",
"age": "12",
"cls": "一年级",
"score": "81"
},
{
"id": 1,
"name": "韩梅梅",
"sex": "女",
"age": "11",
"cls": "一年级",
"score": "90"
}
]
}

4、所有的css、js、页面元素及数据都已经准备完毕,那么该如何生成表格呢?请看下面代码及注释,部分模块的显示效果已经在文章开头的图片中显示出来,请看官对号入座。

function createTab() {
$('#searchResults').bootstrapTable('destroy').bootstrapTable({
url: 'json/clientJson.json',
/*data : data,*/ toolbar: '#toolbar', //工具按钮用哪个容器
method: 'get', //请求方式
striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存
toolbarAlign: "right", //工具栏对齐方式
sidePagination: "client", //分页方式:client客户端分页,server服务端分页
search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
uniqueId: "id",
pageNumber: 1, //初始化加载第一页
pageSize: 1, //每页的记录行数
pageList: [1, 2, 3], //可供选择的每页的行数
pagination: true, // 是否分页
sortable: true, // 是否启用排序
sortOrder: "asc", //排序方式
showColumns: true, //是否显示列选择按钮
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
// height: 500, //行高
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
queryParamsType: '',//设置请求参数格式
queryParams: function queryParams(params) { //设自定义查询参数
/*请求远程数据时,您可以通过修改queryParams来发送其他参数。
如果queryParamsType = 'limit',params对象包含:limit,offset,search,sort,order。
否则,它包含:pageSize,pageNumber,searchText,sortName,sortOrder。
返回false停止请求。
默认: function(params) { return params }*/
return params;
},
columns: [
{
title: "全选",
field: "select",
checkbox: true,
width: 20, //宽度
align: "center", //水平
valign: "middle" //垂直
},
{
field: 'no',
title: '序号',
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
}
,
{
field: 'name',
title: '名字',
align: 'center',
valign: 'middle'
},
{
field: 'sex',
title: '性别',
align: 'center',
valign: 'middle'
},
{
field: 'age',
title: '年龄',
align: 'center',
valign: 'middle'
},
{
field: 'cls',
title: '年级',
align: 'center',
valign: 'middle',
},
{
field: 'score',
title: '分数',
align: 'center',
valign: 'middle',
},
{
field: 'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
]
}); } //操作栏的格式化
function actionFormatter(value, row, index) {
var id = row.id;
var result = "";
result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
return result;
}

4、ok,现在表格已经展示出来了,过程很简单,但是我刚开始做的时候碰见一个问题: Syntax error, unrecognized expression,如下图所示。wfk?捣鼓半天终于发现,是jquery的版本问题,1.9的版本显然不好使,于是换成2.1的版本,终于大功告成。

5、最后,双手送上完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格及下载</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<!--<script src="js/jquery-2.1.4.min.js"></script>-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="container text-center">
<button name='createTab' id='creatTab' type="button"
class="btn btn-primary" onclick="createTab()">生成表格
</button>
</div>
<div class="container">
<!--存放工具栏-->
<div id="toolbar"></div>
<!--存放生成的表格-->
<table id="searchResults" class="table table-hover">
</table>
</div>
</body>
<script>
function createTab() {
$('#searchResults').bootstrapTable('destroy').bootstrapTable({
url: 'json/clientJson.json',
/*data : data,*/ toolbar: '#toolbar', //工具按钮用哪个容器
method: 'get', //请求方式(*)
striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存
toolbarAlign: "right", //工具栏对齐方式
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
uniqueId: "id",
pageNumber: 1, //初始化加载第一页
pageSize: 1, //每页的记录行数
pageList: [1, 2, 3], //可供选择的每页的行数
pagination: true, // 是否分页
sortable: true, // 是否启用排序
sortOrder: "asc", //排序方式
showColumns: true, //是否显示列选择按钮
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
// height: 500, //行高
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
queryParamsType: '',//设置请求参数格式
queryParams: function queryParams(params) { //设自定义查询参数
/*请求远程数据时,您可以通过修改queryParams来发送其他参数。
如果queryParamsType = 'limit',params对象包含:limit,offset,search,sort,order。
否则,它包含:pageSize,pageNumber,searchText,sortName,sortOrder。
返回false停止请求。
默认: function(params) { return params }*/
return params;
},
columns: [
{
title: "全选",
field: "select",
checkbox: true,
width: 20, //宽度
align: "center", //水平
valign: "middle" //垂直
},
{
field: 'no',
title: '序号',
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
}
,
{
field: 'name',
title: '名字',
align: 'center',
valign: 'middle'
},
{
field: 'sex',
title: '性别',
align: 'center',
valign: 'middle'
},
{
field: 'age',
title: '年龄',
align: 'center',
valign: 'middle'
},
{
field: 'cls',
title: '年级',
align: 'center',
valign: 'middle',
},
{
field: 'score',
title: '分数',
align: 'center',
valign: 'middle',
},
{
field: 'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
]
}); } //操作栏的格式化
function actionFormatter(value, row, index) {
var id = row.id;
var result = "";
result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
return result;
}
</script>
</html>

-------------------------------------------------------------------------------------------------

QQ群:871934478

版权所有,转载请注明源地址           

-------------------------------------------------------------------------------------------------

bootstrap table使用及遇到的问题的更多相关文章

  1. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  2. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  6. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  10. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

随机推荐

  1. C语言第十讲,枚举类型简单说明

    C语言第十讲,枚举类型简单说明 一丶C语言中的枚举类型(ENUM) 在我们实际工作中,或者编写代码中.我们有的时候会用固定的值.而且不是很多. 这个时候就可以使用枚举了.如果我们使用#define显然 ...

  2. ARM64 Linux kernel virtual address space

    墙外通道:http://thinkiii.blogspot.com/2014/02/arm64-linux-kernel-virtual-address-space.html Now let's ta ...

  3. got & plt

    got plt类似与Windows PE文件中IAT(Import Address Table). 要使的代码地址无关,基本思想就是把与地址相关的部分放到数据段里面. ELF的做法是在数据段里面建立一 ...

  4. C#读取Cookie

    public class HttpCookie { [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = ...

  5. Structs+Spring+Hibernate快速入门

    Structs+Spring+Hibernate,这是很经典的一个搭配,它的开发流程也比较程式化,下面以用户注册为例.     注册页面代码: <%@page contentType=" ...

  6. [Luogu1365] WJMZBMR打osu! / Easy

    Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有 \(n\) 次点击要做,成功了就是o,失败了就是x,分数是按com ...

  7. [SCOI2010] 连续攻击游戏

    题目 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一 ...

  8. Spring之Bean的作用域与生命周期

    在前面博客中提到容器启动获得BeanDefinition对象中有一个scope 属性.该属性控制着bean对象的作用域.本章节介绍Bean的作用域及生命周期,了解bean是怎么来的又怎么没的. 一.B ...

  9. SpringMVC+SpringJdbc+SQLServer+EasyUI增删改查

    前言 前天用SpringJdbc连接了一把SQLServer,早上起来用SpringMVC+SpringJdbc+EasUI写了个增删改查的demo,主要是熟悉下SpringMVC相关知识点,如vie ...

  10. asp.net mvc 碰到 XML 解析错误:找不到根元素 位置

    具体报错信息如下: XML 解析错误:找不到根元素 位置:moz-nullprincipal:{4a1d2b7c-6d07-468e-9df9-2267a0422c93} 行 1,列 1: 网上给出的 ...