django：bootstrap table加载django返回的数据
生活随笔
收集整理的這篇文章主要介紹了
django：bootstrap table加载django返回的数据
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?bootstrap table加載表格數(shù)據(jù)有兩類方式：
一種通過(guò)data屬性的方式配置，一種是javascipt方式配置
這里看js配置方式：
1、當(dāng)數(shù)據(jù)源為.json文件時(shí)
url參數(shù)寫上json文件的地址就行，但是json文件格式必須為json格式(2種):
a:一種為json數(shù)組格式?[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，同時(shí)sidePagination 需要為client或者直接注釋掉該參數(shù)，只有這樣前臺(tái)的分頁(yè)插件才能正常工作；
但是不能為server，否則前臺(tái)提示：沒有找到匹配的記錄
[ { "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" } ]?
?
b:另一種為json對(duì)象格式，必須要有total和rows兩個(gè)key，{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
且鍵的名字必須與下方columns的field值一樣，才能讀取到數(shù)據(jù),同時(shí)?sidePagination 參數(shù)必須要為server，但是如果后臺(tái)沒有處理的話，前臺(tái)會(huì)在第一頁(yè)顯示全部數(shù)據(jù)，為client時(shí)，前臺(tái)會(huì)提示：沒有找到匹配的記錄。
?
{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}] }?
?
{% load staticfiles %} <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>項(xiàng)目列表</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script></head><body><table id="mytab" class="table table-hover"></table></body><script>var aaa = JSON.parse('{{ datalist|safe }}');alert(aaa);</script><script type="text/javascript">{#var Datalist ='{{ datalist|safe }}'; // 獲取后臺(tái)傳來(lái)的數(shù)據(jù)需要加上safe過(guò)濾#} {#datalist= [[93,93,0,100.0],[20,23,26,29]]#}var aaa = JSON.parse('{{ datalist|safe }}');alert(aaa);$('#mytab').bootstrapTable({{#全部參數(shù)#}url: "{% static 'guchen_array.json' %}", //請(qǐng)求后臺(tái)的URL（*）或者外部json文件，json內(nèi)容為json數(shù)組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}] //且鍵的名字必須與下方columns的field值一樣，同時(shí)sidePagination需要設(shè)置為client或者直接注釋掉，這樣前臺(tái)才能讀取到數(shù)據(jù)，且分頁(yè)正常。 //當(dāng)json文件內(nèi)容為：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}時(shí)，//分頁(yè)要寫為server，但是server如果沒有處理的話,會(huì)在第一頁(yè)顯示所有的數(shù)據(jù)，分頁(yè)插件不會(huì)起作用
{#url: "{% static 'guchen_obj.json' %}",#}
dataType: "json",method: 'get', //請(qǐng)求方式（*） toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*） pagination: true, //是否顯示分頁(yè)（*） sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）#} sidePagination: "client", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*） pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)（*） pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*） search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺意義不大 strictSearch: true,showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數(shù) clickToSelect: true, //是否啟用點(diǎn)擊選中行 {#height: 500, //行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度#} uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列 showToggle: false, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細(xì)視圖 detailView: true, //是否顯示父子表 columns: [{field: 'id',title: '項(xiàng)目名'},{field: 'name',title: '數(shù)據(jù)庫(kù)表名'},{field: 'price',title: '總數(shù)'},{field: 'operate',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' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";return result;}</script></html>
頁(yè)面展示如下：
?
?下一步將外部json文件修改為使用django后臺(tái)傳遞的數(shù)據(jù)。
? 2、當(dāng)數(shù)據(jù)源為django后臺(tái)返回時(shí)
改動(dòng)只有url參數(shù)變了。
{% load staticfiles %} <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>項(xiàng)目列表</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script></head><body><table id="mytab" class="table table-hover"></table></body>{# <script>#}{#var aaa = JSON.parse('{{ datalist|safe }}');#} {# aaa = {{ datalist|safe }}#} {# alert(aaa[0]);#} {# </script>#}<script type="text/javascript">{#var Datalist ='{{ datalist|safe }}'; // 獲取后臺(tái)傳來(lái)的數(shù)據(jù)需要加上safe過(guò)濾#} {#datalist= [[93,93,0,100.0],[20,23,26,29]]#}var aaa = JSON.parse('{{ datalist|safe }}');alert(aaa);$('#mytab').bootstrapTable({{#全部參數(shù)#}{#url: "{% static 'guchen1.json' %}", //請(qǐng)求后臺(tái)的URL（*）或者外部json文件，json內(nèi)容必須為json數(shù)組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]#} {# //且鍵的名字必須與下方columns的field值一樣，才能讀取到數(shù)據(jù)#} url:"http://127.0.0.1:8000/getdata",dataType: "json",method: 'get', //請(qǐng)求方式（*） toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*） pagination: true, //是否顯示分頁(yè)（*） sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）#} sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*） pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)（*） pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*） search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺意義不大 strictSearch: true,showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數(shù) clickToSelect: true, //是否啟用點(diǎn)擊選中行 {#height: 500, //行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度#} uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列 showToggle: false, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細(xì)視圖 detailView: true, //是否顯示父子表 columns: [{field: 'id', //返回?cái)?shù)據(jù)rows數(shù)組中的每個(gè)字典的鍵名與此處的field值要保持一致title: '項(xiàng)目名'},{field: 'name',title: '數(shù)據(jù)庫(kù)表名'},{field: 'price',title: '總數(shù)'},{field: 'operate',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' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";return result;}</script></html>?
這里要注意的是django后臺(tái)的返回必須是json，且必須要有total和rows兩個(gè)key,同樣rows中的鍵名需要與columns中的fileds值一樣
def getdata(request):datalist = {"total": 3,"rows": [{"id": 1,"name": "mdm","price": 200}]}return HttpResponse(json.dumps(datalist))?
注意：這里加載表格頁(yè)面用的是/bootstrapTable這個(gè)url,獲取表格數(shù)據(jù)用的是getdata這個(gè)視圖
url(r'^bootstrapTable/',views.bootstrapTable),url(r'^getdata/',views.getdata),
?參考：https://www.jianshu.com/p/b5ca011a0d9c
轉(zhuǎn)載于:https://www.cnblogs.com/gcgc/p/11136889.html
總結(jié)
以上是生活随笔為你收集整理的django：bootstrap table加载django返回的数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： git 技能图
- 下一篇： 【UOJ 92】有向图的强连通分量