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 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
switchery按钮的使用方法
Dec 18 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
Vue实现多标签选择器
Nov 28 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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
超级简单的发送邮件程序
2006/10/09 PHP
php 文件缓存函数
2011/10/08 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
JQuery解析XML的方法小结
2016/04/02 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
详解appium+python 启动一个app步骤
2017/12/20 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python使用requests.session模拟登录
2019/08/09 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
数字漫画:comiXology
2020/06/13 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
自荐书格式
2013/12/01 职场文书
手机业务员岗位职责
2013/12/13 职场文书
车间班组长的职责
2013/12/13 职场文书
初中作文评语大全
2014/04/23 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
vue中 this.$set的使用详解
2021/11/17 Vue.js
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL