如果您想要使用bootstrap建立一個酷炫的Table,這裡有一些推薦的項目可以參考
Name | Desc |
---|---|
可以用HTML也可以用JS來產生資料
相信大家或多或少有瀏覽過此網頁
而點擊View Source出來的東西卻不是所預期的…
首先 https://examples.bootstrap-table.com 這個是github page所生成,它位於
資料夾的分類和網站基本差不多,例如您可以找到這個檔案。
https://github.com/wenzhixin/bootstrap-table/blob/gh-pages/docs/api/methods/index.html
(以上動作其實直接在 網頁 上檢查HTML也是可以),你會發現這個內容
<p><strong>Example:</strong> <a href="https://examples.bootstrap-table.com/#methods/load.html">Load</a></p>
https://examples.bootstrap-table.com
這其實是作者的另一個專案,專門寫EXAMPLE的
接著您找尋分支gh-pages
裡面的資料夾和網站上的差不多,您可以找到該檔案就能真的知道網站上的demo的source是怎麼出來的,
例如:
https://github.com/wenzhixin/bootstrap-table-examples/blob/f9e66185/methods/load.html
了解了這個之後,其實以下的東西您可看可不看😆,直接看代碼比較快!
範例 (您也可以到這邊 直接運行,來觀看結果)
1<!DOCTYPE html>
2<html>
3<head>
4 <!-- bootstrap -->
5 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
6 <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
7
8 <!-- bootstrap-table-->
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" integrity="sha512-5RNDl2gYvm6wpoVAU4J2+cMGZQeE2o4/AksK/bi355p/C31aRibC93EYxXczXq3ja2PJj60uifzcocu2Ca2FBg==" crossorigin="anonymous" />
10 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js" integrity="sha512-Wm00XTqNHcGqQgiDlZVpK4QIhO2MmMJfzNJfh8wwbBC9BR0FtdJwPqDhEYy8jCfKEhWWZe/LDB6FwY7YE9QhMg==" crossorigin="anonymous"></script>
11 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js" integrity="sha512-cAMZL39BuY4jWHUkLWRS+TlHzd/riowdz6RNNVI6CdKRQw1p1rDn8n34lu6pricfL0i8YXeWQIDF5Xa/HBVLRg==" crossorigin="anonymous"></script>
12
13 <!-- font-awesome -->
14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
15 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
16
17 <!-- jquery -->
18 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
19
20 <style>
21 html {
22 font-family: sans-serif;
23 line-height: 1.15;
24 -webkit-text-size-adjust: 100%;
25 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
26 }
27
28 h1, h2, h3, h4, h5, h6 {
29 margin-top: 0;
30 margin-bottom: 0.5rem;
31 color: #004a88;
32 text-align: center;
33 }
34
35 .table-blue {
36 font-family: Arial, Helvetica, sans-serif;
37 border-collapse: collapse;
38 width: 100%;
39 }
40
41 .table-blue td, .table-blue th {
42 border: 1px solid #ddd;
43 padding: 8px;
44 }
45
46 <!-- .table-blue tr:nth-child(even){background-color: #f2f2f2;} -->
47
48 .table-blue tr:hover {background-color: #ddd;}
49
50 .table-blue th {
51 background-color: #004a88;
52 font-size: larger;
53 font-weight: bold;
54 padding-top: 5px;
55 padding-bottom: 5px;
56 text-align: left;
57 color: white;
58 }
59
60 </style>
61</head>
62
63<body>
64<!-- 更多的選項請參考Table-options: https://bootstrap-table.com/docs/api/table-options/
65data-show-fullscreen="true"
66data-show-toggle 一列整合在一起的功能(會多出這個圖標可以按)
67 data-single-select="true"
68 data-click-to-select = "true"
69-->
70<table id="myTable" class="table table-striped table-blue"
71 data-toggle="table"
72 data-search="true"
73 data-search-highlight="true"
74 data-show-refresh="true"
75 data-show-toggle="true"
76 data-show-columns="true"
77 data-show-export="true"
78 data-minimum-count-columns="2"
79 data-show-pagination-switch="true"
80 data-pagination="true"
81 data-id-field="id"
82 data-page-list="[10, 25, 50, 100, ALL]"
83 data-show-footer="false"
84 data-side-pagination="client"
85 data-url="https://jsonplaceholder.typicode.com/photos">
86 <thead>
87 <tr>
88 <th data-sortable="true" data-field="id">Id</th>
89 <th data-sortable="true" data-field="title">Title</th>
90 <th data-sortable="true" data-field="url">URL</th>
91 <th data-sortable="true" data-formatter="imageFormatter" data-field="thumbnailUrl">Thumbnail URL</th>
92 </tr>
93 </thead>
94 </table>
95</body>
96</html>
97
98<script>
99 function imageFormatter(value, row) {
100 return '<img src="'+value+'" style="width:60px;height:60px" loading="lazy" />';
101 }
102</script>
103
71-85列有很多選項 ,您可以視情況來調整
另外它有一些extension的項目,
具體的內容您可以上cdnjs視情況來加入
像是上面的export的選項,如果要使用就必須加入export的js
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js"></script>
以上的資料 data-url="https://jsonplaceholder.typicode.com/photos"
來至:
如果您點進去看,會發現其實裡面有一個列中有5個欄位
以上的範例,只有提供4個而已,至於要哪些欄位,可以透過
data-field
來指定,其中data-field中放的名稱要是檔案中的欄位名稱
$("#tb_user").bootstrapTable({
columns: [
{
checkbox: true,
},
{
field: 'username',
title: '用户名',
width: '10%',
align: 'center',
editable: {
type: 'text',
placement: 'right',
emptytext: "...",
validate: function (v) {
if (!v) return 'username is null';
}
},
},
{
field: 'password',
title: '密码',
editable: {
type: 'text',
placement: 'right',
validate: function (v) {
if (!v) return 'password is null';
}
},
},
],
// 👇👇👇👇below is options👇👇👇👇
idField: "id",
striped: true,
url: 'json/data1.json',
cache: false,
pagination: true,
sortable: false,
sortOrder: "asc",
sidePagination: "client",
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
search: false,
strictSearch: false,
showColumns: false,
showRefresh: false,
minimumCountColumns: 2,
clickToSelect: false,
// height: 500,
showToggle: false,
cardView: false,
detailView: false,
onLoadSuccess: function () {
}
});
除了column以外,還有table-options
裡面的東西都可以放
舉idField來說
idField
- Attribute: data-if-field
- Type: string
- ...
Attribute是給html用,例如
<table data-id-field="id"></table>
至於header: idField
這是用在js
$("#tb_user").bootstrapTable({
columns: [
],
// 👇👇👇👇below is options👇👇👇👇
idField: "id",
});
其他的東西以此類推
<script src="extensions/editable/bootstrap-table-editable.js"></script>
裡面分為5大類
這個東西比較無關,基本上就是class的屬性而已,因為bootstrap本身就有提供table屬性,也可以去參考 bootstrap table
客製化按鈕
在您的table定義
<table data-buttons="buttons"
data-show-button-text="true"
></table>
function buttons () {
return {
btnUsersAdd: {
text: 'Highlight Users', // 僅當data-show-button-text=true才會有效
icon: 'fa-users',
event: function () {
alert('Do some stuff to e.g. search all users which has logged in the last week')
},
attributes: {
title: 'Search all users which has logged in the last week'
}
},
btnAdd: {
text: 'Add new row',
icon: 'fa-plus',
attributes: {
title: 'Add a new row to the table'
},
event: {
'click': () => {alert('Do some stuff to e.g. add a new row')},
'mouseenter': () => { },
'mouseleave': () => { }
}
}
}
}
所謂的Methods指的是表生成以後,可以利用該表來訪問或做某些事情,語法
$('#table').bootstrapTable(‘method’, parameter)
Append the data to table.
$table.bootstrapTable(‘append’, data)
Get the loaded data of table at the moment that this method is called
const jsonData = JSON.stringify(table.bootstrapTable('getData', {
useCurrentPage: false, // 全部分頁都要進來
includeHiddenRows: true, // 包含隱藏的欄位
unfiltered: true // true 全部的資料沒有經過篩選
}))
詳可參考
Load the data to table, the old rows will be removed.
$table.bootstrapTable(‘getData’)
本地化,可以用給定的js來達成目的,您可以參考官方文檔,如果連結有異動,則可以瀏覽
https://github.com/wenzhixin/bootstrap-table/tree/347897f7/src/locale
第一步先導入css,之後看您是要在html中改還是js改
HTML
<table data-toggle="table" data-locale="en-US"> </table>
JS
$('#table').bootstrapTable({
locale: 'en-US'
})
demo網址 | issue# |
---|---|
欄位排序 | #5217 |
排序搭配js | #5642 |
點擊+號可以出現圖片 | #5143 |
請參考
https://github.com/hhurz/tableExport.jquery.plugin#installation
Name | Desc |
---|---|
有了這個才可以支持export的選項(多數的格式csv, xml, json, txt…如果有特殊的(pdf, png…)還是要加載其他的js才能辦到) | |
Screenshots with JavaScript 匯出png的時候會用到,您可能會納悶,匯出png得到的是什麼東東🤔 其實匯出png就是截圖當前的table而已😆 | |
<head>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet">
<script defer src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>
<script>
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
];
$(document).ready(function() {
var table = $('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
table.column( 5 )
.data()
.filter( function ( value, index ) {
return value > 8000 ? true : false;
} );
} );
</script>
<table id="example" class="display" width="100%"></table>
您可以使用預設HTML中提供的方法 multiple | tag_optgroup ,但是外觀不太好看。
我會推薦用以下的第三方專案來解決
可以npm或cdn都行 下載
cdn
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
npm
$ npm install multiple-select
1<head>
2 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
3 <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">
4 <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
5</head>
6
7<style>
8 .ms-choice>span {
9 position: initial; // 和某些css有衝突,所以強制更改
10 overflow: initial;
11 }
12 button.ms-choice {
13 height: 2rem;
14 }
15</style>
16
17<select id="mySelect">
18 <option value="1">January</option>
19 <option value="2">February</option>
20 <option value="3">March</option>
21</select>
22
23<script>
24 $('#mySelect').multipleSelect()
25</script>
可以覆寫他css的屬性
24行: 注意最後一定要初始化才會成功
也可以給於額外的options
如果您想要一列有很多個勾選框,如下
item 1 ☑ item 2 ☐ item 3 ☐
item 4 ☑ item 5 ☐ item 6 ☐
item 7 ☐ item 8 ☑ item 98765... ☐
...
$("#selectTag").multipleSelect({
width: 600,
multiple: true,
multipleWidth: 160,
dropWidth: "728"
})
98765...
那就表示寬度不夠要增加才可以完整顯示