在编辑使用web api获取数据时，无法将数据绑定到jqgrid中的下拉列表 [英] Unable to bind the data to dropdown in jqgrid when it is editing getting data using web api

问题描述

$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 ：公寓用户}]

What I have tried:

Dropdown data from api is like:
[{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}]

推荐答案

j（ document ）。ready（ function （）{

j(document).ready(function () {

j.ajax（{
type： GET，
url： http ：// localhost：9611 / api / Master / GetBackendUsersList，
contentType： json ，
dataType： json，
成功： function （data）{
var dataList;
var StatusList = ' ';

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： 用户详细信息，
数据：数据，
数据类型： local，
height：' 100％'，
width：' 100％'，

colNames：[ UserName， RoleId， 名称， RoleName， LoginId]，
colModel：[
{name： UserName，index：' UserName'，可编辑： true }，
{name：' RoleId'，index： RoleId，隐藏： true ，width： 150 ，可编辑： true }，
{name： 名称，索引： 名称，可编辑： true }，
{
name： RoleName，index： RoleName，可编辑： true ，edittype：' select'，editoptions：{

dataInit： function （元素）
{

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

这篇关于在编辑使用web api获取数据时，无法将数据绑定到jqgrid中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！