JQGrid DataUrl使用ASP.net（MVC 2.0）

Question

我想在Jqgrid上显示带添加/编辑对话框的组合框。我可以用硬编码值做到这一点。但是现在我想从数据库中填充数据（控制器操作）。任何人都可以帮我写DataUrl的控制器代码。 （是否需要Json格式的字符串Value & Text？）。我的网格定义如下。

我的其他网址操作正常。

 jQuery("#myGrid").jqGrid({ 
      pager: jQuery('#myGridPager'), 
      sortname: 'Name', 
      rowNum: 10, 
      rowList: [10, 20, 50], 
      sortorder: "asc", 
      height: "auto", 
      autowidth: true, 
      colNames: ['Id', 'Name', 'Dept', 'Status', 'ParentNodeName'], 
      colModel: [ 
       { name: 'Id', index: 'Id', hidden: true, key : true }, 
       { name: 'Name', index: 'Name', width: 200, editable: true, edittype: "text", editrules: { required: true} }, 
       { name: 'Dept', index: 'Dept', width: 90, editable: true, editrules: { required: true} }, 
       { name: 'Status', index: 'Status', width: 25, editable: true, edittype: "select", editoptions: { value: "A:Active;I:Inactive"} }, 
       { name: 'ParentNodeName', 
         index: 'ParentNodeName', 
         editable: true, 
         edittype: "select", 
         editoptions: { dataUrl: "/MyEntity/GetMyEntitys" } 
        }, 
       ], 
      datatype: 'json', 
      viewrecords: true, 
      mtype: 'GET', 
      jsonReader: { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "records", 
       repeatitems: false, 
       userdata: "userdata" 
      }, 
      url: "/MyEntity/GetMyEntitysData", 
      multiselect: false, 
      editurl: "/MyEntity/EditMyEntity?__SESSIONKEY=<%=Model.SessionKey %>", 
      caption: "Data Entry" 
     }) 
     .navGrid('#myGridPager', { view: true, del: true, add: true, edit: true }, 
     { height: 150, reloadAfterSubmit: false, modal: true }, // default settings for edit 
     { height: 150, reloadAfterSubmit: true, modal: true, url: "/MyEntity/AddMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // settings for add 
     { height: "auto", reloadAfterSubmit: false, modal: true, url: "/MyEntity/DeleteMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // delete 
     { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options 
     {} /* view parameters*/ 
    ); 

Answer 1

的jqGrid等待HTML代码片段（具有所需<options>有效的HTML <select>元件：<select><option value='1'>One</option>…</select>）从dataUrl: "/MyEntity/GetMyEntitys"返回的数据。由于您以JSON格式返回数据，因此必须将从服务器返回的数据转换为editoptionsbuildSelect。您可以在我的old answer中看到相应的代码示例。

还有一点小话。看看the jqGrid documentation并确认你使用哪个参数是默认的。例如multiselect: false是默认参数。如果您从网格定义中删除默认参数，代码将更易于阅读，并且它可以快速工作。在更复杂的参数（如jsonReader）中，您可以仅包含要更改的的属性。例如，您可以使用jsonReader，其格式为jsonReader : { repeatitems: true}，因为repeatitems是您想要从默认设置更改的jsonReader的唯一属性。以同样的方式，您可以将{ view: true, del: true, add: true, edit: true }减少到{ view: true }。在dataUrl

Answer 2

呼叫控制器代码中使用如下编辑选项：

.aspx/js code: 

editoptions：{ dataUrl: "/YourControllerName/TheFunction" }

控制器代码在这里：

public string TheFunction() 
     { 
      return ConstructSelect(Model.YourList); 
     } 

     public string ConstructSelect(SelectList collection) 
     { 
      string result = "<select>"; 

      foreach (var item in collection) 
      { 
       result = result + "<option value = '" + item.Value + "'>" + item.Text + "</option>"; 
      } 

      result = result + "</select>"; 
      return result; 
     }