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 相关文章推荐
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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
FCKeditor添加自定义按钮
2008/03/27 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php实现倒计时效果
2015/12/19 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
javascript的BOM
2016/05/03 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
React全家桶环境搭建过程详解
2018/05/18 Javascript
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python 基于opencv操作摄像头
2020/12/24 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
安全标兵事迹材料
2014/08/17 职场文书
销售活动策划方案
2014/08/26 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
英文慰问信范文
2015/03/24 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Python中基础数据类型 set集合知识点总结
2021/08/02 Python