zoukankan html css js c++ java

前端表格插件 BootstrapTable 入门教程

2017年06月29日 23:35:02 Hgihness 阅读数：118105

官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github地址： https://github.com/wenzhixin/bootstrap-table

官网介绍：
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

主要功能

支持 Bootstrap 3 和 Bootstrap 2
自适应界面
固定表头
非常丰富的配置参数
直接通过标签使用
显示/隐藏列
显示/隐藏表头
通过 AJAX 获取 JSON 格式的数据
支持排序
格式化表格
支持单选或者多选
强大的分页功能
支持卡片视图
支持多语言
支持插件

优点

学习成本较低，配置简单，文档齐全
跟Bootstrap无缝衔接，整体风格一致，也便于二次开发
开发者活跃，Github定期维护

开始使用

1、在网页的head标签里插入下面的代码

<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

2、在页面body代码块里定义表格展示的区域

<table id="table"></table>

3、使用data属性来渲染表格（简单方式）

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">序号</th>
            <th data-field="name">名称</th>
            <th data-field="price">价格</th>
        </tr>
    </thead>
</table>

4、编写JavaScript代码渲染表格（推荐使用这种方式，代码阅读和扩展更为方便）

在网页代码最下面插入js脚本，内容如下：


$("#table").bootstrapTable({ // 对应table标签的id
      url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url
      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
      striped: true,  //表格显示条纹，默认为false
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [10, 20], // 设置页面可以显示的数据条数
      pageSize: 10, // 页面数据条数
      pageNumber: 1, // 首页页码
      sidePagination: 'server', // 设置为服务器端分页
      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

          return {
              pageSize: params.limit, // 每页要显示的数据条数
              offset: params.offset, // 每页显示数据的开始行号
              sort: params.sort, // 要排序的字段
              sortOrder: params.order, // 排序规则
              dataId: $("#dataId").val() // 额外添加的参数
          }
      },
      sortName: 'id', // 要排序的字段
      sortOrder: 'desc', // 排序规则
      columns: [
          {
              checkbox: true, // 显示一个勾选框
              align: 'center' // 居中显示
          }, {
              field: 'code', // 返回json数据中的name
              title: '编号', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '名称',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'calcMode',
              title: '计算方式',
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index){ // 单元格格式化函数
                  var text = '-';
                  if (value == 1) {
                      text = "方式一";
                  } else if (value == 2) {
                      text = "方式二";
                  } else if (value == 3) {
                      text = "方式三";
                  } else if (value == 4) {
                      text = "方式四";
                  }
                  return text;
              }
          }, {
              title: "操作",
              align: 'center',
              valign: 'middle',
               160, // 定义列的宽度，单位为像素px
              formatter: function (value, row, index) {
                  return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
              }
          }
      ],
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }

})

组件文档

一、表格参数

设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数

使用方式如下：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      ... ...

});

名称	标签	类型	默认	描述
method	data-method	String	‘get’	服务器数据的请求方式 ‘get’ or ‘post’
url	data-url	String	undefined	服务器数据的加载地址
undefinedText	data-undefined-text	String	‘-‘	当数据为 undefined 时显示的字符
striped	data-striped	Boolean	false	设置为 true 会有隔行变色效果
columns	-	Array	[]	列配置项,详情请查看列参数表格.
data	-	Array	[]	加载json格式的数据
cache	data-cache	Boolean	true	设置为 false 禁用 AJAX 数据缓存
dataType	data-data-type	String	‘json’	服务器返回的数据类型
queryParams	data-query-params	Function	function(params) { return params; }	请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数如果 queryParamsType = ‘limit’ ,返回参数必须包含 limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false将会终止请求
pagination	data-pagination	Boolean	false	设置为 true 会在表格底部显示分页条
paginationLoop	data-pagination-loop	Boolean	true	设置为 true 启用分页条无限循环的功能。
sidePagination	data-side-pagination	String	‘client’	设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置服务器数据地址（url）或者重写ajax方法
pageNumber	data-page-number	Number	1	如果设置了分页，首页页码
pageSize	data-page-size	Number	10	如果设置了分页，页面数据条数
pageList	data-page-list	Array	[10, 25, 50, 100, All]	如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
search	data-search	Boolean	false	是否启用搜索框
searchOnEnterKey	data-search-on-enter-key	Boolean	false	设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
showRefresh	data-show-refresh	Boolean	false	是否显示刷新按钮
clickToSelect	data-click-to-select	Boolean	false	设置true 将在点击行时，自动选择rediobox 和 checkbox
singleSelect	data-single-select	Boolean	false	设置True 将禁止多选

二、列参数

针对具体每一列展示的设置参数，最常用的为 title 和 field，它们分别设置了表头显示文字和对应要显示的每项数据

示例代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      columns: [
          {
              checkbox: true
          }, {
              title: '标准编号'
              field: 'stdCode'
          },
          ... ...
      ]
});

名称	标签	类型	默认	描述
title	data-title	String	undefined	表头要显示的文本
field	data-field	String	undefined	要显示数据的字段名称，可以理解为json对象里的key
checkbox	data-checkbox	Boolean	false	设置为True的时候则显示一列checkbox组件，该列的宽度为固定宽度
radio	data-radio	Boolean	false	设置为True的时候则显示一列radio组件，该列的宽度为固定宽度
align	data-align	String	undefined	设置单元格数据的左右对齐方式，可选择的值有：’left’, ‘right’, ‘center’
valign	data-valign	String	undefined	设置单元格数据的上下对齐方式，可选择的值有：’top’, ‘middle’, ‘bottom’
width	data-width	Number {Pixels or Percentage}	undefined	设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话，可以使用’%’百分比的方式，也可以设置要显示的像素值，如果设置像素值的话可以不填’px’，例如： width : 100 和 width : ‘100px’ ，效果是一样的
visible	data-visible	Boolean	true	显示或隐藏该列，默认显示， False为隐藏
formatter	data-formatter	Function	undefined	单元格格式化函数，有三个参数： value：该列的字段值； row：这一行的数据对象； index：行号，第几行，从0开始计算例子： `formatter : function(value, row, index){ return value + row.id + index; }`

关于列参数，更详细文档请访问
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列参数

三、事件

给表格绑定事件，代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }
});

Option 事件	jQuery 事件	参数	描述
onLoadSuccess	load-success.bs.table	data	请求加载远程服务器数据成功时的事件
onLoadError	load-error.bs.table	status	请求加载远程服务器数据失败时的事件
onClickRow	click-row.bs.table	row, element\|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据，<br/>element\|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据，<br/>element：tr 元素， field：点击列的 field 名称。
onDblClickRow	dbl-click-row.bs.table	row, $element	当用户双击某一行的时候触发，参数包括： row：点击行的数据， field：点击列的 field 名称。
onClickCell	click-cell.bs.table	field, value, row, element\|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element\|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element：td 元素。
onDblClickCell	dbl-click-cell.bs.table	field, value, row, element\|当用户双击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element\|当用户双击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element：td 元素。

关于事件，更详细文档请访问：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#事件

四、方法

使用方法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。
示例代码：

// 获取表格所有已经勾选的行数据，为一个对象数组
var selects = $('#table').bootstrapTable('getSelections');

名称(method)	参数	描述
getOptions	none	返回表格的 Options。
getSelections	none	返回所选的行，当没有选择任何行的时候返回一个空数组。
getAllSelections	none	返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。
load	data	加载数据到表格中，旧数据会被替换。
append	data	添加数据到表格在现有数据之后。
prepend	data	插入数据到表格在现有数据之前。
insertRow	params	插入新行，参数包括： index: 要插入的行的 index。 row: 行的数据，Object 对象。
refresh	params	更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接口，也支持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有用
showLoading	none	显示数据加载状态
hideLoading	none	隐藏数据加载状态
check	index	选择一行，参数为行号，index从0开始
uncheck	index	取消选择一行，参数为行号，index从0开始
destroy	none	销毁一个表格，直接把整个table删掉，需要重新开始渲染table
selectPage	page	跳到指定的页。
prevPage	none	跳到上一页。
nextPage	none	跳到下一页。

更全文档请访问：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#方法

查看全文

相关阅读:
win10 uwp 弹起键盘不隐藏界面元素
 win10 uwp 存放网络图片到本地
 win10 uwp 存放网络图片到本地
 sublime Text 正则替换
 sublime Text 正则替换
 win10 uwp 绘图 Line 控件使用
 win10 uwp 绘图 Line 控件使用
 AJAX 是什么？
什么是 PHP SimpleXML？
PHP XML DOM：DOM 是什么？

原文地址：https://www.cnblogs.com/grj001/p/12225237.html