JSP / Jquery - 從帶有圖像的數據庫動態加載的組合框下拉列表

Question

在我的Web應用程序中，我需要顯示從數據庫動態加載的下拉列表。
我需要從DB加載用戶列表。 每個用戶的“訪問級別”為1或2。
當用戶顯示在下拉列表中時，他們必須在其名稱旁邊有一個圖像。
（比如'綠色'勾選'訪問級別'1）和（紅十字會訪問級別2）。
我查了這個網址http://www.marghoobsuleman.com/jquery-image-dropdown 。
但我需要根據從DB加載的訪問級別顯示圖像。
我想這可以通過JQuery / CSS來完成。

任何人都可以告訴我們如何做到這一點，如果可能的樣品代碼，請？

Answer 1

由於您使用jsp作為視圖技術，因此請使用核心標記來決定是否要顯示綠色勾號或紅叉，具體取決於訪問級別。

訪問此站點以了解有關核心標記使用情況的更多信息。 不要忘記在項目類路徑中包含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
}

這不能完全清楚地回答。 我盡力解釋。 你試一試。 它應該工作。

Answer 2

我不了解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>

Answer 3

將以下代碼寫在網頁所需的位置以獲取並列出用戶列表。

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>

在您的head部分中包含以下javascript / CSS插件

<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 （它位於head部分）：

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

Answer 4

考慮到您已經知道如何顯示圖像，您唯一需要做的就是根據訪問級別設置圖像的正確URL。

BIRD的觀點

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

Answer 5

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

JSP / Jquery - 從帶有圖像的數據庫動態加載的組合框下拉列表

問題描述

5 個解決方案

解決方案1
4 已采納 2012-09-27 17:36:16

解決方案2
3 2012-09-24 09:13:05

解決方案3
2 2012-09-24 11:04:50

解決方案4
1 2012-09-21 04:53:13

解決方案5
1 2012-09-28 19:29:51

JSP / Jquery - 從帶有圖像的數據庫動態加載的組合框下拉列表

問題描述

5 個解決方案

解決方案1 4 已采納 2012-09-27 17:36:16

解決方案2 3 2012-09-24 09:13:05

解決方案3 2 2012-09-24 11:04:50

解決方案4 1 2012-09-21 04:53:13

解決方案5 1 2012-09-28 19:29:51

解決方案1
4 已采納 2012-09-27 17:36:16

解決方案2
3 2012-09-24 09:13:05

解決方案3
2 2012-09-24 11:04:50

解決方案4
1 2012-09-21 04:53:13

解決方案5
1 2012-09-28 19:29:51