0

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

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

(基于jqGrid 中的示例:问题加载具有本地数据类型的嵌套子网格)在底部附近查找 //*************** 部分..

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)
}));

任何人都知道为什么它无法识别行单击/双击?

4

1 回答 1

3

您在评论中写道,您从服务器获取网格数据。我想datatype: "local"在这种情况下使用的不是最好的选择。看看我描述如何做同样的方式的答案datatype: "json",但使用.

现在我回到你的主要问题。我不明白您要填充什么文本框(HTML 输入元素)以及输入元素是在网格内部还是在网格外部。不过,您可能遇到的唯一问题是正确使用idPrefixjqGrid 选项。

了解 jqGrid 使用 HTML<table>来表示网格主体非常重要。在 jqGrid 的当前实现中,必须有每个<tr>元素的<table>id属性。因此,id输入数据中的属性将用于分配元素id属性的值。<tr>如果页面上有多个网格,或者如果一个网格带有子网格,则很容易接收id到所有版本的 HTML 或 XHTML 中不允许的重复项。

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

该值在元素的主子树中的所有 ID 中必须是唯一的,并且必须至少包含一个字符。该值不得包含任何空格字符。

因此,即使大多数 Web 浏览器允许使用数字作为id属性的值,但它是不允许的,并且在使用它的情况下可能会出现兼容性问题。

为了解决上述所有问题,jqGrid 支持idPrefix选项(这是根据我的建议顺便介绍的)。在这种情况下,id属性的值将被构建为输入数据的连接idPrefixid例如,在示例 jqGrid 的主网格中使用idPrefix: "s_"id值“1”、“2”、“3”的情况下,jqGrid 将分配"s_1", "s_2","s_3"作为主网格元素的id属性值。<tr>所有回调中的rowid将是来自id属性 ( "s_1", "s_2", "s_3") 的值。如果您需要获取原件 id,您可以使用$.jgrid.stripPref去除前缀。jqGrid 将发送到服务器的所有 id 都将被规范化($.jgrid.stripPref将被 jqGrid 本身调用)。

因此,显示如何获取数据的代码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");
    };

双击内部子网格中的行,相应的演示会显示以下内容。

在此处输入图像描述

于 2013-01-10T10:45:36.907 回答