dataUrl（editoptions用於選擇）是不工作/將數據填充到DROPDOWNLIST中的jqGrid

Question

我使用的jqGrid和代碼如下

$("#jqGridDel").jqGrid({ 
      url: "Data.aspx/BindInfo", 
      datatype: 'json', 
      mtype: 'POST', 
      serializeGridData: function (postData) { 
       return JSON.stringify(postData); 
      }, 
      ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
      ajaxSelectOptions: { type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       success: function (result) { 
        alert("hello"); 
       } 
      },, 
      colName: ['DelId', 'Name', 'DeliveryName', 'Status'], 
      colModel: [ 
       { 
        label: 'Del No', 
        name: 'DelId', 
        width: 35 
       }, 
       { 
        label: 'Gate', 
        name: 'Name', 
        width: 200, 
        editable: true, 
        edittype: "select", 
        foramtter: "Select", 
        editoptions: { 
         dataUrl: "Data.aspx/BindDDInfo", 
         buildSelect: function (data) 
         { 
          alert(data); 
         } 
        } 
       }, 
       { 
        label: 'Delivery', 
        name: 'DeliveryName', 
        width: 150, 
        editable: true 
       }, 
       { 
        label: 'Active', 
        name: 'Status', 
        width: 40, 
        editable: true, 
        align: "center", 
        formatter: "checkbox", 
        edittype: "checkbox", 
        editoptions: { value: '1:0' } 
       } 
      ], 
      loadonce: true, 
      width: 1050, 
      height: "100%", 
      pager: "#jqGridDelPager", 
      caption: "Configuration", 
      rowNum: 15, 
          jsonReader: { 
           page: function (obj) { return 1; }, 
           total: function (obj) { return 1; }, 
           records: function (obj) { return obj.d.length; }, 
           root: function (obj) { return obj.d; }, 
           repeatitems: false, 
           id: "QGDelId" 
          }, 
      onSelectRow: function (id) { 
       if (id && id !== lastSelQGDel) { 
        lastSelQGDel = id; 
       } 

      }, 
      ajaxRowOptions: { contentType: 'application/json; charset=utf-8' }, 
      serializeRowData: function (postData) { 
       return JSON.stringify({ editQGData: postData }); 
      }, 
      editurl: "Data.aspx/SaveData" 
     }); 

     $('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false }); 
     $('#jqGridDel').inlineNav('#jqGridDelPager', 
     // the buttons to appear on the toolbar of the grid 
      { 
      edit: true, 
      add: true, 
      del: true, 
      refresh: true, 
      cancel: true, 
      editParams: { 
       keys: true, 
       rowid: lastSelQGDel, 
       restoreAfterError: true, 
       reloadAfterSubmit: true, 
       successfunc: function (result) { 
        if (result.responseJSON.d == "Success") 
         alert("Data saved successfully!!"); 
        else 
         alert("There is some error in data processing"); 
        setTimeout(function() { 
         $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
        }, 50); 
       } 
      }, 
      addParams: { 
       keys: true, 
       addRowParams: { 
        successfunc: function (result) { 
         if (result.responseJSON.d == "Success") 
          alert("Data saved successfully!!"); 
         else 
          alert("There is some error in data processing"); 
         setTimeout(function() { 
          $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
         }, 50); 
        } 
       } 
      } 

使用以下參考文件..

<script src=」Scripts/jquery-1.11.0.min.js」 type=」text/javascript」></script> 
<script src=」Scripts/grid.locale-en.js」 type=」text/javascript」></script> 
<script src=」Scripts/jquery.jqGrid.min.js」 type=」text/javascript」></script> 
<script src=」Scripts/jquery-ui.min.js」 type=」text/javascript」></script> 

I」能夠加載數據並將其從JQGRID保存到SQL數據庫，反之亦然。 但是，選擇選項（列：門）沒有加載任何數據..我試圖調試代碼，並瞭解dataUrl在編輯行時通過inline-nav不會觸發。

函數BindDDInfo（返回類型爲'string'並提到了Webmethod和static）後面的代碼返回<Select><Option>……</Option></Select>格式的字符串。

<select> 
<option value='1'>Text1</option> 
<option value='2'>Test2</option> 
<option value='3'>Test3</option> 
<option value='4'>TEst5</option> 
<option value='5'>TEst6</option> 
<option value='6'>Test7</option> 
<option value='7'>Test8</option> 
<option value='8'>Test9</option> 
</select> 

通過F12（在IE9），檢查可以看到響應頭如下

Response   HTTP/1.1 200 OK 
Server   ASP.NET Development Server/10.0.0.0 
Date    Wed, 24 Feb 2016 15:07:16 GMT 
X-AspNet-Version 4.0.30319 
Cache-Control no-cache, no-store 
Pragma   no-cache 
Expires   -1 
Content-Type  text/html; charset=utf-8 
Content-Length 69186 
Connection  Close 

響應主體返回data.aspx HTML頁面和不知道哪裏出了問題。

然後，我已經添加了HTTP處理程序在web.config文件

 <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 

現在，dataUrl是打的WebMethod BindDdInfo和警報（「你好」），彈出（這是從ajaxSelectOptions），但它不是將在build選項中進行編輯選項。

的下面返回爲responsebody { 「d」： 「\ u003cselect \ u003e \ u003coption值= \ u00271 \ u0027 \ u003eTest1 \ u003c /選項\ u003e \ u003c /選擇\ u003e」}

---

的建議後，得到BindDDInfo JSON數據，我如下修改後的代碼，

我已經改變了我的webmethod返回List<Dictionary<string, object>>和下面的代碼

ajaxSelectOptions: { type: ‘POST’, 
contentType: ‘application/json; charset=utf-8’, 
datatype: ‘json’, 
success: function (result) { 
alert(JSON.stringify(result)); 
} 
} 

警報正顯示出如下

{「d」:[{「ID」:1,」Name」:」Test1″},{「ID」:2,」Name」:」Test2″}]} 

但是，buildSelect沒有擊中，

dataUrl: 「Data.aspx/BindDDInfo」, 
buildSelect: function (response) { 
var data = typeof response === 「string」 ? JSON.stringify(response) :  response, 
s = 「<select>」; 
s += ‘<option value=」0″>–Select–</option>’; 
$.each(data, function() { 
s += ‘<option value=」‘ + this.ID + ‘」>’ + this.Name + ‘</option>’; 
}); 
return s + 「</select>」; 
} 

試圖buildSelect的執行console.log（響應）和警報（反應），但它並沒有給任何彈出。

任何人都可以幫助我將數據從數據庫中獲取到JQGRID的下拉列表中。

Answer 1

您的主要問題接縫「dataUrl未在通過inlineNav編輯行時觸發」。我在代碼中看到很多可以改進的小東西。我想主要的問題是Name（Gate列）中的輸入錯誤。您應該使用的

formatter: "select" 

代替

foramtter: "Select" 

（兩個錯誤：formatter應該用來代替foramtter和​​代替"Select"）。

此外，我會建議你其他的一些小技巧：

• 刪除<div id="jqGridDelPager"></div>從網頁的HTML標記和使用pager: true代替pager: "#jqGridDelPager"。您可以跳過navGrid和inlineNav"#jqGridDelPager"參數。免費jqGrid自動爲尋呼機創建了div，navGrid和inlineNav將使用尋呼機。
• 您使用中的所有列label財產和其他textes爲colName。該選項的正確名稱是colNames而不是colName。您可以將文本從label移動到colNames陣列或移除不需要的colName陣列。
• inlineNav免費的jqGrid方法自動創建導航欄它不存在。因此您可以刪除不需要的navGrid。
• 您不需要使用ajaxSelectOptions: { cache: false, type: 'POST' }。您可以改用ajaxSelectOptions: { type: 'POST' }。
• ，如果你想，在該行的第二次點擊不能取消選擇它
• 您可以使用forceClientSorting: true選項強制數據的排序，從客戶端大小的服務器返回的您可以使用singleSelectClickMode: "selectonly"。您只需添加例如sortname: "Name"選項，通知jqGrid應該按哪個列排序數據。
• 的jsonReader的值可減小到jsonReader: {root: "d", repeatitems: false, id: "QGDelId"}。設置id: "QGDelId"意味着每個數據項都包含具有唯一值的QGDelId屬性，這應該用作rowid，這一點很重要。
• 我不明白的onSelectRow您使用的意義和lastSelQGDel變量的目標。我建議你刪除collback。
• 免費jqGrid提供了更加舒適的方式來指定底層方法的選項。例如，jqGrid的inlineEditing選項允許指定內聯編輯方法使用的常用選項。您正確的代碼，例如，在addParams.addRowParams和editParams中指定相同的選項（請參閱inlineNav的選項）。順便說一下，key: true裏面addParams而不是addParams.addRowParams的位置是錯誤的。指定jqGrid的inlineEditing選項中的通用選項要好得多。有關更多信息，請參閱the wiki article。
• 我建議你使用的

$("#jqGridDel").trigger('reloadGrid', [{fromServer: true}]); 

代替

$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');