BootstrapTable使用实例

一、bootstrapTable简单使用：

<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css"> <script src="./static/libs/jquery/jquery-1.11.2.min.js"></script> <script src="./static/libs/bootstrap/js/bootstrap.js"></script> <script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script> <script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script> <div id="item_info_toolbar"> <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#deptModal">创建</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#adm-user-create-user">编辑</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;">删除</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;">排序</a> <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;" onclick="getSelectValue()">获取选中行值</a> </div> <table id="table" data-toggle="table" class="table table-striped"> <thead> <tr> </tr> </thead> </table>

<script>
$('#table').bootstrapTable('destroy').bootstrapTable({
        url: 'data/' + 'adm-user' + '.json', method: 'POST', uniqueId: 'id', // 绑定ID，不显示 striped: false, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*） undefinedText: '--', //singleSelect: true, // 单选checkbox，默认为复选 showRefresh : true, // 显示刷新按钮 showColumns : true, // 选择显示的列 toolbar: '#item_info_toolbar', // 搜索框位置 search: true, // 搜索开启, strictSearch: true, clickToSelect: true, // 点击选中行 pagination: true, //是否显示分页 pageNumber:1, //初始化加载第一页，默认第一页,并记录 pageSize:5,//每页显示的数量 pageList: [5, 10, 20, 50, 100],//设置每页显示的数量 paginationPreText:"上一页", paginationNextText:"下一页", paginationLoop:false, //showToggle: true, //是否显示详细视图和列表视图的切换按钮 //cardView: false, //是否显示详细视图 //detailView: false, //是否显示父子表 //showPaginationSwitch: true, //得到查询的参数 queryParams : function (params) { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 var temp = { rows: params.limit, //页面大小 page: (params.offset / params.limit) + 1, //页码 sort: params.sort, //排序列名 sortOrder: params.order //排位命令（desc，asc） }; return temp; }, columns: [ { checkbox: true },{ field: 'username', title:'用户名', valign: 'middle', width: '16%', sortable: true },{ field: 'fullname', title:'姓名', width: '16%' },{ field: 'status', title:'密码认证', width: '16%' },{ field: 'availableSpace', title:'智能卡认证', valign: 'middle', width: '16%' },{ field: 'totalSpace', title:'个人空间配额', width: '16%' },{ field: 'storageServer', title:'私密空间配额', formatter: operateFormatter } ], onLoadSuccess: function () { alert('表格加载成功！'); }, onLoadError: function () { showTips("数据加载失败！"); }, onDblClickRow: function (row, $element) { var id = row.ID; //EditViewById(id, 'view'); }, rowStyle: function (row, index) { //设置行的特殊样式 //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (index == 1) { strclass = "warning"; console.log(row); } return { classes: strclass } } }); function getSelectValue(){ var a = $table.bootstrapTable('getSelections');//获取选中行的数据 if(a.length > 0){ console.log(a); } } function operateFormatter (value, row, index) { var result = '<button class="btn btn-action" title="激活USBKEY认证" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>' return result; } </script>

adm-user： 

    [
        {
        	"id": 2018100701,
            "username": "user1",
            "fullname": "用户1", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100702, "username": "user2", "fullname": "用户2", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100703, "username": "user3", "fullname": "用户3", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100704, "username": "user4", "fullname": "用户4", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100705, "username": "user5", "fullname": "用户5", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100706, "username": "user6", "fullname": "用户6", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100707, "username": "user7", "fullname": "用户7", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100708, "username": "user8", "fullname": "用户8", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100709, "username": "user9", "fullname": "用户9", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100710, "username": "user10", "fullname": "用户10", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100711, "username": "user11", "fullname": "用户11", "status": "启用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" } ]

 二、 利用bootstrapTable来设置要隐藏和显示的列：

$(function () {
//初始化table
  LoadingDataListOrderRealItems();
//隐藏列   $('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'GoodsId');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'OrderItemId');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'ShopName');         $('#tableOrderRealItems').bootstrapTable('hideColumn', 'SellerName'); }); 

三、 也可以直接使用hidden属性来设置：

columns: [
    {
          field: 'OrderId',
          title: '#',
          align: 'center',  }, {       field: 'OrderItemId',       title: 'OrderItemId',       align: 'left',       hidden:true,  }, {       field: 'GoodsId',       title: 'GoodsId',       align: 'left',       hidden:true,  }, {       field: 'OrderCode',       title: '订单编号',       align: 'left', } ]

四、如何获取数据：

方式一：表格中配置

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <!-- Latest compiled and minified Locales --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <table id="table" data-toggle="table" data-url="data/table.json" data-pagination="true" data-page-number=1 data-page-size=10 data-search=true data-show-refresh=true data-show-pagination-switch=true data-search-align="left" > <thead> <tr> <th data-field="id">id</th> <th data-field="name">name</th> <th data-field="price">price</th> <th data-field="column1">column1</th> <th data-field="column2">column2</th> <th data-field="column3">column3</th> <th data-field="column4">column4</th> </tr> </thead> </table> <script> $(function () { //隐藏列 $('#table').bootstrapTable('hideColumn', 'column4'); }) </script> </body> </html>

 方式二：JavaScript配置

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <!-- Latest compiled and minified Locales --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <button onclick="getData('table2')">点击获取数据</button> <table id="table" data-toggle="table"> <thead> <tr> <th data-field="id">id</th> <th data-field="name">name</th> <th data-field="price">price</th> <th data-field="column1">column1</th> <th data-field="column2">column2</th> <th data-field="column3">column3</th> <th data-field="column4">column4</th> </tr> </thead> </table> <script> function getData(url){ $('#table').bootstrapTable('destroy').bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器// //数据，初始化表格的内容Destroy the bootstrap table. url: 'data/' + url + '.json', pagination: true, pageList:[], pageNumber:1, pageSize:5,//每页显示的数量 paginationPreText:"上一页", paginationNextText:"下一页", paginationLoop:false, columns: [ { field: 'id', title:'id', valign: 'middle', },{ field: 'name', title:'name' },{ field: 'price', title:'price' },{ field: 'column1', title:'请求内容' },{ field: 'column2', title:'请求内容' },{ field: 'column3', title:'请求内容' },{ field: 'column4', title:'请求内容' } ] }) } </script> </body> </html>

[
    {
        "id": 0,
        "name": "Item 0",
        "price": "$0", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 1, "name": "Item 1", "price": "$1", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 2, "name": "Item 2", "price": "$2", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 3, "name": "Item 3", "price": "$3", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 4, "name": "Item 4", "price": "$4", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 5, "name": "Item 5", "price": "$5", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 6, "name": "Item 6", "price": "$6", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 7, "name": "Item 7", "price": "$7", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 8, "name": "Item 8", "price": "$8", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 9, "name": "Item 9", "price": "$9", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 10, "name": "Item 10", "price": "$10", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 11, "name": "Item 11", "price": "$11", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 12, "name": "Item 12", "price": "$12", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 13, "name": "Item 13", "price": "$13", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 14, "name": "Item 14", "price": "$14", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 15, "name": "Item 15", "price": "$15", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 16, "name": "Item 16", "price": "$16", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 17, "name": "Item 17", "price": 

转载于:https://www.cnblogs.com/samve/p/9757847.html