爲什麼jqGrid拒絕使用OnSelectRow事件多次調用它的Ajax調用

Question

我的兩個jqGrid網格有問題。首先，我有一個網格，其中一些數據可以正常工作。它有一個loadComplete事件，它將第一行設置爲選中狀態。這是爲了讓第二個jqGrid根據第一個jqGrid上的選定行（id）進行填充。

我在第一個網格上有一個onSelectRow事件，它調用一個包含第二個網格的$（'＃grid）.jqGrid（）調用的函數。這第二個網格具有鏈接到控制器中的方法的URL，從數據庫獲取一些數據。

這適用於第一個selectrow（在loadComplete之後自動發生）。

我的問題是，第二個jqGrid不會在我選擇不同的行後重新填充。程序永遠不會去控制器中的方法（我用一些日誌記錄進行測試）。我真的堅持這個，因爲它適用於第一次加載，但不是第二次加載，等等。

$("#fontsgrid").jqGrid({ 
     url: 'getfonts', 
     mtype: "post", 
     datatype: "json", 
     sortable: true, 
     colNames: ['Name', 'Family', 'Cost', 'Lic', 'File', 'Added', 'Mod', 'Add', 'Edit'], 
     colModel: [ 
      { name: 'name', index: 'name', width: 90, sorttype: "text", sortable: true, align: 'left'}, 
      { name: 'family', index: 'family', width: 100, sorttype: "text", sortable: true}, 
      { name: 'cost', index: 'cost', width: 60, sorttype: "currency", sortable: true, formatter: 'currency', formatoptions: {decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "€ "}}, 
      { name: "licenses", index: "licenses", width: 30, sorttype: "int", sortable: true}, 
      { name: "filename", index: "filename", width: 90, sorttype: "text", sortable: true}, 
      { name: "date_upload", index: "date_upload", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }}, 
      { name: "date_edit", index: "date_edit", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }}, 
      {name: "add_cart", index: 'add_cart', width: 70}, 
      {name: "edit", index: "edit", width: 30} 
     ], 
     rowNum: 100, 
     width: 580, 
     height: 359, 
     rowList: [100, 250, 500], 
     sortname: "name", 
     sortorder: 'asc', 
     viewrecords: true, 
     gridview: true, 
     caption: "Font List", 
     pager: $('#pager'), 
     loadComplete: function() { 
      $('#fontsgrid').jqGrid('setSelection', $("#fontsgrid tr[role]").next().attr("id")); 
     }, 
     onSelectRow: function (id) { 
      loadInstallGridFonts(id); 
     } 
    }).navGrid('#pager', {edit: false, add: false, del: false}); 

    function loadInstallGridFonts($fontid) { 
     $('#installGridFonts').jqGrid({ 
      url: 'getinstallations', 
      mtype: "post", 
      datatype: "json", 
      sortable: true, 
      postData: {'fontid': $fontid}, 
      colNames: ['Installation', 'Bedrijfsnaam', 'Date Installed', 'Edit'], 
      colModel: [ 
       { name: 'installation', index: 'installation', width: 90, sorttype: "text", sortable: true, align: 'left'}, 
       { name: 'bedrijf', index: 'bedrijf', width: 100, sorttype: "text", sortable: true}, 
       { name: "date_installed", index: "date_installed", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }}, 
       {name: "edit", index: "edit", width: 30} 
      ], 
      rowNum: 50, 
      width: 480, 
      height: 359, 
      altRows: 'true', 
      rowList: [50, 75, 100], 
      sortname: "installation", 
      sortorder: 'asc', 
      viewrecords: true, 
      gridview: true, 
      caption: "Installation List", 
      pager: $('#pagerInstall') 
     }).navGrid('#pagerInstall', {edit: false, add: false, del: false}); 
    } 

'getfonts'和'getinstallations'都是路由中使用的控制器/方法（codeIgniter）的別名。

問題是，程序只進行一次'getinstallations'後面的方法，而不是在新的rowselect之後。

Answer 1

我在代碼中看到很多問題。首先，它要明白，這樣的代碼

$('#installGridFonts').jqGrid({ 
    ... 
}); 

創建電網是非常重要的。這意味着它將最初放置在頁面上的<table>元素轉換爲div和表格的相對複雜的結構（有關示例，請參閱here）。其結果是：您只能撥打。如果您嘗試在第二次創建相同的網格jqGrid驗證網格已經存在，並且什麼都不做。這正是你所能看到的。

一個更重要的事情是：的jqGrid創建的div和表中表示網格一旦的結構，但它可以填主體格柵的（網格內的數據）多次。如果您需要使用從服務器返回的數據填充網格，則應該只設置網格的參數（url,datatype,postData等），然後製作$("#installGridFonts").trigger("reloadGrid")。重新加載意味着對服務器執行新的請求並將數據加載到網格中。

因此，代碼可以瞭解以下信息：

// we will use navGrid below more as once without editing buttons 
// so we change defaults of navGrid with the folling settings 
$.extend($.jgrid.nav, {edit: false, add: false, del: false}); 

// creates the second grid. because we don't want to make any request 
// to the server at the time we will use datatype: "local" 
$("#installGridFonts").jqGrid({ 
    datatype: "local", 
    ... 
}).jqGrid("navGrid", "#pagerInstall"); 

// create the first grid 
$("#fontsgrid").jqGrid({ 
    ... 
    onSelectRow: function (rowid) { 
     $("#installGridFonts").jqGrid("setGridParam", { 
      datatype: "json", 
      postData: {fontid: rowid} 
     }).trigger("reloadGrid"); 
    } 
}).jqGrid("navGrid", "#pager"); 

如果它需要你可以在創建後直接隱藏第二格，並顯示它onSelectRow回調的內部。