Bootstrap Table是基於 Bootstrap 的 jQuery 表格插件,透過(guò)簡(jiǎn)單的設(shè)置,就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè),以及編輯、匯出、過(guò)濾(擴(kuò)充)等等的功能。本文主要和大家介紹Bootstrap Table快速完美搭建後臺(tái)管理系統(tǒng)的方法,具有一定的參考價(jià)值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。
現(xiàn)在做的一個(gè)app管理以及後臺(tái)配置系統(tǒng),需要針對(duì)不同的城市作相應(yīng)的定制化的配置,對(duì)一些後臺(tái)數(shù)據(jù)也做一些展示和操作,所以每一個(gè)模組基本上都會(huì)有表格的展現(xiàn)形式,這樣做的好處就是直覺(jué)方便操作。對(duì)於用什麼table插件,無(wú)疑就是bootstrap table了,功能強(qiáng)大文檔完善,並且我們專案裡也是基於bootstrap佈局的,所以就選擇了他,接下來(lái)就貼一些項(xiàng)目代碼來(lái)展示(僅供參考),自己也做一下筆記。
首先是用到了bootstrap的Tab來(lái)切換不同的表格用於展示,切換選單程式碼如下:
<p class="report-count">被舉報(bào)次數(shù):${count}次</p> <ul class="report-btn nav nav-tabs" id="myTab" > <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待處理:${stateCountList[0]}次</a><i class=""></i></li> <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">舉報(bào)成立:${stateCountList[1]}次</a></li> <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報(bào)不成立:${stateCountList[2]}次</a></li> </ul>
相信對(duì)於bootstrap並不陌生,為每一個(gè)需要切換的標(biāo)籤加上{data-toggle="tab"},並且增加錨點(diǎn)用於匹配到對(duì)應(yīng)的切換的子內(nèi)容{錨點(diǎn):href="#padding" rel="external nofollow" } ,切換對(duì)應(yīng)的字內(nèi)容代碼如下:
<p class="table-view tab-content"> <p class=" tab-pane fade in active" id="padding"> <p class="table-header clear"> <c:forEach items="${complainCount1}" varStatus="i" var="c" > <p>${c.complain_reason}:${c.count}次</p> </c:forEach> </p> <p class="line addStyle"></p> <p> <table class="table"></table> </p> </p> <p class="tab-pane fade" id="success-report"> <p class="table-header clear"> <c:forEach items="${complainCount2}" varStatus="i" var="c" > <p>${c.complain_reason}:${c.count}次</p> </c:forEach> </p> <p class="line addStyle"></p> <p> <table class="table"></table> </p> </p> <p class="tab-pane fade" id="fail-report"> <p class="table-header clear"> <c:forEach items="${complainCount3}" varStatus="i" var="c" > <p>${c.complain_reason}:${c.count}次</p> </c:forEach> </p> <p class="line addStyle"></p> <p> <table class="table"></table> </p> </p> </p>
?透過(guò)給每一個(gè)需要切換子內(nèi)容元素設(shè)定對(duì)應(yīng)上述錨點(diǎn)的id{#padding},並且不要忘了將外層容器加(tab-content),將子元素容器加class(tab-pane fade in active),有active的是預(yù)設(shè)選取的。每個(gè)子內(nèi)容都有一個(gè)table元素,所以這裡就是我們需要的table,切換每個(gè)tab就會(huì)刷新顯示對(duì)應(yīng)的table資料。這裡我們採(cǎi)用動(dòng)態(tài)的生成table的方式來(lái)載入資料。
var $table=$('.table') function initTable(index){ $table.bootstrapTable({ url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請(qǐng)求數(shù)據(jù)地址url height: getHeight(), //獲取行高 striped: true, //設(shè)置為 true 會(huì)有隔行變色效果 search: true, //為true會(huì)有搜索框 showRefresh: true, //為true有刷新按鈕 showColumns: true, //是否顯示 內(nèi)容列下拉框 minimumCountColumns: 2,//當(dāng)列數(shù)小于此值時(shí),將隱藏內(nèi)容列下拉框 clickToSelect: true, //點(diǎn)擊行是checkbox或者rediobox選中 detailView: true, //設(shè)置為 true 可以顯示詳細(xì)頁(yè)面模式。table第一行會(huì)有+號(hào),點(diǎn)擊會(huì)出現(xiàn)更詳細(xì)的該行信息 detailFormatter: 'detailFormatter', //格式化詳細(xì)頁(yè)面模式的視圖。 pagination: true, //展示有分頁(yè) paginationLoop: false, //循環(huán)分頁(yè) sidePagination: 'server', //設(shè)置在哪里進(jìn)行分頁(yè),可選值為 'client' 或者 'server'。設(shè)置 'server'時(shí),必須設(shè)置 服務(wù)器數(shù)據(jù)地址(url)或者重寫(xiě)ajax方法 silentSort: false, //設(shè)置為 false 將在點(diǎn)擊分頁(yè)按鈕時(shí),自動(dòng)記住排序項(xiàng)。僅在 sidePagination設(shè)置為 server時(shí)生效19 escape: true, //轉(zhuǎn)義HTML字符串,替換 &, <, >, ", `, 和 ' 字符. searchOnEnterKey: true, //設(shè)置為 true時(shí),按回車觸發(fā)搜索方法,否則自動(dòng)觸發(fā)搜索方法 idField: 'systemId', //指定主鍵 maintainSelected: true, //設(shè)置為 true 在點(diǎn)擊分頁(yè)按鈕或搜索按鈕時(shí),將記住checkbox的選擇項(xiàng) toolbar: '#toolbar', //一個(gè)jQuery 選擇器,指明自定義的toolbar columns: [ {field: 'complain_reason', title: '舉報(bào)類型',align: 'center'}, {field: 'nick_name', title: '舉報(bào)人',align: 'center'}, {field: 'create_time', title: '舉報(bào)時(shí)間',formatter:'timeFormat' }, {field: 'complain_state', title: '舉報(bào)狀態(tài)',formatter:'stateFormat'} {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false} ] }); }
以上就是初始化table的函數(shù),傳index是為了切換時(shí)候請(qǐng)求不同的位址刷新不同的table,因?yàn)樵诿總€(gè)tab切換選單都有onclick事件函數(shù)freashTable(index),table的所有用到的配置我都在上述程式碼中做了註釋,想看跟詳細(xì)的設(shè)定請(qǐng)看官網(wǎng)配置(http://bootstrap-table.wenzhixin.net.cn/zh-cn /documentation/)。 columns配置每一行,field是對(duì)應(yīng)的每一列要顯示的字段key值,title對(duì)應(yīng)的是每一列的頭部,formatter是格式化每一列的自定義函數(shù),下面只展示時(shí)間格式化函數(shù)代碼:
function timeFormat(value,row,index){ value = row.modifyTime==null?value:row.modifyTime; return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' '); }
對(duì)應(yīng)的field為action的那一行就是操作按鈕了,格式化操作按鈕程式碼如下:
function actionFormatter(value, row, index) { return [ '<a class="update" href="javascript:;" onclick="editdateAction(\'' + row.systemId + '\')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ', '<a class="delete" href="javascript:;" onclick="deleteRowAction(\''+row.systemId+'\')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>' ].join(''); }
同時(shí)分頁(yè)bootstrap已經(jīng)提供了完整的配置(包括每頁(yè)顯示的行數(shù),分頁(yè)按鈕,總條數(shù)和總頁(yè)數(shù)等等)但是沒(méi)有跳到指定行,所以需要我們自己寫(xiě)他的樣式定位到相應(yīng)的分頁(yè)欄,不過(guò)他有??相關(guān)的方法提供,
##selectPage就是跳到指定頁(yè),我們可以自己系一個(gè)方法:function goPage(){ var page=$('#pageNum').val(); $table.bootstrapTable('selectPage',page) }在用其方法時(shí)候,要$table.bootstrapTable('selectPage',page)使用。 相關(guān)推薦:
使用React全家桶建構(gòu)一個(gè)後臺(tái)管理系統(tǒng)實(shí)例詳解
基於thinkphp的後臺(tái)管理系統(tǒng)範(fàn)本快速建置
Bootstrap Table快速建置後臺(tái)管理系統(tǒng)
以上是Bootstrap Table建置後臺(tái)管理系統(tǒng)程式碼分享的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門(mén)文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個(gè)步驟:安裝 Bootstrap。在 main.js 中導(dǎo)入 Bootstrap。直接在模板中使用 Bootstrap 組件??蛇x:自定義樣式??蛇x:使用插件。

創(chuàng)建 Bootstrap 分割線有兩種方法:使用 標(biāo)籤,可創(chuàng)建水平分割線。使用 CSS border 屬性,可創(chuàng)建自定義樣式的分割線。

在 Bootstrap 中驗(yàn)證日期,需遵循以下步驟:引入必需的腳本和樣式;初始化日期選擇器組件;設(shè)置 data-bv-date 屬性以啟用驗(yàn)證;配置驗(yàn)證規(guī)則(如日期格式、錯(cuò)誤消息等);集成 Bootstrap 驗(yàn)證框架,並在表單提交時(shí)自動(dòng)驗(yàn)證日期輸入。

答案:可以使用 Bootstrap 的日期選擇器組件在頁(yè)面中查看日期。步驟:引入 Bootstrap 框架。在 HTML 中創(chuàng)建日期選擇器輸入框。 Bootstrap 將自動(dòng)為選擇器添加樣式。使用 JavaScript 獲取選定的日期。

如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執(zhí)行所需的操作。

Web開(kāi)發(fā)設(shè)計(jì)是一個(gè)充滿潛力的職業(yè)領(lǐng)域。然而,這個(gè)行業(yè)也面臨著諸多挑戰(zhàn)。隨著越來(lái)越多的企業(yè)和品牌轉(zhuǎn)向網(wǎng)絡(luò)市場(chǎng),Web開(kāi)發(fā)者有機(jī)會(huì)展示他們的技能並在職業(yè)生涯中取得成功。然而,隨著對(duì)Web開(kāi)發(fā)需求的持續(xù)增長(zhǎng),開(kāi)發(fā)人員的數(shù)量也在增加,導(dǎo)致競(jìng)爭(zhēng)日益激烈。但令人振奮的是,如果你具備天賦和意願(yuàn),你總能找到新方法來(lái)創(chuàng)造獨(dú)特的設(shè)計(jì)和創(chuàng)意。作為一名Web開(kāi)發(fā)人員,你可能需要不斷尋找新的工具和資源。這些新工具和資源不僅能讓你的工作更加便捷,還能提升工作質(zhì)量,從而幫助你贏得更多的業(yè)務(wù)和客戶。 Web開(kāi)發(fā)的趨勢(shì)不斷變化,

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創(chuàng)建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

要設(shè)置 Bootstrap 框架,需要按照以下步驟:1. 通過(guò) CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務(wù)器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據(jù)需要編譯 Sass/Less;5. 導(dǎo)入定製文件(可選)。設(shè)置完成後,即可使用 Bootstrap 的網(wǎng)格系統(tǒng)、組件和樣式創(chuàng)建響應(yīng)式網(wǎng)站和應(yīng)用程序。
