当使用 web 编辑获取数据时，无法将数据绑定到 jqgrid 中的下拉列表 api

Question

$j(document).ready(function () {
 $j.ajax({
        type: "GET",
        url: "http://localhost:9611/api/Master/GetBackendUsersList",
        contentType: "json",
        dataType: "json",
        success: function (data) {
            var dataList;
            var StatusList = '';

            $j('#list2').jqGrid({
                caption: "Users Details",
                data: data,
                datatype: "local",
                height: '100%',
                width: '100%',

                colNames: ["UserName", "RoleId", "Name", "RoleName", "LoginId"],
                colModel: [
                      { name: "UserName", index: 'UserName', editable: true },
                      { name: 'RoleId', index: "RoleId", hidden: true, width: 150, editable: true },
                      { name: "Name", index: "Name", editable: true },
                      {
                          name: "RoleName", index: "RoleName", editable: true, edittype: 'select', editoptions: {

                              dataInit: function (element)
                              {

                                  $j.ajax({
                                      type: "GET",
                                      url: "http://localhost:9611/api/Master/GetRoles",
                                      contentType: "json",
                                      dataType: "json",
                                      success: function (mydata) {
                                          dataList = mydata;

                                          for (var i = 0; i < dataList.length; i++) {
                                              //if (StatusList == "")
                                              //    StatusList = dataList[i].RoleId + ":" + dataList[i].RoleName;
                                              //else
                                              StatusList = StatusList + dataList[i].RoleId + ":" + dataList[i].RoleName+ ';' ;
                                          }   
                                      }
                                  });
                              },
                              value: "0:Select;" + StatusList,
                          }
                      },
                      { name: 'LoginId', index: "LoginId", hidden: true, width: 150 }
                ],
                gridview: true,
                rowNum: 5,
                rowList: [5, 10, 15],
                pager: '#jQGridDemoPager',
                sortname: "UserName",
                viewrecords: true,
                sortorder: "desc",
                //width: '100%',
                //height: '100%',

                shrinkToFit: false,
                editurl: SiteUrl + "api/Master/UpdateBackendUserDetails/" ,
            });
$j.extend(true, $j.jgrid.edit, {
                recreateForm: true,
                beforeShowForm: function ($jform) {
                    $jform.closest(".ui-jqdialog").position({
                        of: window, // or any other element
                        my: "center center",
                        at: "center center"
                    });
                }
            });
            $j('#list2').jqGrid('navGrid', '#jQGridDemoPager',
                   {
                       add: false,
                       search: false,
                       recreateForm: true,
                       beforeShowForm: function ($jform) {
                           $jform.find(".FormElement[readonly]")
                               .prop("disabled", true)
                               .addClass("ui-state-disabled")
                               .closest("LoginId")
                               .prev(".CaptionTD")
                               .prop("disabled", true)
                               .addClass("ui-state-disabled");
                       },

                   },
            { recreateForm: true }
                   );
        }
    });
});

来自 api 的下拉数据如下：

[{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}]

Answer 1

这样使用:

    editoptions:{value: getData()}

然后创建一个方法

    function getData(){
     var states = [{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}];        
      return states;

    }

在您的情况下，您需要在 getData() 和 return values/array 中添加 ajax 调用，后者已由结果创建。

当使用 web 编辑获取数据时，无法将数据绑定到 jqgrid 中的下拉列表 api

Unable to bind the data to dropdown in jqgrid when it is editing getting data using web api

javascript

jquery

jqgrid

asp.net-mvc-4

mvcjqgrid