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:‘密码认证‘,{ field: ‘availableSpace‘,title:‘智能卡认证‘,{ field: ‘totalSpace‘,title:‘个人空间配额‘,{ 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‘,‘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,index) { var result = ‘<button class="btn btn-action" title="激活USBKEY认证" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>‘ return result; } </script>

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

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

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

<!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>

<!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:"上一页",columns: [ { field: ‘id‘,title:‘id‘,},{ field: ‘name‘,title:‘name‘ },{ field: ‘price‘,title:‘price‘ },{ field: ‘column1‘,title:‘请求内容‘ },{ field: ‘column2‘,{ field: ‘column3‘,{ 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",{ "id": 2,"name": "Item 2","price": "$2",{ "id": 3,"name": "Item 3","price": "$3",{ "id": 4,"name": "Item 4","price": "$4",{ "id": 5,"name": "Item 5","price": "$5",{ "id": 6,"name": "Item 6","price": "$6",{ "id": 7,"name": "Item 7","price": "$7",{ "id": 8,"name": "Item 8","price": "$8",{ "id": 9,"name": "Item 9","price": "$9",{ "id": 10,"name": "Item 10","price": "$10",{ "id": 11,"name": "Item 11","price": "$11",{ "id": 12,"name": "Item 12","price": "$12",{ "id": 13,"name": "Item 13","price": "$13",{ "id": 14,"name": "Item 14","price": "$14",{ "id": 15,"name": "Item 15","price": "$15",{ "id": 16,"name": "Item 16","price": "$16",{ "id": 17,"name": "Item 17","price": "$17","column2": "C 20",