具有自动完成功能的JqGrid无法从控制器解析数据以进行查看

Question

最近几天我试图让自动填充字段的jqgrid工作，现在我可以让它使用本地数据，但是一旦我试图从我的控制器数据中获取数据就不会被解析。

查看代码：

          { name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true, edittype: 'text', editoptions: {
              dataInit:
          function (elem) {
              $(elem).autocomplete({ minLength: 0, source: '@Url.Action("GetBrands")' })
              .data("autocomplete")._renderItem = function (ul, item) {
                  return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Id + ", " + item.Name + "</a>")
            .appendTo(ul);
              };
          } 
          }
          },

如果不是源：url我使用source：[“c ++”，“java”，“php”，“coldfusion”，“javascript”，“asp”，“ruby”]例如代码工作正常并显示，所以我的控制器端代码一定有问题

控制器代码：

    public JsonResult GetBrands()
    {

        string vendorId = "";
        var username = "";
        var name = System.Web.HttpContext.Current.User.Identity.Name;
        var charArray = name.Split("\\".ToCharArray());
        username = charArray.Last();
        vendorId = service.GetVendorIdByUsername(username);

        List<String> list = new List<String>();
        var brands = service.getBrandsByVendor(vendorId);

        var s= (from brand in brands
                     select new
                     {
                         Id = brand.BrandId,
                         Name = brand.BrandName

                     }).ToList();

        return Json(s);
    }

Answer 1

如果您在客户端使用item.Id和item.Name，则不应返回List<String>。而不应该返回new {Id=brand.BrandId, Name=brand.BrandName}列表。您应该使用LINQ而不是foreach：

return Json ((from brand in brands
              select new {
                  Id = brand.BrandId,
                  Name = brand.BrandName
              }).ToList());

更新：我为您修改了the answer的演示，并以两种形式包含了jQuery UI Autocomplete支持。标准渲染：

和自定义渲染：

自动填充功能在Advanced Searching对话框中的工作方式与Searching Toolbar中的相同：

您可以从here下载演示。

标准自动填充的服务器代码是

public JsonResult GetTitleAutocomplete (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where item.Title.Contains (term)
                  select item.Title).ToList(),
                 JsonRequestBehavior.AllowGet);
}

它返回JSON格式的字符串数组。标题列表按term参数进行过滤，该参数将初始化为输入字段中输入的字符串。

自定义自动填充的服务器代码是

public JsonResult GetIds (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where SqlFunctions.StringConvert((decimal ?)item.Id).Contains(term) 
                  select new {
                      value = item.Id,
                      //votes = item.Votes,
                      title = item.Title
                  }).ToList (),
                 JsonRequestBehavior.AllowGet);
}

使用SqlFunctions.StringConvert可以在比较整数时使用LIKE。此外，它返回具有value title属性的对象列表。如果您将返回value lable个lable属性的对象，则value属性中的值将显示在自动填充上下文菜单中，相应的title属性将插入到输入字段。我们使用自定义searchoptions: { dataInit: function (elem) { $(elem).autocomplete({ source: '<%= Url.Action("GetTitleAutocomplete") %>' }); } } 属性。

客户端的代码是

searchoptions: {
    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
    dataInit: function (elem) {
        // it demonstrates custom item rendering
        $(elem).autocomplete({ source: '<%= Url.Action("GetIds") %>' })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><span style='display:inline-block;width:60px;'><b>" +
                        item.value + "</b></span>" + item.title + "</a>")
                    .appendTo(ul);
            };
    }
}

用于标准渲染和

.ui-autocomplete {
    /* for IE6 which not support max-height it can be width: 350px; */
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/*.ui-autocomplete.ui-menu { opacity: 0.9; }*/
.ui-autocomplete.ui-menu .ui-menu-item { font-size: 0.75em; }
.ui-autocomplete.ui-menu a.ui-state-hover { border-color: Tomato }
.ui-resizable-handle {
    z-index: inherit !important;
}

用于自定义渲染。

另外我使用了一些CSS设置：

.ui-autocomplete.ui-menu { opacity: 0.9; }

如果您想要一些小的，可以取消注释{{1}}设置 自动填充上下文菜单中的不透明度效果。