无法绑定百里香从jQuery选择多个模型对象

时间:2019-12-30 14:47:53

标签: thymeleaf

<div class="container" id="pickListContainer"
                    th:style="${'display:'+ val1}">

                    <div class="b" id="item">
                        <div class="panel-heading">

                            <input type="text" class="form-control" id="admin_group_name"
                                th:field="${add_user.adminGroup.groupName}" readOnly="readOnly">

                        </div>
                        <div class="panel-body">
                            <div id="pickList">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <select class="form-control pickListSelect pickListResult"
                                            style="width: 100%" multiple="multiple"
                                            id="existingAdminGroupMembers"
                                            th:field="${add_user.adminGroup.currentMembers}">
                                            <option
                                                th:each="currentUser : ${add_user.adminGroup.currentMembers}"
                                                th:value="${currentUser}" th:text="${currentUser}"></option>
                                        </select>

                                    </div>
                                    <div class="col-sm-2 pickListButtons">
                                        <button class="pAdd btn btn-primary btn-sm">&gt;</button>
                                        <button class="pAddAll btn btn-primary btn-sm">&gt;&gt;</button>
                                        <button class="pRemove btn btn-primary btn-sm">&lt;</button>
                                        <button class="pRemoveAll btn btn-primary btn-sm">&lt;&lt;</button>
                                    </div>
                                    <div class="col-sm-5">
                                        <select class="form-control pickListSelect pickAdminData"
                                            style="width: 100%" multiple="multiple"
                                            id="availableMembersForAdminGrp"
                                            th:field="${add_user.adminGroup.availableMembers}">
                                            <option
                                                th:each="adminUser : ${add_user.adminGroup.availableMembers}"
                                                th:value="${adminUser.userName}"
                                                th:text="${adminUser.userName}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>



                    <div class="b" id="item">
                        <div class="panel-heading">

                            <input type="text" class="form-control" id="user_group_name"
                                th:field="${add_user.userGroup.groupName}" readOnly="readOnly">
                        </div>
                        <div class="panel-body">
                            <div id="pickList2">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <select class="form-control pickListSelect pickListUserResult"
                                            style="width: 100%" multiple="multiple"
                                            id="existingUserGroupMembers"
                                            th:field="${add_user.userGroup.currentMembers}">
                                            <option
                                                th:each="currentUser : ${add_user.userGroup.currentMembers}"
                                                th:value="${currentUser}" th:text="${currentUser}"></option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2 pickListButtons">
                                        <button class="pAddUser btn btn-primary btn-sm">&gt;</button>
                                        <button class="pAddAllUser btn btn-primary btn-sm">&gt;&gt;</button>
                                        <button class="pRemoveUser btn btn-primary btn-sm">&lt;</button>
                                        <button class="pRemoveAllUser btn btn-primary btn-sm">&lt;&lt;</button>
                                    </div>
                                    <select class="form-control pickListSelect pickUserData"
                                        style="width: 100%" multiple="multiple"
                                        id="availableMembersForUserGrp"
                                        th:field="${add_user.userGroup.availableMembers}">
                                        <option
                                            th:each="user : ${add_user.userGroup.availableMembers}"
                                            th:value="${user.userName}" th:text="${user.userName}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



picklist.js

(function($) {

}(jQuery));

$(document).on('click', ".pRemove", function() {
    var p = $(document).find(".pickAdminData option:selected");
    p.clone().appendTo($(document).find(".pickListResult"));
    p.remove();

    return false;
});

$(document).on('click', ".pRemoveAll", function() {
    var p = $(document).find(".pickAdminData");
    p.clone().appendTo($(document).find(".pickListResult"));
    p.remove();

    return false;

});

$(document).on('click', ".pAdd", function() {
    var p = $(document).find(".pickListResult option:selected");
    p.clone().appendTo($(document).find(".pickAdminData"));
    p.remove();

    return false;

});

$(document).on('click', ".pAddAll", function() {
    var p = $(document).find(".pickListResult option");
    p.clone().appendTo($(document).find(".pickAdminData"));
    p.remove();

    return false;

});

$(document).on('click', ".pRemoveUser", function() {
    var p = $(document).find(".pickUserData option:selected");
    p.clone().appendTo($(document).find(".pickListUserResult"));
    p.remove();

    return false;
});

$(document).on('click', ".pRemoveAllUser", function() {
    var p = $(document).find(".pickUserData");
    p.clone().appendTo($(document).find(".pickListUserResult"));
    p.remove();

    return false;

});

$(document).on('click', ".pAddUser", function() {
    var p = $(document).find(".pickListUserResult option:selected");
    p.clone().appendTo($(document).find(".pickUserData"));
    p.remove();

    return false;

});

$(document).on('click', ".pAddAllUser", function() {
    var p = $(document).find(".pickListUserResult");
    p.clone().appendTo($(document).find(".pickUserData"));
    p.remove();

    return false;

});

addUser.js

$(document).ready(
        function() {
            var clusterName;
            var projectName;

            $("#add_clusture_name").on("change", function() {
                clusterName = this.value;
                $.ajax({
                    url : '/user/listProjects',
                    data : $(this).serialize(),
                    type : 'post',
                    dataType : 'html',
                    success : function(html) {
                        $('#project').replaceWith($(html));

                    }
                });
            });

            $(document).on("change", "#project", function() {
                projectName = this.value;
                var projectData = {
                    'clusterName' : clusterName,
                    'projectName' : projectName
                }
                $.ajax({
                    url : '/user/listGroups',
                    data : projectData,
                    type : 'post',
                    dataType : 'html',
                    success : function(htmlObject) {
                        $('#pickListContainer').replaceWith($(htmlObject));
                    }
                });

            });

当我从选择列表中选择多个选项时,选择currentMembers和availableMembers并单击Submit按钮, 当我尝试在控制器类中获取它们时,这些多个选择模型对象add_user.adminGroup.currentMembers,add_user.adminGroup.availableMembers,add_user.adminGroup.availableMembers和add_user.userGroup.availableMembers都为空。您能否解释一下如何在控制器类中检索这些模型对象的值。在执行添加,删除,addall,全部删除之类的选择列表选项时,这些选择多个选项的值会丢失。

0 个答案:

没有答案