Question

我目前正在开发一个使用带有多个子网格的jqGrid的项目。当点击或双击行时，我正在尝试获取rowid（并获取行内的数据）。最后，我想用一个点击的行填充一个文本框。

我在这里使用ondblClickRow和onSelectRow示例尝试了一些变体，但是无法使其正常工作。我想我错过了一些非常简单但却看不到的东西。所以我回去并尽可能简化它，以便只识别行点击并显示警报。这对我也不起作用。

（基于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>属性的值。如果一个网页上有一个网格，或者一个网格带有子网格，则很容易收到所有HTML或XHTML版本都不允许的id重复项。

其他潜在问题是将数字用作id值。大多数数据库都支持自动增量数据类型，它非常实用，是表的关键。在这种情况下，数据库表和网格行的本机id（键）将是整数。另一方面，还有一些额外的限制取决于使用的HTML / XHTML版本。例如，HTML5规范说（见here）

该值必须在元素主页中的所有ID中唯一子树和必须包含至少一个字符。价值不能包含任何空格字符。

因此，即使大多数Web浏览器允许使用数字作为id属性的值，也不允许使用数字，并且在使用时会出现兼容性问题。

要解决上述所有问题，jqGrid支持idPrefix选项（根据我的建议引入的方式）。在这种情况下，id属性的值将构建为输入数据中idPrefix和id的连接。例如，如果idPrefix: "s_"和id值为“1”，则在示例jqGrid的主网格中使用“2”，“3”将分配"s_1"，"s_2" ，"s_3"作为主网格的id元素的<tr>属性的值。所有回调的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显示以下内容。

enter image description here

jqGrid：从已在分层网格中单击的行中获取数据

1 个答案: