内联 Jqgrid 下拉绑定问题答案

【问题标题】：Inline Jqgrid drop down binding issue内联 Jqgrid 下拉绑定问题
【发布时间】：2015-11-03 06:54:24
【问题描述】：

我正在尝试将 MVC 操作控制器中的数据列表绑定到内联 JqGrid 中。示例 JSON 数据如下

{Id:"1",FirstName:"Joy",Gender:"Male"},
{Id:"2",FirstName:"George",Gender:"Male"},
{Id:"3",FirstName:"Tessa",Gender:"Female"}

我正在尝试在内联 JqGrid 中为 Gender 绑定一个下拉列表。下拉列表的示例数据如下。

{Id:"17b4bf97-4ab0-49b1-ab01-072f4dbed696",Gender:"Male"},
{Id:"f206d222-0608-4b92-b9dd-0cac5c66121",Gender:"Female"}

我已将 JqGrid 配置如下

$("#tbl-users").CreateGrid({
   url: // MVC controller action url,
   colNames: ['User ID', 'First Name', 'Gender',....],
   colModel: [
   { name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
   {name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
   {name: 'Gender', index: 'Gender',  searchoptions: { sopt: ['cn'] }, editable: true,
  edittype: "select",
  formatter: 'select',
  editoptions: {
        dataUrl: // Url to get the list of Gender User from the MVC controller,
         buildSelect:
         function (response) {
                      //Code to build a drop down
           }
      }                  
  },
 });

在进行上述配置时，我无法在列表中显示 Gender 的值。我错过了什么？如果我得到任何人的指导，那将会很有帮助。我正在使用 JqGrid 4.5.1

【问题讨论】：

标签： asp.net-mvc-4 model-view-controller jqgrid inline inline-editing

【解决方案1】：

参考 Gender editoptions 中的example add value 属性，editoptions 将如下所示。

$("#tbl-users").CreateGrid({
   url: // MVC controller action url,
   colNames: ['User ID', 'First Name', 'Gender',....],
   colModel: [
   { name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
   {name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
   {name: 'Gender', index: 'Gender',  searchoptions: { sopt: ['cn'] }, editable: true,
  edittype: "select",
  formatter: 'select',
  editoptions: {
value:"17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"
        dataUrl: // Url to get the list of Gender User from the MVC controller,
         buildSelect:
         function (response) {
                      //Code to build a drop down
           }
      }                  
  },
 });

将 Gender 的返回值更改为 GUID。因此 json 看起来像这样

{Id:"1",FirstName:"Joy",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"2",FirstName:"George",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"3",FirstName:"Tessa",Gender:"f206d222-0608-4b92-b9dd-0cac5c66121"}

动态加载

您可以通过在页面加载时分配 Viewbag 中的值来动态生成 editoption 中 value 属性的值。

将页面的操作假设为控制器中的索引

public ActionResult Index() 
{   
ViewBag.Genders = "17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"; // You can create your logic with C#  
return this.View(); 
}

在编辑选项的value属性中赋值ViewBag.Genders如下所示

editoptions: { value:"@ViewBag.GenderTypes" }

我希望这个想法对你有所帮助。

【讨论】：

非常感谢..你拯救了我的整个星期。:-)