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; 
     }