displaytag如何实现获取到每行的id字段的值。

2019-06-03 11:19:45 浏览数 (1)

1、displaytag如何实现获取到每行的id字段的值。

  使用封装好的框架,有时候,对于一个知识点不熟悉,可能会浪费你大把的时间,我使用displaytag主要是使用它的分页技术,但是客户提出的需求,是获取到每行的id,然后选择一个用户名称(用户id),将他们关联操作,其实业务很简单,但是获取到你想要的这一行,一开始确实难为着我了,后来才发现,很简单。

代码如下所示:

代码语言:javascript复制
  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>

效果如下所示:

2、关键点操作如下所示:

然后如下所示:

然后完成你想要实现的效果:

打完收工

待续......

0 人点赞