前期準備

創建項目

創建新的Django項目，記錄所有筆記，同時創建這章所講的bootstrapTable的App

合理規劃項目文件，創建一些必要的文件夾或文件

  • 在bootstrapTable目錄下創建urls.py文件
  • 在項目根目錄下創建靜態文件夾static
  • 在static目錄下創建App名稱文件夾
  • 在templates目錄下創建App名稱文件夾

項目配置

在D:Django
ote
otesettings.py的最後添加靜態文件代碼

STATICFILES_DIRS = [
os.path.join(BASE_DIR, static)
]

設置路由，採用include拼接

將D:Django
ote
oteurls.py文件中的代碼刪掉，重新寫

from django.urls import path, include

urlpatterns = [
path(bootstrapTable/, include(bootstrapTable.urls))
]

在D:Django
oteootstrapTableurls.py文件中寫入以下代碼

from django.urls import path
from . import views

app_name = bootstrapTable
urlpatterns = [
path(, views.bootstrapTable, name=bootstrapTable)
]

定義視圖

在D:Django
oteootstrapTableviews.py文件中定義視圖函數

from django.shortcuts import render

# Create your views here.
def bootstrapTable(request):
return render(request,bootstrapTable/index.html)

編寫模板

在D:Django
ote emplatesootstrapTableindex.html編寫html代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>bootstrapTable</h1>
</body>
</html>

運行項目

點擊右上角綠色按鈕，運行項目。出現這個表示項目正常啟動，點擊下面的網址即可進入

注意網址後面需要加上bootstrapTable 。

下載所需要的包

Bootstrap 中文網：bootcss.com/

Bootstrap Table 官網：bootstrap-table.com/

JQuery 官網：jquery.com/

並放置static文件中，至此，前期的準備工作全部完成

bootstrapTable API

live.bootstrap-table.com 進入該網址後，點擊Load Examples，顯示官方所有的API，想看哪個就點哪個，進入在線編輯頁面，左側是源代碼，也可以自己修改之後Run，右側是效果圖

bootstrapTable 入門

打開D:Django
ote emplatesootstrapTableindex.html文件

引入css,js引用相關組件，並定義一個空的表格，在js裡面初始化的方式來使用bootstrapTable組件。

{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{# 核心組件 bootstrap JQuey#}
<link href="{% static bootstrapTable/bootstrap-3.3.7-dist/css/bootstrap.min.css %}" rel="stylesheet"/>
<script src="{% static bootstrapTable/jquery/jquery-3.2.1.min.js %}"></script>
<script src="{% static bootstrapTable/bootstrap-3.3.7-dist/js/bootstrap.min.js %}"></script>
{# bootstrap-table 插件#}
<link href="{% static bootstrapTable/bootstrap-table-master/dist/bootstrap-table.min.css %}" rel="stylesheet"/>
<script src="{% static bootstrapTable/bootstrap-table-master/dist/bootstrap-table.min.js %}"></script>
<script src="{% static bootstrapTable/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js %}"></script>
<title>bootstrapTable實例</title>
</head>
<body>
<div class="container">
<h1>bootstrapTable實例</h1>
<hr/>

<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>

<table id="table"></table>
</div>
</body>
<script>
var url = https://examples.wenzhixin.net.cn/examples/bootstrap_table/data;
var columns = [
{
field: id,
title: ID,
}, {
field: name,
title: 姓名
}, {
field: price,
title: 價格
},
];
$("#table").bootstrapTable({
toolbar: #toolbar, //自定義工具按鈕
url: url, //請求後台的URL（*）
method: get, //請求方式（*）
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 20, 50, 100, All], //可供選擇的每頁的行數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化載入第一頁，默認第一頁
search: true, //是否顯示錶格搜索
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
columns: columns, //列參數
detailView: true, //是否顯示父子表
//展開行事件
onExpandRow: function (index, row, $detail) {
zi_table(index, row, $detail); //回調函數
},
});

//定義子表函數
function zi_table(index, row, $detail) {
var fzr_table = $detail.html(<table></table>).find(table);
$(fzr_table).bootstrapTable({
url: url,
columns: columns,
})
}
</script>
</html>

上面是部分的參數，在columns參數裡面其實也有很多的參數需要設置，比如列的排序，對齊，寬度等等。看看官方API就能搞定。

注意幾個參數：

1、toolbar: #toolbar,

頂部左側是自定義的工具組，右側是通過參數添加的工具組，在html中自定義工具組toolbar，初始bootstrapTable時，使用toolbar屬性來引用，這樣兩個工具組在同一行，如果不引用，則是上下排列可以理解為，引用之後，自定義的工具組就屬於bootstrapTable元素，如果不引用，自定義的工具組和bootstrapTable是兩個獨立的元素

2、url: url

這裡我直接調用的官方提供的數據

3、pageList: [10, 20, 50, 100, All]

當引用了中文包後，篩選ALL會出現亂碼

<script src="{% static bootstrapTable/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js %}"></script>

4、detailView: true

開啟父子表，需要配合onExpandRow展開行事件，其實就是在事件中重新初始化一個表

推薦閱讀：

相关文章