bootstrap Table的使用方法

来源:https://www.cnblogs.com/alongup/archive/2018/07/17/9324670.html
-Advertisement-
Play Games

1.官網 url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文檔包含了表格屬性、列屬性、事件、方法等等. 2.引入庫 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js裡面定義就 ...


1.官網

　　url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/　　文檔包含了表格屬性、列屬性、事件、方法等等.

2.引入庫

　　只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js裡面定義就可以使用預設有寫data-toggle=”table”,data-toggle應該知道吧，常用的有”tooltip、popover等等”，這邊就不說了.

3.定義住表單

1 <!-- 主表單 -->
2     <table id="datatable"></table>
3 <!-- /主表單 -->

3.表格的增刪改查(功能很完整)　

  1 <!DOCTYPE HTML>
  2 <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  3 <head th:include="@{import} :: head"></head>
  4 <style type="text/css">
  5     #select-form{
  6         width: 100%;
  7         height: 50px;
  8         border: 1px #ddd solid;
  9         padding: 5px;
 10         min-width: 600px;
 11     }
 12     #select-form label{
 13         width: 250px;
 14         height: 40px;
 15         padding: 6px;
 16     }
 17     #select-form label input{
 18         width: 200px;
 19         height: 30px;
 20         outline: none;
 21         font-size: 12px;
 22         text-indent: 20px;
 23         font-weight: normal;
 24         border-radius: 3px;
 25         border: none;
 26         border: 1px #ddd solid;
 27     }
 28     #select-form button{
 29         outline: none;
 30         cursor: pointer;
 31     }
 32 </style>
 33 <body>
 34 
 35 <!-- nav -->
 36 <section th:include="@{import} :: nav"></section>
 37 
 38 <!-- container start -->
 39 <div class="wrapper">
 40 <div class="container-fluid" id="main-container">
 41     <div class="row">
 42         <!-- section of left menu -->
 43         <div class="col-md-1 col-sm-12" th:include="@{import} :: leftMenu"></div>
 44         <!-- /section of left menu -->
 45         
 46         <!-- section of main 主表單區域 -->
 47         <section class="col-md-11 col-sm-12 box">
 48             <!-- 用於顯示警告信息 -->
 49             <div id="alert"></div>
 50             
 51             <!-- 表單按鈕 -->
 52             <div id="toolbar" class="btn-group btn-group-sm">
 53                 <button id="btn_add" type="button" class="btn btn-default">
 54                     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
 55                 </button>
 56                 <button id="btn_edit" type="button" class="btn btn-default" disabled="true">
 57                     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
 58                 </button>
 59                 <button id="btn_delete" type="button" class="btn btn-default" disabled="true">
 60                     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
 61                 </button>
 62             </div>
 63             <!-- /表單按鈕 -->
 64             <!--搜索框-->
 65             <div id="select-form">
 66                 <label class="control-label">
 67                     <span>名稱：</span><input type="text" class="select-name" placeholder="請輸入用戶名稱"/>
 68                 </label>
 69                 <label class="control-label">
 70                     <span>描述：</span><input type="text" class="select-description" placeholder="請輸入描述"/>
 71                 </label>
 72                 <button class="btn btn-default btn-sm btn-search bt">搜索</button>
 73             </div>
 74             <!--/搜索框-->
 75             <!-- 主表單 -->
 76             <table id="datatable"></table>
 77             <!-- /主表單 -->
 78 
 79             <!-- 新增/編輯 表單 -->
 80             <div class="modal fade" id="datatable-editor" tabindex="-1" role="dialog" aria-labelledby="datatable-editor">
 81                 <div class="modal-dialog" role="document">
 82                     <div class="modal-content">
 83                         <div class="modal-header">
 84                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 85                                 <span aria-hidden="true">&times;</span>
 86                             </button>
 87                             <h4 class="modal-title" id="myModalLabel">編輯表單</h4>
 88                         </div>
 89                         <div class="modal-body">
 90                             <form class="form-horizontal" id="form">
 91                                 <input type="hidden" name="id" id="id" />
 92                                 <input type="hidden" name="_method" id="_method" />
 93                                 <div class="form-group">
 94                                     <label for="name" class="col-md-2 control-label">名稱</label>
 95                                     <div class="col-md-10">
 96                                         <input type="text" name="name" id="name" class="form-control" placeholder="名稱">
 97                                     </div>
 98                                 </div>
 99                                 <div class="form-group">
100                                     <label for="description" class="col-md-2 control-label">描述</label>
101                                     <div class="col-md-10">
102                                         <input type="text" name="description" id="description" class="form-control" placeholder="描述">
103                                     </div>
104                                 </div>
105                             </form>
106                         </div>
107                         <div class="modal-footer">
108                             <button type="button" id="btn-ok" class="btn btn-primary pt-close">保存</button>
109                             <button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
110                         </div>
111                     </div>
112                 </div>
113             </div>
114             <!-- /新增/編輯 表單 -->
115             
116             <!-- 刪除確認 -->
117             <div class="modal fade" id="datatable-confirm" tabindex="-1" role="dialog" aria-labelledby="datatable-confirm">
118                 <div class="modal-dialog" role="document">
119                     <div class="modal-content">
120                         <div class="modal-header">
121                             <h4 class="modal-title">刪除確認</h4>
122                         </div>
123                         <div class="modal-body">
124                             <p>確認刪除以下數據,此操作不可恢復?</p>
125                             <ul class="list-group" id="delete-list"></ul>
126                         </div>
127                         <div class="modal-footer">
128                             <button type="button" id="btn-ok" class="btn btn-primary pt-close">確認</button>
129                             <button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
130                         </div>
131                     </div>
132                 </div>
133             </div>
134             <!-- /刪除確認 -->
135         </section>
136         <!-- /section of main -->
137     </div>
138 </div>
139 </div>
140 <!--/.container end-->
141 
142 <script th:inline="javascript">
143 $(document).ready(function() {
144     var tableEditor = $("#datatable-editor");
145     var URL = {
146         insert : {url : "/system/role/roles" , method : "POST"},
147         update : {url : "/system/role/roles" , method : "PUT"},
148         "delete" : {url : "/system/role/roles/batch" , method : "DELETE"}
149     }
150     
151     var getEditorInsert = function() {
152         tableEditor.find("#_method").val(URL.insert.method);
153         var url = URL.insert.url;
154         return {editor : tableEditor, url : url};
155     }
156     
157     var getEditorUpdate = function(id) {
158         tableEditor.find("#_method").val(URL.update.method);
159         var url = URL.update.url + "/" + id;
160         return {editor : tableEditor, url : url};
161     }
162     
163     var getEditorDelete = function() {
164         var url = URL["delete"].url;
165         return {editor : tableEditor, url : url , method: URL["delete"].method};
166     }
167     
168     /* 表格操作 */
169     //    根據選中項目數切換按鈕點擊狀態
170     var changeToolbarStatus = function(row,tr) {
171         var select = $('#datatable').bootstrapTable('getSelections');
172         $("#toolbar").find("#btn_edit").attr("disabled",select.length != 1);
173         $("#toolbar").find("#btn_delete").attr("disabled",select.length == 0);
174     }
175     // 表格屬性
176     var initTable = function() {
177         $('#datatable').bootstrapTable({
178             showColumns: true,
179             toolbar: "#toolbar",
180             iconSize: "sm",
181             idField : "id",
182             clickToSelect: true,
183             
184             url: "roles",
185             contentType: "application/x-www-form-urlencoded",
186             dataField : "rows",
187             queryParams: function(params) {
188                 params["std.offset"] = params.offset;
189                 params["std.limit"] = params.limit;
190                 return params;
191             },
192             
193             sidePagination: "server",
194             pagination: true,
195             pageNumer: 1,
196             pageSize: 20,
197             pageList: [20,50,100],
198             
199             columns:[
200                 {
201                     title:'',
202                     field:'_select',
203                     checkbox:true,
204                     align:'center'
205                 },
206                 {
207                     title: "ID",
208                     field: "id",
209                     visible: false
210                 },
211                 {
212                     title: "名稱",
213                     field: "name"
214                 },
215                 {
216                     title: "描述",
217                     field: "description"
218                 }
219             ],
220             
221             onCheck: changeToolbarStatus,
222             onUncheck: changeToolbarStatus
223         });
224     }
225     initTable();
226     
227     
228     // ajax提交數據後的操作
229     var onSubmitOver = function(data) {
230         if(data.success)
231             $("#datatable").bootstrapTable("refresh");
232         else {
233             var html = '<div class="alert alert-warning alert-dismissible fade in" role="alert">';
234             html += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
235             html += '<p>' + data.errorMsg + '</p>';
236             html += '</div>';
237             $("#alert").append(html);
238         }    
239     }
240     
241     // 用於打開編輯表單
242     var openEditor = function(editor,onBeforeOpen) {
243         return new Promise(function(resolve,reject) {
244             if(onBeforeOpen)
245                 onBeforeOpen(editor.editor.find("form"));
246             
247             editor.editor.modal('show');
248             editor.editor.find("input[type=text]:first")[0].focus();
249             
250             editor.editor.find("#btn-ok").on("click",function() {
251                 var data = editor.editor.find("form").serializeArray();
252                 resolve(data);
253                 editor.editor.modal("hide");
254             });
255             editor.editor.find("#btn-cancel").on("click",function() {
256                 reject();
257             });
258             
259         });
260     }
261     // 用於對第一個輸入框聚焦
262     tableEditor.on("shown.bs.modal",function() {
263         tableEditor.find("input[type=text]:first")[0].focus();
264     });
265     // 關閉時清除form內容
266     tableEditor.on("hidden.bs.modal",function() {
267         tableEditor.find(":input").not(':button,:submit,:reset').val("");
268     });
269     
270     // 打開新增表單
271     $("#toolbar").find("#btn_add").on("click",function() {
272         var editor = getEditorInsert();
273         openEditor(editor).then(function(data) {
274             var submitParam = {};
275             for(idx in data) {
276                 var item = data[idx];
277                 if(item.name != "id") {
278                     submitParam[item.name] = item.value;
279                 }
280             }
281             $.post(editor.url,submitParam,onSubmitOver,'json');
282         });
283     });    
284     
285     // 打開編輯表單
286     $("#toolbar").find("#btn_edit").on("click",function() {
287         var select = $('#datatable').bootstrapTable('getSelections');
288         var line = select[0];
289         
290         var beforeOpen = function(form) {
291             $.each(line,function(key,value) {
292                 form.find("#" + key).val(value);
293             });
294         }
295         var editor = getEditorUpdate(line.id);
296         openEditor(editor,beforeOpen).then(function(data) {
297             var submitParam = {};
298             for(idx in data) {
299                 var item = data[idx];
300                 submitParam[item.name] = item.value;
301                 
302             }
303             //console.info(submitParam)
304             $.post(editor.url,submitParam,onSubmitOver,'json');
305         });
306     });
307     
308     // 刪除確認
309     var deleteConfirm = function() {
310         return new Promise(function(resolve,reject) {
311             var select = $('#datatable').bootstrapTable('getSelections');
312             if(select.length == 0) {
313                 reject();
314                 return;
315             }
316             
317             $("#datatable-confirm").find("#btn-ok").on("click",function() {
318                 resolve(select);
319                 $("#datatable-confirm").modal("hide");
320             });
321             $("#datatable-confirm").find("#btn-cancel").on("click",function() {
322                 reject();
323             });
324             $("#datatable-confirm").modal("show");
325         });
326     }
327     // 刪除按鈕點擊
328     $("#toolbar").find("#btn_delete").on("click",function() {
329         var editor = getEditorDelete();
330         deleteConfirm().then(function(select) {
331             var ids = [];
332             $.each(select,function(idx,item) {
333                 ids.push(item.id);
334             });
335         
336             $.post(editor.url,{"_method":editor.method,ids:ids},onSubmitOver,'json');
337         });
338     });
339     //    查詢用戶    
340     var oInp=document.querySelector('.select-name');
341     var oSet=document.querySelector('.select-description');
342     var searchName=null,searchDes=null;
343     var str='';
344     var arrDate=[];
345     function getName(){
346         searchName = oInp.value;
347     }
348     function getDes(){
349         searchDes = oSet.value;
350     }
351     oInp.oninput = getName;
352     oSet.oninput = getDes;
353     $('#select-form').find('.btn-search').on('click',function(){
354         //按name和description檢索
355         if(searchName!= null && searchDes!= null){
356             $.ajax({
357                 async: false,
358                 type: "get",
359                 url:'http://*.*.*.*:8090/system/role/roles',
360                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
361                 data:{
362                     name:searchName,
363                     description:searchDes
364                 },
365                 success: function (res) {
366                     $('#datatable').bootstrapTable('removeAll')　　//刪除表格數據
367                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格數據
368                 },
369                 error: function (err) {
370                     console.log('伺服器有誤'+err)
371                 }
372            })
373         //按name搜索
374         }else if(searchName != '' && searchDes == null){
375             $.ajax({
376                 async: false,
377                 type: "get",
378                 url:'http://*.*.*.*:8090/system/role/roles',
379                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
380                 data:{
381                     name:searchName
382                 },
383                 success: function (res) {
384                     $('#datatable').bootstrapTable('removeAll')　　//刪除表格數據
385                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格數據
386                 },
387                 error: function (err) {
388                     console.log('伺服器有誤'+err)
389                 }
390            })
391         }else if(searchName == null && searchDes != ''){
392             $.ajax({
393                 async: false,
394                 type: "get",
395                 url:'http://*.*.*.*:8090/system/role/roles',
396                 contentType : "application/x-www-form-urlencoded; charset=utf-8",
397                 data:{
398                     description:searchDes
399                 },
400                 success: function (res) {
401                     $('#datatable').bootstrapTable('removeAll')　　//刪除所有表格數據
402                     $('#datatable').bootstrapTable('append', res.rows)　　//新增表格數據
403                 },
404                 error: function (err) {
405                     console.log('伺服器有誤'+err)
406                 }
407            })
408         }
409     })
410 });
411 </script>
412 <!-- footer -->
413 <div th:include="@{import} :: footer"></div>
414 </body>
415 </html>

4.中文文檔

　　https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1(網站轉載)

5.效果圖

　　剛想貼圖，發現伺服器炸了······下次再貼   看這個的時候對著文檔一起看。

　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【代碼筆記】Web-ionic-列表
    一，效果圖。 二，index.html代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximu ...
  • for迴圈與forEach性能思考
    今日看到一句話： 基於迴圈的迭代比基於函數的迭代法快8倍，因此有了該篇驗證博客。 驗證代碼如圖： 驗證結果：在數量比較少的時候，無明顯差別，當數量級達到10的4次方時候，for迴圈的效率優勢明顯。 從中學到其他小知識點： 1、es6語法 數組fill，填充數組，註意，如果填充的是對象，則只是一個指針 ...
  • vue2.0之監聽屬性的使用心得及搭配計算屬性的使用
    我們在工作中常常需要監聽某一個屬性值的變化，這個時候我們就需要用到了監聽屬性watch，在這裡我總結watch屬性的三種場景使用希望對你有所幫助： 1.基礎版監聽： 場景如下：輸入框輸入你的年齡，如果年齡在0 15歲提示信息：你還是個小孩，如果年齡在 15 25歲，提示信息：你已經是個少年，如果年齡 ...
  • easyui基於 layui.laydate日期擴展組件
    本人後端開發碼農一個，公司前端忙的一逼，項目使用的是easyui組件，其自帶的datebox組件使用起來非常不爽，主要表現在 1、自定義顯示格式很麻煩 2、選擇年份和月份用戶體驗也不好 網上有關於和My97DatePicker結合的例子，但感覺也用的不是很爽。 發現國內的layDate體驗非常滿意， ...
  • HTML基礎範例
    1 2 3 4 5 Title 6 7 8 9 10 用戶名： 11 13 14 密&emsp;碼： 15 17 18 性&emsp;別： 19 ... ...
  • Angularjs1.X進階筆記(1)—兩種不同的雙向數據綁定
    一. html與Controller中的雙向數據綁定 html Controller的雙向數據綁定，在開發中非常常見，也是Angularjs1.x的宣傳點之一，使用中並沒有太多問題。 1.1數據從html流向controller 也就是從 視圖層 流向 模型層 ,原生html中需要使用表單元素（例如 ...
  • 前端(七)：ES6一些新特性
    一、變數 1.var關鍵字的弊端 var關鍵字的弊端：1.可以重覆聲明變數；2.無法限制變數修改；3.沒有會計作用域，只有函數作用域。 慣用的解決辦法是將onclick寫進一個匿名函數。 2.let和const關鍵字 let和const關鍵字使得變數不可以被重覆聲明，且變數具有塊級作用域。不同的是， ...
  • promise順序執行，返回結果存放在數組
    遇到面試的一個編程題：三個返回promise對象的非同步操作，讓你寫一個函數可以將這些操作順序執行，並返回一個數組包含三個非同步對象的結果 非同步對象： 註意：promise對象在實例化的時候就會執行，所以函數都是返回promise對象，這樣執行函數的時候就會執行promise對象中的內容 我們期望的結果 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類