BootstrapTable的使用教程

時間 2019-11-17

標籤 bootstraptable 使用教程简体版

原文原文鏈接

官方網站：
http://bootstrap-table.wenzhixin.net.cn/
參考文檔：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
中文文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下載bootstrap Table插件所必須的js，地址：https://github.com/wenzhixin/bootstrap-tablejavascript

在開發項目的時候，發現了一款JS組件系列——表格組件神器
，官方文檔也比較簡單，總結了一些常遇到的問題css

一：實現一個簡單的表格和分頁

圖片.png

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="../../../css/bootstrap.min.css">
        <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    </head>

    <body>
        <table id="mytab" class="table table-hover"></table>
        <script> $('#mytab').bootstrapTable({ url: 'data1.json', queryParams: "queryParams", toolbar: "#toolbar", sidePagination: "true", striped: true, // 是否顯示行間隔色 //search : "true", uniqueId: "ID", pageSize: "5", pagination: true, // 是否分頁 sortable: true, // 是否啓用排序 columns: [{ field: 'id', title: '登陸名' }, { field: 'name', title: '暱稱' }, { field: 'price', title: '角色' }, { field: 'price', title: '操做', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ] }); //操做欄的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } </script>
    </body>

</html>

json數據：html

[  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "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"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]

二：說一說BootstrapTable的屬性一覽表

 url: '/Home/GetDepartment', //請求後臺的URL（*） method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪一個容器 striped: true, //是否顯示行間隔色 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: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大 strictSearch: true, showColumns: true, //是否顯示全部的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少容許的列數 clickToSelect: true, //是否啓用點擊選中行 height: 500, //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度 uniqueId: "ID", //每一行的惟一標識，通常爲主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 columns: [{ }] url: '/Home/GetDepartment', //請求後臺的URL（*） method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪一個容器 striped: true, //是否顯示行間隔色 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: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大 strictSearch: true, showColumns: true, //是否顯示全部的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少容許的列數 clickToSelect: true, //是否啓用點擊選中行 height: 500, //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度 uniqueId: "ID", //每一行的惟一標識，通常爲主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 columns: [{ }]

三：bootstrap-table如何設置首行變色，其餘行不變色

其實很簡單，在代碼之中找到首行對應的代碼，而後添加屬性便可java

圖片.png

#mytab thead{background: #5488c4;} #mytab thead{background: #5488c4;}

四：添加刪除數據以後表格自動刷新加載

$table.bootstrapTable('refresh');

五：如何設置bootstrap-table插件的隔行變色的顏色

圖片.png

代碼樣式以下jquery

<style> #mytab tr:nth-child(even){ background:#f4f8fb; } </style>
、

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。