javascript - 将存储在XML中的数据传递给onCellSelect

我试图将存储在XML文件中的数据（URL）传递给onCellSelect，以便我可以用它打开一个新页面。该网站可以在www.bcgsc.ca/downloads/bdavis/tempsite3/上找到。

由于我一直无法找到一种直接传输此数据的方法（即，我不能像cellattr函数那样访问rawObject，对吗？），我的方法是在cellattr函数中提取此数据，然后使用它来定义data- *属性（特别是data-rowSpecificURL，fwiw），然后在cellSelect中提取该属性，但是当我尝试使用getRowData或getLocalRow或getCell提取该数据时，它将向我显示包含在其中的属性紧接在标签下方。

有没有人有什么建议？如果我知道怎么做，我可以在div标签而不是td标签中设置data- *属性，但是我不知道该怎么做。或者，如果有人对如何从td标签提取此属性有任何建议。或如何直接访问rawObject。

谢谢，
布拉德

最佳答案

在单元格或行上使用data_*属性是保存特定于单元格或特定于行的信息的一种方法。有关相应的代码示例，请参见the answer。

在我看来，另一种方式更适合您：使用beforeProcessing解析原始服务器响应。在beforeProcessing内部，您可以完全访问服务器返回的所有数据。一个人可以准备一个带有附加信息的对象，作为按行标识的映射。这样一来，以后可以通过rowid轻松获取特定行的信息。具有附加信息的对象可以节省新的扩展标准jqGrid参数列表。

例如，让我们将有关行的输入信息数据扩展为以下内容

<row id='123'>
    <onHoverText>this is my foo</onHoverText>
    <rowSpecificURL>http://www.google.com</rowSpecificURL>
    <cell><![CDATA[Blood]]></cell>
    <cell class="has_data in_progress"></cell>
    ...
</row>

在<onHoverText>和<rowSpecificURL>元素包含自定义行特定信息的情况下。我建议像这样构建对象（地图）

{
    123: {tooltip: "this is my foo", url: "http://www.google.com" }
}

通过rowid保存自定义信息。可以使用以下方式将此类地图myData保存为自定义jqGrid参数myParam

$(this).jqGrid("setGridParam", { myParam: myData });

稍后，您可以通过myParam参数获取信息

var rowSpecificInformation = $(this).jqGrid("getGridParam", "myParam")[rowid];
// rowSpecificInformation.tooltip and rowSpecificInformation.url

例如，您上一个问题的演示中的代码可以按以下方式重写

$("#list").jqGrid({
    url: "BradDavis2.xml",
    colModel: [
        { name: "c1", width: 360, classes: 'ui-state-default',
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                // get custom row information from custom parameter
                var p = $(this).jqGrid("getGridParam", "myParam"); // this.p.myParam
                // get object with additional row specific information from p[rowId]
                return p != null && p[rowId] != null && p[rowId].tooltip != null ?
                    ' title="' + p[rowId].tooltip + '"' : '';
        }},
        ...
    ],
    ...
    beforeProcessing: function (data) {
        var rows = $(">rows>row", data), l = rows.length, i, item, myData = {}, $p, id, myInfo;
        for (i = 0; i < l; i++) {
            item = rows[i];
            id = $(item).attr("id"); // get rowid

            // fill custom information from every row to object
            myInfo = {};
            $p = $("onHoverText", item);
            if ($p.length > 0) {
                myInfo.tooltip = $p.text();
            }
            $p = $("rowSpecificURL", item);
            if ($p.length > 0) {
                myInfo.url = $p.text();
            }

            // save the object with custom information in a map by id
            myData[id] = myInfo;
        }
        // save custom information in custom jqGrid parameter
        $(this).jqGrid("setGridParam", { myParam: myData });
    },
    onCellSelect: function(rowid, iCol, cellcontent, e, rawObject) {
        var $self = $(this),
            colModel = $self.jqGrid("getGridParam", "colModel"),
            myData = $self.jqGrid("getGridParam", "myParam"); // this.p.myParam

        if (colModel[iCol].name === "c1" && myData != null && myData[rowid] != null && myData[rowid].url != null) {
            window.open(myData[rowid].url, "_blank");
        }
    }

您将在here中找到相应的演示。如果单击第一列中的单元格，则会打开带有www.google.com的新浏览器窗口。