在jqgrid中動態刷新多選下拉列表編輯

Question

我正嘗試在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 
    }) 

我應該包含什麼來刷新roletype下拉菜單？

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

        } 
       }, 

希望是有道理的。