Bootstrap動(dòng)態(tài)編程

1，動(dòng)態(tài)表格

成都創(chuàng)新互聯(lián)公司主營(yíng)孟州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),孟州h5小程序定制開(kāi)發(fā)搭建,孟州網(wǎng)站營(yíng)銷(xiāo)推廣歡迎孟州等地區(qū)企業(yè)咨詢

    Bootstrap-Table顯示數(shù)據(jù)到表格的方式有兩種，一種是客戶端（client）模式，一種是服務(wù)器（server）模式。

        所謂客戶端模式，指的是在服務(wù)器中把要顯示到表格的數(shù)據(jù)一次性加載出來(lái)，然后轉(zhuǎn)換成JSON格式傳到要顯示的界面中，在JavaWeb中可以保存在request中，然后轉(zhuǎn)發(fā)到指定界面，在界面初始化的時(shí)候使用EL表達(dá)式獲取，然后調(diào)用相關(guān)初始化的函數(shù)，將JSON字符串傳進(jìn)去即可顯示?？蛻舳四Ｊ捷^為簡(jiǎn)單，它是把數(shù)據(jù)一次性加載出來(lái)放到界面上，然后根據(jù)你設(shè)置的每頁(yè)記錄數(shù)，自動(dòng)生成分頁(yè)。當(dāng)點(diǎn)擊第二頁(yè)時(shí)，會(huì)自動(dòng)加載出數(shù)據(jù)，不會(huì)再向服務(wù)器發(fā)送請(qǐng)求。同時(shí)用戶可以使用其自帶的搜索功能，可以實(shí)現(xiàn)全數(shù)據(jù)搜索。對(duì)于數(shù)據(jù)量較少的時(shí)候，可以使用這個(gè)方法。但是對(duì)于數(shù)據(jù)量大的系統(tǒng)，使用該方法會(huì)造成加載出一些很久之前的，用戶不在關(guān)注的數(shù)據(jù)，使得加載速度變慢，增加了服務(wù)器的負(fù)擔(dān)，浪費(fèi)了資源。這時(shí)應(yīng)該采用服務(wù)器模式。

        所謂服務(wù)器模式，指的是根據(jù)設(shè)定的每頁(yè)記錄數(shù)和當(dāng)前要顯示的頁(yè)碼，發(fā)送數(shù)據(jù)到服務(wù)器進(jìn)行查詢，然后再顯示到表格中。該方法可以根據(jù)用戶的需要?jiǎng)討B(tài)的加載數(shù)據(jù)，節(jié)省了服務(wù)器的資源，但是不能使用其自帶的全數(shù)據(jù)搜索功能。因?yàn)槟慵虞d的數(shù)據(jù)只是一頁(yè)的數(shù)據(jù)，所以全數(shù)據(jù)搜索的范圍也只在一頁(yè)之中。

Bootstrap動(dòng)態(tài)編程

        上圖中是使用Bootstrap-Table實(shí)現(xiàn)的一個(gè)界面，并帶有一個(gè)輸入框和查詢按鈕。在輸入框中輸入單號(hào)，點(diǎn)擊查詢可以到后臺(tái)進(jìn)行查詢，再把查詢結(jié)果的數(shù)據(jù)顯示到表格中。由于數(shù)據(jù)庫(kù)中數(shù)據(jù)較少，為了看到效果，所以每頁(yè)設(shè)置顯示一條數(shù)據(jù)。

以下是前端界面代碼：

        首先引入相應(yīng)的JS和CSS文件。定義一個(gè)表格標(biāo)簽，配置相關(guān)的boostrap-table屬性，在此省略了列的代碼。


  1. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">  

  2. <link href="css/bootstrap-table.min.css" rel="stylesheet" type="text/css">  

  3. <script src="js/jquery.min.js"></script>  

  4. <script src="js/bootstrap.min.js"></script>  

  5. <script src="js/plugins/bootstrap-table.min.js"></script>  

  6. <script src="js/plugins/bootstrap-table-zh-CN.js"></script>   

  7.   

  8. <table class="table table-hover" id="cusTable"  

  9.        data-pagination="true"  

  10.        data-show-refresh="true"  

  11.        data-show-toggle="true"  

  12.        data-showColumns="true">  

  13.        <thead>  

  14.           <tr>                                                           

  15.               <th  data-field="sellRecordId" data-sortable="true">  

  16.                            銷(xiāo)售記錄id  

  17.               </th>  

  18.               <th data-field="srNumber" >  

  19.                            銷(xiāo)售單號(hào)  

  20.               </th>  

  21.               <!-- 在此省略表格列的代碼，代碼和上面差不多 -->  

  22.               <th class="col-xs-2" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>     

  23.           </tr>  

  24.        </thead>  

  25.        <tbody>  

  26.        </tbody>  

  27. </table>  

        以下是javascript代碼：定義了一個(gè)函數(shù)initTable()用于初始化表格。第7行method指定了請(qǐng)求的提交方式，我嘗試了設(shè)置為post提交，結(jié)果發(fā)現(xiàn)后端取不到查詢參數(shù)，不知道為什么，所以使用get提交。第8行url設(shè)置你要提交請(qǐng)求的地址，這里在JSP中使用了C標(biāo)簽。第17行指定了服務(wù)端模式加載數(shù)據(jù)。第20行指定了查詢參數(shù)的類(lèi)型，可以設(shè)置為undefined或limit，不同的設(shè)置可以在queryParams的函數(shù)中獲取不同的參數(shù)。第23-25行分別獲取了頁(yè)碼、每頁(yè)記錄數(shù)、查詢條件，作為查詢的參數(shù)返回。這里只有一個(gè)條件，如果要多條件查詢的話，只需獲得多個(gè)條件即可。第40行在ready中調(diào)用函數(shù)獲取后端數(shù)據(jù)顯示在表格中。第43行為查詢按鈕綁定了一個(gè)單擊事件，當(dāng)輸入單號(hào)并點(diǎn)擊查詢時(shí)執(zhí)行。由于查詢是在第一次加載表格之后才有的動(dòng)作，所以在第4行中要先調(diào)用bootstrap-table提供的函數(shù)銷(xiāo)毀表格，不然點(diǎn)擊查詢時(shí)無(wú)法到后臺(tái)加載數(shù)據(jù)。


  1. <script type="text/javascript">            

  2.       function initTable() {  

  3.         //先銷(xiāo)毀表格  

  4.         $('#cusTable').bootstrapTable('destroy');  

  5.         //初始化表格,動(dòng)態(tài)從服務(wù)器加載數(shù)據(jù)  

  6.         $("#cusTable").bootstrapTable({  

  7.             method: "get",  //使用get請(qǐng)求到服務(wù)器獲取數(shù)據(jù)  

  8.             url: "<c:url value='/SellServlet?act=ajaxGetSellRecord'/>", //獲取數(shù)據(jù)的Servlet地址  

  9.             striped: true,  //表格顯示條紋  

  10.             pagination: true, //啟動(dòng)分頁(yè)  

  11.             pageSize: 1,  //每頁(yè)顯示的記錄數(shù)  

  12.             pageNumber:1, //當(dāng)前第幾頁(yè)  

  13.             pageList: [5, 10, 15, 20, 25],  //記錄數(shù)可選列表  

  14.             search: false,  //是否啟用查詢  

  15.             showColumns: true,  //顯示下拉框勾選要顯示的列  

  16.             showRefresh: true,  //顯示刷新按鈕  

  17.             sidePagination: "server", //表示服務(wù)端請(qǐng)求  

  18.             //設(shè)置為undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder  

  19.             //設(shè)置為limit可以獲取limit, offset, search, sort, order  

  20.             queryParamsType : "undefined",   

  21.             queryParams: function queryParams(params) {   //設(shè)置查詢參數(shù)  

  22.               var param = {    

  23.                   pageNumber: params.pageNumber,    

  24.                   pageSize: params.pageSize,  

  25.                   orderNum : $("#orderNum").val()  

  26.               };    

  27.               return param;                   

  28.             },  

  29.             onLoadSuccess: function(){  //加載成功時(shí)執(zhí)行  

  30.               layer.msg("加載成功");  

  31.             },  

  32.             onLoadError: function(){  //加載失敗時(shí)執(zhí)行  

  33.               layer.msg("加載數(shù)據(jù)失敗", {time : 1500, icon : 2});  

  34.             }  

  35.           });  

  36.       }  

  37.   

  38.       $(document).ready(function () {          

  39.           //調(diào)用函數(shù)，初始化表格  

  40.           initTable();  

  41.   

  42.           //當(dāng)點(diǎn)擊查詢按鈕的時(shí)候執(zhí)行  

  43.           $("#search").bind("click", initTable);  

  44.       });  

  45. </script>  

后端servlet代碼：

        在servlet中獲取act參數(shù)后，調(diào)用如下代碼。然后調(diào)用service業(yè)務(wù)邏輯進(jìn)行查找，service中進(jìn)行判斷，是否orderNum為空字符串，如果為空則不帶orderNum參數(shù)查詢，如果不會(huì)空則要帶orderNum條件查詢。service中調(diào)用dao，dao中的函數(shù)也要根據(jù)orderNum參數(shù)是否為空而生成不同的SQL語(yǔ)句和查詢參數(shù)。第23行將查詢的記錄轉(zhuǎn)成json字符串，第25行得到滿足條件的總的記錄數(shù)。注意第28行設(shè)置了返回前端的json，這里需要返回兩個(gè)參數(shù)，一個(gè)是total，表示總記錄數(shù)，一個(gè)是rows，表示表格數(shù)據(jù)。


  1. /** 

  2.      * 根據(jù)頁(yè)碼和每頁(yè)記錄數(shù)，以及查詢條件動(dòng)態(tài)加載銷(xiāo)售記錄 

  3.      * @param request 

  4.      * @param response 

  5.      * @throws IOException 

  6.      * @author lzx 

  7.      */  

  8.     private void ajaxGetSellRecord(HttpServletRequest request,  

  9.             HttpServletResponse response) throws IOException {  

  10.         response.setCharacterEncoding("utf-8");  

  11.         PrintWriter pw = response.getWriter();  

  12.           

  13.         //得到客戶端傳遞的頁(yè)碼和每頁(yè)記錄數(shù)，并轉(zhuǎn)換成int類(lèi)型  

  14.         int pageSize = Integer.parseInt(request.getParameter("pageSize"));  

  15.         int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));  

  16.         String orderNum = request.getParameter("orderNum");  

  17.           

  18.         //分頁(yè)查找商品銷(xiāo)售記錄，需判斷是否有帶查詢條件  

  19.         List<SimsSellRecord> sellRecordList = null;  

  20.         sellRecordList = sellRecordService.querySellRecordByPage(pageNumber, pageSize, orderNum);  

  21.           

  22.         //將商品銷(xiāo)售記錄轉(zhuǎn)換成json字符串  

  23.         String sellRecordJson = sellRecordService.getSellRecordJson(sellRecordList);  

  24.         //得到總記錄數(shù)  

  25.         int total = sellRecordService.countSellRecord(orderNum);  

  26.           

  27.         //需要返回的數(shù)據(jù)有總記錄數(shù)和行數(shù)據(jù)  

  28.         String json = "{\"total\":" + total + ",\"rows\":" + sellRecordJson + "}";  

  29.         pw.print(json);  

  30.     } 

bootstrap 模態(tài)框動(dòng)態(tài)加載數(shù)據(jù)

1.頁(yè)面中添加modal 

<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" style="width:900px;">
      <div class="modal-content">//內(nèi)容動(dòng)態(tài)填充
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

2.數(shù)據(jù)格式。頁(yè)面動(dòng)態(tài)生成a 標(biāo)簽<a data-toggle='modal'   data-target='#showModal' onclick=targetto('"  + row.id + "')>"+ row.title+"</a>";

3.單擊事件

 function targetto(id){
             $("#showModal").modal({
                 remote: "showAction.action?id="+id
             });
             }
 4.每次隱藏時(shí)，清除數(shù)據(jù)。確保點(diǎn)擊時(shí)，重新加載
    $("#showModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });


網(wǎng)站題目：Bootstrap動(dòng)態(tài)編程
分享URL：http://muchs.cn/article6/ghpoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、ChatGPT、外貿(mào)建站、App設(shè)計(jì)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)