Bootstrap table使用方法详细介绍


Posted in Javascript onDecember 09, 2016

bootstrap-table是一个非常好用的表格插件,提供了很多工具及分页、搜索等功能。

首先我们需要下面几个文件,

<span style="font-size:18px;"><!-- bootstrap table --> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js"></script> 
<!-- bootstrap --> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap/css/bootstrap.css"/> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap/js/bootstrap.js"></script> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.css"/> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.js"></script> 
<!-- bootstrap table中文包 --> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script></span>

中文包好像可以防止某些bug

如果你单独引入这些文件而导致样式出错,请下载完整的bootstrap-table

下面是bootstrap-table的加载

<span style="font-size:18px;"><script type="text/javascript"> 
$(function () { 
 
 //1.初始化Table 
 var oTable = new TableInit(); 
 oTable.Init(); 
}); 
 
 
var TableInit = function () { 
 var oTableInit = new Object(); 
 //初始化Table 
 oTableInit.Init = function () { 
  $('#tb_departments').bootstrapTable({ 
   url: '${pageContext.request.contextPath}/AlarmInfo/list',   //请求后台的URL(*) 
   method: 'get',      //请求方式(*) 
   toolbar: '#toolbar',    //工具按钮用哪个容器 
   striped: false,      //是否显示行间隔色 
   cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
   pagination: true,     //是否显示分页(*) 
   sortable: false,      //是否启用排序 
   sortOrder: "asc",     //排序方式 
   queryParams: oTableInit.queryParams,//传递参数(*) 
   sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*) 
   pageNumber:1,      //初始化加载第一页,默认第一页 
   pageSize: 10,      //每页的记录行数(*) 
   pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*) 
   search: false,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 
   strictSearch: true, 
   showColumns: true,     //是否显示所有的列 
   showRefresh: false,     //是否显示刷新按钮 
   minimumCountColumns: 2,    //最少允许的列数 
   clickToSelect: true,    //是否启用点击选中行 
   height: 500,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
   uniqueId: "id",      //每一行的唯一标识,一般为主键列 
   showToggle:true,     //是否显示详细视图和列表视图的切换按钮 
   cardView: true,     //是否显示详细视图 
   detailView: false,     //是否显示父子表 
   columns: [{ 
    checkbox: true 
   }, { 
    field: 'Id', 
    title: '编号' 
   }, { 
    field: 'Name', 
    title: '姓名' 
   }, { 
    field: 'Type', 
    title: '类型' 
   },{ 
    field: 'Time', 
    title: '时间' 
   } 
    
   ] 
  }); 
 }; 
 
</script> 
 
<head> 
<body> 
 <div class="panel-body" style="padding-bottom:0px;"> 
   <table id="tb_departments"></table> 
  </div> 
</body> 
</head> 
</span><span style="font-size:18px;"> 
</span>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
js读写json文件实例代码
Oct 21 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 #Javascript
任意Json转成无序列表的方法示例
Dec 09 #Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
js常用代码段收集
2011/10/28 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python如何读写CSV文件
2020/08/13 Python
为什么需要版本控制
2016/10/28 面试题
求职毕业生自荐书
2014/02/08 职场文书
李开复演讲稿
2014/05/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
个人委托书
2014/07/31 职场文书
个人租房协议书
2014/11/28 职场文书
债务纠纷起诉书
2015/05/20 职场文书
教师师德工作总结2015
2015/07/22 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Ajax实现异步加载数据
2021/11/17 Javascript
python热力图实现的完整实例
2022/06/25 Python