3

私のWebアプリケーションでは、データベースから動的にロードされたドロップダウンを表示する必要があります。
DBからユーザーのリストをロードする必要があります。各ユーザーの「アクセスレベル」は1または2
になります。ユーザーがドロップダウンに表示されたら、名前の横に画像が表示されている必要があります。
（「アクセスレベル」1の「緑」ティックのように）および（アクセスレベル2の赤十字）。
このURLhttp ://www.marghoobsuleman.com/jquery-image-dropdownを確認しました。
ただし、DBから読み込まれたアクセスレベルに基づいて画像を表示する必要があります。
これはJQuery/CSSで実行できると思います。

誰かがこれを行う方法を教えてもらえますか？可能であればサンプルコードを教えてください。

4

5 に答える 5

4

ビューテクノロジとしてjspを使用しているため、コアタグを使用して、アクセスレベルに応じて緑のチェックマークと赤のクロスのどちらを表示するかを決定します。

コアタグの使用法について詳しくは、このサイトにアクセスしてください。プロジェクトのクラスパスにjstl.jarファイルとstandard.jarファイルを含めることを忘れないでください。それらはjstlをサポートする必要なライブラリです。

あなたのアプリケーションはSpringFrameworkを使用して開発されているように見えるので、その方法でのみ説明しようと思います。

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>

これで、アクションを呼び出した後に呼び出されるコントローラーが作成され、 userNameListとともにこのjspが返されます。以下は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-27T17:36:16.343 に答える
3

私は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-24T09:13:05.033 に答える
2

ユーザーリストを取得して一覧表示するには、Webページの必要な場所に以下のコードを記述します。

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>

次の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ドキュメントレディ機能で以下を使用してください（ヘッドセクションにあります）：

<script language="javascript">
    $(document).ready(function(e) {
        try {
            $("#users").msDropDown();
        } catch(e) {
            alert(e.message);
        }
    });
</script>
于 2012-09-24T11:04:50.833 に答える
1

画像の表示方法をすでに知っていることを考えると、アクセスレベルに応じて画像の正しいURLを設定するだけです。

鳥の見解

if(accesslevel==1)
Image.path="greetick.png";
else
Image.path="redcross.ong";
于 2012-09-21T04:53:13.903 に答える
1

私は以前にそのようなことをしたことがあり、JQueryフレックスボックスプラグインを使用しました。使い方はとても簡単です。私は今コードを持っていませんが、ここ（http://flexbox.codeplex.com/）はあなたがそれを実装する方法を探すことができるサイトです。

于 2012-09-28T19:29:51.370 に答える