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屏幕上的下列双击码来自内部子网格的行。