displaytag如何实现获取到每行的id字段的值。
1、displaytag如何实现获取到每行的id字段的值。
使用封装好的框架，有时候，对于一个知识点不熟悉，可能会浪费你大把的时间，我使用displaytag主要是使用它的分页技术，但是客户提出的需求，是获取到每行的id，然后选择一个用户名称（用户id），将他们关联操作，其实业务很简单，但是获取到你想要的这一行，一开始确实难为着我了，后来才发现，很简单。
代码如下所示：
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 ×
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、关键点操作如下所示：
然后如下所示：
然后完成你想要实现的效果：
打完收工
待续......
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-03-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读