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

Posted

技术标签:

【中文标题】使用 web api 编辑获取数据时无法将数据绑定到 jqgrid 中的下拉列表【英文标题】:Unable to bind the data to dropdown in jqgrid when it is editing getting data using web api 【发布时间】:2016-07-17 22:51:57 【问题描述】:
$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"]

【问题讨论】:

这可能会对你有所帮助,***.com/questions/13116256/… 它不工作请帮助我 【参考方案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() 中添加 ajax 调用并返回结果创建的值/数组。

【讨论】:

以上是关于使用 web api 编辑获取数据时无法将数据绑定到 jqgrid 中的下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

Web API 无法使用 utf-16 编码的 XML 绑定 POST 模型

Flutter - 无法将所有 json 数据从 api 响应保存到 Iterable List 编辑:(无法从可迭代列表中获取数据)

ASP.NET Web API - 模型绑定不适用于 POST 上的 XML 数据

来自Web服务的DropDownList绑定在asp.net中编辑时不传递数据源

easyui-datagrid如何获取 空白行

当 Postman 工作正常时,无法使用 jQuery 将数据发布到 Web api