jqGrid：從一個在一個角網格內點擊過的行獲取數據

Question

我目前正在使用jqGrid和多個子網格的項目。我試圖在單擊或雙擊某行時獲取rowid（並獲取行內的數據）。最後，我想填充一個文本框中的點擊行數據。

我已經嘗試了一些在這裏使用ondblClickRow和onSelectRow示例的變體，但wans't能夠得到它的工作。我想我錯過了一些非常簡單的東西，但沒有看到什麼。所以我回去儘可能簡化它以識別行點擊並顯示警報。這對我也不適用。

（基於jqGrid : issue loading nested sub grid with local datatype的例子）認準// *************** 部附近的底部..

var myData = [ 
// main grid data 
    { id: "1", col1: "11", col2: "12", 
     subgrid: [ 
       // data for subgrid for the id=m1 
        { id: "1", c1: "aa", c2: "ab", c3: "ac", 
         subgrid: [ 
          // data for subgrid for the id=m1, subgridId=s1a 
          { id: "1", d1: "2aa", d2: "2ab", d3: "2ac" }, 
          { id: "2", d1: "2ba", d2: "2bb", d3: "2bc" }, 
          { id: "3", d1: "2ca", d2: "2cb", d3: "2cc" } 
         ]}, 
       { id: "2", c1: "ba", c2: "bb", c3: "bc" }, 
       { id: "3", c1: "ca", c2: "cb", c3: "cc" } 
     ]}, 
    { id: "2", col1: "21", col2: "22", 
     subgrid: [ 
      // data for subgrid for the id=m2 
      { id: "1", c1: "1xx", c2: "1xy", c3: "1xz", 
       subgrid: [ 
        // data for subgrid for the id=m2, subgridId=s2a 
        { id: "1", d1: "2xx", d2: "2xy", d3: "2xz" } 
       ]} 
     ]}, 
    { id: "3", col1: "31", col2: "32" } 
], 
removeSubgridIcon = function() { 
    var $this = $(this), 
     idPrefix = $this.jqGrid("getGridParam", "idPrefix"); 
    $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function() { 
     var rowData = $this.jqGrid("getLocalRow", 
       $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id"))); 
     return rowData.subgrid == null; 
    }).unbind("click").html(""); 
}, 
isHasSubrids = function (data) { 
    var l = data.length, i; 
    for (i = 0; i < l; i++) { 
     if (data[i].subgrid != null) { 
      return true; 
     } 
    } 
    return false; 
}, 
specificGridOptions = [ 
    { 
     colNames: ["Column 1", "Column 2"], 
     colModel: [ 
      { name: "col1" }, 
      { name: "col2" } 
     ], 
     cmTemplate: { width: 200 }, 
     sortname: "col1", 
     sortorder: "desc", 
     idPrefix: "s_", 
     pager: "#pager", 
     caption: "Demonstrate how to create subgrid from local hierarchical data" 
    }, 
    { 
     colNames: ["Colunm1", "Colunm2", "Colunm3"], 
     colModel: [ 
      { name: "c1" }, 
      { name: "c2" }, 
      { name: "c3" } 
     ], 
     cmTemplate: { width: 112 }, 
     sortname: "c1", 
     sortorder: "desc" 
    }, 
    { 
     colNames: ["Col 1", "Col 2", "Col 3"], 
     colModel: [ 
      { name: "d1" }, 
      { name: "d2" }, 
      { name: "d3" } 
     ], 
     cmTemplate: { width: 90 }, 
     sortname: "d1", 
     sortorder: "desc" 
    } 
], 
commonGridOptions = { 
    datatype: "local", 
    gridview: true, 
    rownumbers: true, 
    autoencode: true, 
    height: "100%", 
    //*************** 
    onSelectRow : function() 
    { 
     alert('test!'); 
    }, 
    //also tried many variation on this 
    ondblClickRow: function(rowid) 
    { 
     alert(rowid); 
    } 
    //*************** 
    loadComplete: function() { 
     // one can use loadComplete: removeSubgridIcon, but I included 
     // curent implementation of loadComplete only to show how to call 
     // removeSubgridIcon from your loadComplete callback handler 
    removeSubgridIcon.call(this); 
}, 
subGridRowExpanded: function (subgridDivId, rowId) { 
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
     subgridLevel = $(this).jqGrid("getGridParam", "subgridLevel") + 1, 
     parentIdPrefix = $(this).jqGrid("getGridParam", "idPrefix"), 
     pureRowId = $.jgrid.stripPref(parentIdPrefix, rowId), 
     localRowData = $(this).jqGrid("getLocalRow", pureRowId); 
    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); 
    $subgrid.jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions  [subgridLevel], { 
     data: localRowData.subgrid, 
     subGrid: isHasSubrids(localRowData.subgrid), 
     subgridLevel: subgridLevel, 
     idPrefix: rowId + "_", 
     rowNum: 10000 // we use this to have no pager in the subgrids 
    })); 
} 
}; 

$("#list").jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[0], { 
    data: myData, 
    subgridLevel: 0, 
    subGrid: isHasSubrids(myData) 
})); 

任何人有任何想法爲什麼它不會識別行點擊/雙擊？

Answer 1

您在評論中寫道，您從服務器獲取網格數據。我想在這種情況下使用datatype: "local"並不是最好的選擇。看看the answer在哪裏我描述瞭如何做同樣的事情，但使用datatype: "json"。

現在我回到你的主要問題。我不明白你想要填充的文本框（HTML輸入元素）以及輸入元素是在網格內部還是在網格外部。不過，您可能遇到的唯一問題是jqGrid的idPrefix選項的正確用法。

理解這一點非常重要，jqGrid使用HTML <table>來表示網格體。 每個<tr>元素的<table>在當前實現jqGrid時必須具有id屬性。因此，來自輸入數據的id屬性將用於分配id屬性的<tr>元素的值。如果網頁上有多個網格或者網格帶有子網格，則很容易接收id重複，這在所有版本的HTML或XHTML中都是不允許的。

其他潛在的問題是使用數字作爲id值。大多數數據庫都支持自動增量數據類型，作爲表的關鍵是非常實用的。如果數據庫表格和網格行的原生id（鍵）爲整數。另一方面，還有一些額外的限制取決於使用的HTML/XHTML版本。例如HTML5規範說（見here）

值必須是在元素的家 子樹的所有ID之間獨特必須至少包含一個字符。該值不能包含任何空格字符 。

因此，即使大多數Web瀏覽器允許使用數字作爲id值屬性它是不允許的，一個可以得到的這種用法的情況下，兼容性問題。

爲了解決上述所有問題，jqGrid支持idPrefix選項（這是通過基於我的建議的方式引入的）。如果id屬性的值將從輸入數據構建爲連接idPrefix和id。例如在idPrefix: "s_"和id值「1」，「2」，在該示例的jqGrid的主電網中使用將分配"s_1"，"s_2"，"s_3"作爲主柵格的<tr>元件id屬性的值「3」。所有回調的rowid將爲id屬性（"s_1","s_2"，"s_3"）的值。如果您需要原始id您可以使用$.jgrid.stripPref去除前綴。所有由jqGrid發送到服務器的id將被jqGrid本身規範化（將調用$.jgrid.stripPref）。

所以它展示瞭如何獲取數據onSelectRow和ondblClickRow可能是由以下

onSelectRow: function (rowid, stat, e) { 
    myDebugTrace.call(this, "onSelectRow", rowid); 
}, 
ondblClickRow: function (rowid, iRow, iCol, e) { 
    myDebugTrace.call(this, "ondblClickRow", rowid); 
    e.stopPropagation(); 
}, 
... 

其中myDebugTrace函數可以聲明爲

var myDebugTrace = function (startingText, rowid) { 
     var $this = $(this), p = $this.jqGrid("getGridParam"), rowData, col1, 
      firstCol = (p.rownumbers ? 1 : 0) + (p.subGrid ? 1 : 0); 

     rowData = $this.jqGrid("getRowData", rowid); 
     col1 = rowData[p.colModel[firstCol].name]; 
     $("<span>" + startingText + " on " + rowid + " (original id=" + 
      $.jgrid.stripPref($(this).jqGrid("getGridParam", "idPrefix"), rowid) + 
      "). Data from the first column: \"" + col1 +"\"</span><br/>").appendTo("body"); 
    }; 

The corresponding demo屏幕上的下列雙擊碼來自內部子網格的行。