内联 Jqgrid 下拉绑定问题

Question

我正在尝试在内联 JqGrid 中绑定来自我的 MVC 动作控制器的数据列表。样本JSON数据如下

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

我正在尝试在内联 JqGrid 中绑定性别下拉列表。下拉列表的示例数据如下。

{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
           }
      }                  
  },
 });

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

Answer 1

参考性别编辑选项中的 example 添加值属性，编辑选项将如下所示。

$("#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
           }
      }                  
  },
 });

将性别的 return 值更改为 GUID.So 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" }

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

内联 Jqgrid 下拉绑定问题

Inline Jqgrid drop down binding issue

model-view-controller

inline

jqgrid

inline-editing

asp.net-mvc-4