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

Refresh multiselect dropdown dynamically in jqgrid edit

本文关键字:下拉列表 动态刷新 jqgrid 编辑      更新时间:2023-09-26

我正试图在jqgrid编辑中动态填充多选下拉列表。jqgrid有两个下拉菜单,即角色和角色类型。角色类型选项应根据角色中选择的选项进行更改。然而,尽管ajax调用在角色下拉更改事件中获得新值,但角色类型不会刷新。代码如下:

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 
    })

刷新角色类型下拉列表时应包含哪些内容?

看看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());
                             }
                        }]
                    }
                },

希望这是有道理的。