在jqgrid编辑中动态刷新多选下拉列表

Question

我正在尝试在jqgrid编辑中动态填充多选下拉列表。 jqgrid有两个下拉列表，即role和roletype。 roletype选项应根据role中选择的选项进行更改。但是，尽管ajax调用在角色下拉更改事件中获取新值，但roletype不会刷新。代码如下：

var selRoleVal;

var mygrid = $("#MyGrid"),
         ...
   , getRoleTypes = function () {
        var roleTypeData;

        $.ajax({
            type: "POST",
            url: "Page/GetDefinitions",               
            data: "{'roleID': '" + selRoleVal + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (json) {
                roleTypeData = json;
            },
            error: function (json) {
                alert("Failed ...");
            }
        });
        return roleTypeData;

    }

    , setRoleTypeValues = function (role) {

        mygrid.jqGrid('setColProp', 'RoleType', {
            editoptions: {
                value: function (elem) {
                   var roleTypeData;

                    roleTypeData = getRoleType();
                    return roleTypeData;
                }
                , recreateForm: true

            }

        });

    };



mygrid.jqGrid({
        ...,            
        colNames: ['ID', 'Role', 'Role Type'],
        colModel: [
                    { name: 'id', index: 'id', width: 20, editable: false,     editoptions: { readonly: true, size: 1 } },                        
                    {
                        name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                        searchoptions: {
                            value: RoleList
                        },
                        editoptions: {
                            value: RoleList,
                            dataInit: function (elem) {
                                selRoleVal = $(elem).val();
                            },
                            dataEvents: [{
                                type: 'change',
                                fn: function (e) {
                                     selRoleVal = $(e.target).val();
                                    setRoleTypeValues($(e.target).val());
                                 }
                            }]

                        }
                    },
                    {
                        name: 'RoleType', index: 'RoleType', width: 100, sortable: true, editable: true, edittype: "select", 
                         editoptions: {
                             value: getRoleType
                                 ,
                            dataInit: function (elem) {
                                    $(elem).multiselect({
                                        minWidth: 80, 
                                        height: 200,
                                        selectedList: 10,
                                        checkAllText: "Check all",
                                        uncheckAllText: "Uncheck all",
                                        noneSelectedText: "Any",
                                        open: function () {
                                            var $menu = $(".ui-multiselect-menu:visible");
                                            $menu.width("auto");
                                            return;
                                        }


                                    })

                                    $(elem).multiselect('refresh');

                            },
                            multiple: true
                        }
                    }

        ],
        rowNum: 20,
        rowList: [20, 40, 60],
        ...
        editurl: ...

        ....

    }).jqGrid('navGrid', '#MyPager', {
        ....
        , edit: true
        , add: true
        , del: true
        , search: false
        , recreateForm: true 
    })

我应该包含哪些内容来刷新角色类型下拉列表？

Answer 1

看一下http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules讨论部分的第一项，它演示了如何从角色选择中引用角色类型选择。尝试这样的事情。

setRoleTypeValues = function (roleSelect, role) {

    var roleTypeSelect = roleSelect.closest("tr").find("select#RoleType");
    roleTypeSelect.empty().html(roleTypeDataOptionsAsHtml); 
    roleTypeSelect.multiselect('refresh');
    });

};

               {
                    name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                    searchoptions: {
                        value: RoleList
                    },
                    editoptions: {
                        value: RoleList,
                        dataInit: function (elem) {
                            selRoleVal = $(elem).val();
                        },
                        dataEvents: [{
                            type: 'change',
                            fn: function (e) {
                                 selRoleVal = $(e.target).val();
                                setRoleTypeValues($(e.target), $(e.target).val());
                             }
                        }]

                    }
                },

希望这是有道理的。