JSP/Jquery - 組合框下拉動態從數據庫加載圖像

在我的web應用程序中，我需要顯示從數據庫動態加載的下拉列表。
我需要從數據庫加載用戶列表。每個用戶將具有1或2的「訪問級別」。
當用戶在下拉菜單中顯示時，他們必須在其名稱旁邊顯示圖像。
（如'訪問級別1'的'綠色'勾號）和（訪問級別2的紅色叉號）。
我已查看此網址http://www.marghoobsuleman.com/jquery-image-dropdown。
但我需要顯示基於從數據庫加載的訪問級別的圖像。
我想這可以通過JQuery/CSS完成。JSP/Jquery - 組合框下拉動態從數據庫加載圖像

任何人都可以請告訴如何做到這一點，如果可能的話，請示例代碼？

來源

2012-09-21 user1514499

你已經收到我的答案。那爲什麼還有其他的賞金呢？ –

由於您使用jsp作爲視圖技術，使用核心標籤來決定是否要根據訪問級別顯示綠色勾號或紅色叉號。

訪問this site瞭解更多關於核心標籤的使用。不要忘記在項目類路徑中包含jstl.jar和standard.jar文件。它們是支持jstl的必要庫。

看起來你的應用程序是使用spring框架開發的，所以我會試着僅以這種方式解釋它。

你的JSP代碼將是這樣的：它命名爲userlist.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 
<!doctype> 
<html> 
    <head> 
     <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js" type="text/javascript></script> 
     <script src="${pageContext.request.contextPath}/js/jquery.dd.js" type="text/javascript"></script> 
     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/dd.css" /> 
    </head> 
    <body> 
     <form:select id="userNames" path="userName" tabindex="10"> 
      <form:option value="Select User">Select User</form:option>     
      <c:forEach begin="${userlist begin index (0)}" end="${userlist size}" var="i"> 
       <c:choose> 
        <c:when test="${userNameList.user.accessLevel == 1}"> 
         <form:option style="background-image:url(greentick.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option> 
        </c:when> 
        <c:otherwise> 
         <form:option style="background-image:url(redcross.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option> 
        </c:otherwise> 
       </c:choose> 
      </c:forEach> 
     </form:select> 
    </body> 
</html>

現在你將有一個控制器，它會調用一些動作之後被調用，它將返回這個JSP以及userNameList。以下是示例UserController。java的

@Controller 
public class UserController { 

    @RequestMapping(value = "/showUsers", method = RequestMethod.GET) 
    public String showUserInfo(Model model) { 
     // here you prepare the userList, the list of Users along with information 
     // here User can be fetched from DB & values stored in User DTO and then DTO in the list 
     List<User> userNameList = new ArrayList<User>(); 
     userNameList.add(User DTO objects go here); 
     model.addAttribute("userNameList", userNameList); 
     return "userlist";  // remember this is our jsp name 
    } 
}

&用戶DTO可以是這樣的。下面是樣品User.java

public class User { 
    private String userName; 
    private int accessLevel; 

    // setters & getters of variables 
}

這不能完全闡明答案。我盡力解釋。你試試這個。它應該工作。

來源

2012-09-27 17:36:16

考慮，你已經知道如何來顯示圖像，你需要做的唯一事情是設置取決於訪問級別的圖像的正確網址。

鳥瞰

if(accesslevel==1) 
Image.path="greetick.png"; 
else 
Image.path="redcross.ong";

來源

2012-09-21 04:53:13

我沒有JSP的知識，但是，但是，我可以爲你提供足夠的信息，以便你可以把它與你的知識去。

HTML部分：

<html> 
<head> 
<title>Sample Title</title> 
<script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" /> 
<script language="javascript"> 
    $(document).ready(function(e) { 
     try { 
      $("#webmenu").msDropDown(); 
     } catch(e) { 
      alert(e.message); 
     } 
    }); 
</script> 
</head> 
<body> 
<select name="webmenu" id="webmenu"> 
    //you will need to take this part into the loop of x being count of total users, and loop from first to last 
    <option value="<% //output username lowercased here %>" title="<% if(accessLevel == 1){ //printout imagepath for accessLevel = 1 } else if(accessLevel == 2){ //printout imagepath for accessLevel = 2 %>"><% /*output username here*/ %></option> 
</select> 
</body> 
</html>

來源

2012-09-24 09:13:05 TheDeadLike

寫下面的代碼在所需的地方你的網頁來獲取和列表中的用戶列表。

rst=stmt.executeQuery("select * from userliat"); 
<select id="users" name="users">; 
<% 
String imagePath; 
while(rst.next()){ 
    if(rst.getString("access_level") == "1"){ 
    imagePath = "greenTick.png"; 
    } 
    else{ 
    imagePath = "redCross.png"; 
    } 
%>; 
<option value="<%= rst.getString("id") %>" title="<%= imagePath %> "><%= rst.getString("user_name") %></option>; 
<% } %> 
</select>

包括在你的頭部分

<script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript></script> 
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

使用文檔準備功能如下javascript下面的JavaScript/CSS插件（它是在頭部分）：

<script language="javascript"> 
    $(document).ready(function(e) { 
     try { 
      $("#users").msDropDown(); 
     } catch(e) { 
      alert(e.message); 
     } 
    }); 
</script>

來源

2012-09-24 11:04:50 sureshunivers

我之前做過類似的事情，並且使用了JQuery flexbox插件。使用起來非常簡單。我現在沒有代碼，但是這裏（http://flexbox.codeplex.com/）是一個可以查找如何實現它的網站。

來源

2012-09-28 19:29:51 user1707141

JSP/Jquery - 組合框下拉動態從數據庫加載圖像

回答

相關問題