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

Question

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

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

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

谢谢，布拉德

Answer 1

data_*的用法单元格或行上的属性是保存特定于单元格或特定于行的信息的一种方法。请参阅the answer对应的代码示例。

在我看来，另一种方式更适合你:使用beforeProcessing解析原始服务器响应。 beforeProcessing里面您可以完全访问从服务器返回的所有数据。我们可以通过 rowid 准备一个带有附加信息的对象作为映射。这样以后就可以很容易地通过 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>元素包含自定义行特定信息。我建议像这样构建对象( map )

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

其中通过rowid保存自定义信息。可以保存这样的 map 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");
        }
    }

对应的demo你会发现here 。如果单击第一列中的单元格，则会出现新的浏览器窗口 www.google.com将被打开。