displaytag如何實現獲取到每行的id字段的值。

時間 2019-12-08

標籤 displaytag 如何實現獲取行的字段简体版

原文原文鏈接

一、displaytag如何實現獲取到每行的id字段的值。javascript

　　使用封裝好的框架，有時候，對於一個知識點不熟悉，可能會浪費你大把的時間，我使用displaytag主要是使用它的分頁技術，可是客戶提出的需求，是獲取到每行的id，而後選擇一個用戶名稱（用戶id），將他們關聯操做，其實業務很簡單，可是獲取到你想要的這一行，一開始確實難爲着我了，後來才發現，很簡單。css

代碼以下所示：html

  1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3 <%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
  4 <%
  5     //獲取絕對路徑路徑 
  6     String path = request.getContextPath();
  7     String basePath = request.getScheme() + "://"
  8                 + request.getServerName() + ":" + request.getServerPort()
  9                 + path + "/";
 10 %> 
 11 <!DOCTYPE html>
 12 <html>
 13 <head>
 14 <base href="<%=basePath %>" />
 15 <meta charset="UTF-8">
 16 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 17 <title>圖書管理-圖書查詢</title>
 18 <link href="resource/css/bootstrap.min.css" rel="stylesheet" />
 19 <link rel="stylesheet" href="resource/table/bootstrap-table.min.css">
 20 <link type="text/css" rel="stylesheet" href="resource/select2/css/select2.min.css">
 21 <script type="text/javascript" src="resource/js/jquery.min.js"></script>
 22 <script type="text/javascript" src="resource/js/bootstrap.min.js"></script>
 23 <script src="resource/table/bootstrap-table.min.js"></script>
 24 <script type="text/javascript" src="resource/select2/js/select2.js"></script>
 25 
 26 <style type="text/css">
 27 
 28 tr th{text-align:center;}
 29 tr td{text-align:center;}
 30 </style>
 31 <script type="text/javascript">
 32     $(document).ready(function(){
 33         $("#clickIt").click(function(){
 34             alert("sorry,此類圖書數量爲0,不可借閱......");
 35         });
 36     });
 37     
 38     //啓動以前，先查詢出地方前置庫信息，而後將地方前置庫的信息傳遞到實例數據表中
 39     $(function(){
 40         var url = "system/book/userAjax";
 41         $.ajax({
 42             type : 'POST',
 43             url : url,
 44             dataType : 'json',
 45             //traditional : true,
 46             //async : false,
 47             success : function(data) {
 48                 //console.log(data.list);
 49                 var result = data.list;
 50                 for(var i=0;i<result.length;i++){
 51                     //console.log(result[i].userAccount);
 52                     $("#userNameCategory").append("<option value='"+ result[i].userId +"'>" + result[i].userAccount + "</option>");
 53                 }
 54             }
 55         })
 56     });
 57     
 58     function borrowBooksFunction(bookIds){
 59         //關鍵點在於獲取到圖書的編號
 60         console.log(bookIds);
 61         //關鍵點，管理員經過借閱這本書給學生，將這本書的bookId給某個學生
 62         $("#setBookId").val(bookIds);
 63     }
 64     
 65 </script>
 66 </head>
 67 <body>
 68     <div>
 69         <ul class="breadcrumb" style="margin: 0px;">
 70             <li>系統管理</li>
 71             <li>圖書管理</li>
 72             <li>圖書查詢</li>
 73         </ul>
 74     </div>
 75     <form action="${basePath }system/book/select" method="post" class="form-inline">
 76         <div class="row alert alert-info" style="margin: 0px; padding: 5px;">
 77             <div class="form-group">
 78                 <label>條件:</label> 
 79                 <select name="condition" class="form-control">
 80                     <option value="bookName" ${condition == 'bookName'?'selected':'' }>圖書名稱</option>
 81                     <option value="bookAuthor" ${condition == 'bookAuthor'?'selected':'' }>圖書做者</option>
 82                     <option value="bookType" ${condition == 'bookType'?'selected':'' }>圖書類別</option>
 83                 </select>
 84                 <input type="text" name="content" value="${result }" class="form-control" placeholder="請輸入查詢條件" />
 85             </div>
 86             <input type="submit" class="btn btn-danger" value="查詢"> 
 87             <a href="system/book/insert" class="btn btn-success">
 88                 添加圖書
 89             </a>
 90         </div>
 91         <div class="row" style="padding: 15px;">    
 92             <display:table name="${list }" id="bookIds" pagesize="10" requestURI="system/book/select" class="table table-hover table-striped table-bordered">
 93                 <display:column property="bookId" title="圖書編號"></display:column>
 94                 <display:column property="bookName" title="圖書名稱"></display:column>
 95                 <display:column property="bookAuthor" title="圖書做者"></display:column>
 96                 <display:column property="bookPrice" title="圖書價格"></display:column>
 97                 <display:column property="bookType" title="圖書類型"></display:column>
 98                 <display:column property="bookPublish" title="圖書出版社"></display:column>
 99                 <display:column property="bookSum" title="圖書總數"></display:column>
100                 <!-- 若是是管理員，具備借書，還書，修改，刪除功能的權限 -->
101                 <c:if test="${userMark == '管理員' }">
102                     <display:column paramId="bookId" paramProperty="bookId" title="借書">
103                         <!-- 按鈕觸發模態框 -->
104                         <a href="" id="borrowBooks" onclick="borrowBooksFunction(<c:out value='${bookIds.bookId}'></c:out>)" data-toggle="modal" data-target="#myModal"> 借書 
105                         </a>
106                     </display:column>
107                     <display:column href="system/book/update" paramId="bookId" paramProperty="bookId" title="修改" value="修改"></display:column>
108                     <display:column href="system/book/delete" paramId="bookId" paramProperty="bookId" title="刪除" value="刪除"></display:column>
109                 </c:if>
110                 
111             </display:table>
112         </div>
113     </form>
114     
115     <form action="${basePath }system/book/adminBorrow" method="post" class="form-horizontal setWidth">
116         <!-- 模態框（Modal） -->
117         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
118             <div class="modal-dialog">
119                 <div class="modal-content">
120                     <div class="modal-header">
121                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
122                             &times;
123                         </button>
124                         <h4 class="modal-title" id="myModalLabel">
125                             用戶信息
126                         </h4>
127                     </div>
128                     <div class="modal-body">
129                         <input type="hidden" name="bookId" id="setBookId" value=""/>
130                         <select class="form-control width175" id="userNameCategory" name="userId">
131                             <option value='0'>-- 請選擇 --</option>
132                         </select>
133                     </div>
134                     <div class="modal-footer">
135                         <button type="button" class="btn btn-default" data-dismiss="modal">關閉
136                         </button>
137                         <!-- <button type="button" class="btn btn-primary">
138                             提交
139                         </button> -->
140                         <input type="submit" class="btn btn-success" value="提交" /> 
141                     </div>
142                 </div><!-- /.modal-content -->
143             </div><!-- /.modal -->
144         </div>
145     </form>
146     
147 </body>
148 </html>