VSTS 扩展 - 网格源中的超链接答案

【问题标题】：VSTS extensions - Hyperlinks in Grid SourceVSTS 扩展 - 网格源中的超链接
【发布时间】：2017-12-28 19:55:21
【问题描述】：

制作了我自己的 VSTS 扩展，它返回一个带有使用 wiql 读取的错误列表的网格。

我希望（UI 控件）网格包含错误标题和错误 URL 的超链接，以便可以单击标题跳转到错误。我找不到任何可能这样做，但我不相信这是不可能的。

这就是我将源构建到网格的方式：

    var sourceArray = workItems.map(function (w) {
        return [
            w.id, 
            w.fields["System.Title"], 
            w.fields["System.State"], 
            w.fields["GrundfosScrum.gfSeverity"], 
            w.fields["GrundfosScrum.gfLikelihood"], 
            w.fields["System.AssignedTo"]];
    });

后来：

    var options = {
        width: "100%",
        height: "500px",
        source: sourceArray,
        columns: [
            { text: "ID", index: 0, width: 100, headerCss: "mystyle" },
            { text: "Title", index: 1, width: 200, headerCss: "mystyle" },
            { text: "State", index: 2, width: 100, headerCss: "mystyle" },
            { text: "Severity", index: 3, width: 200, headerCss: "mystyle" },
            { text: "Likelihood", index: 4, width: 200, headerCss: "mystyle" },
            { text: "Assigned To", index: 5, width: 300, headerCss: "mystyle" },
        ]
    };

我尝试将w.fields["System.Title"]替换为w.fields["System.Title"].link(w.url)，结果是表格中的html超链接而不是网格中的超链接。

有什么想法吗？

【问题讨论】：

有人有想法吗？还是根本不支持？

标签： javascript azure-devops azure-devops-extensions

【解决方案1】：

在网格中添加链接不支持此功能。但是你可以调用Open row details 方法来实现你想要的功能。当openRowDetail方法被触发时，获取URL信息并打开一个新窗口。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Open Row Sample</title>
    <script src="sdk/scripts/VSS.SDK.js"></script>
</head>
<body>
    <script type="text/javascript">
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true,
            usePlatformStyles: true       
        });
    </script>
    <h1>Open Row Sample</h1>
    <div id="grid-container"></div>
    <script type="text/javascript">
    VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
    function (Controls, Grids) {
    var dataSource = [];
    dataSource.push({key: "VisualStudio", value: "https://www.visualstudio.com/"});
    dataSource.push({key: "Bing", value: "https://www.bing.com/"});

    var grid = Controls.create(Grids.Grid, $("#grid-container"), {
        height: "1000px",
        columns: [
            { text: "Property key", index: "key", width: 150 },
            { text: "Property value", index: "value", width: 600 }
        ],
        source: dataSource,
        openRowDetail: (index) => {
        var info = grid.getRowData(index);
        window.open(info.value);
    }
    });
    VSS.notifyLoadSucceeded();
    });
    </script>
</body>
</html>

【讨论】：

谢谢。您提供的示例显示了使用 TypeScripte 的语法。你能帮我举一个使用 JavaScript 的例子吗？
@wolf_guru 和例子差不多。有关详细信息，请参阅我的更新答案。

【解决方案2】：

对于像我一样在这方面苦苦挣扎的其他人（因为文档对于更细粒度的东西来说非常差），我按照以下方式进行了操作。

首先，在更高版本的列定义中，您只需将hrefIndex 添加到您希望绑定的字段，例如

{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl' },

这在大多数情况下都有效，但似乎没有（或至少在我正在使用的版本中）目标的绑定。因此，我将覆盖 _drawCell 函数调用，如下所示：

{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl', getCellContents : renderHref }

renderHref 在哪里：

var renderHref = function(rowInfo, dataIndex, expandedState, level, column, indentIndex, columnOrder){
                
    var indent;
    var cell = document.createElement('div');
    cell.className = 'grid-cell';

    var width = column.width || 20;
    cell.style.width = isNaN(width) ? width : width + "px";

    var jCell = $(cell);
    var hrefText = this.getColumnValue(dataIndex,column.hrefIndex,-1);
    var text = this.getColumnText(dataIndex,column,columnOrder);
    jCell.append($("<a/>").attr("href", hrefText).attr('target','_blank').text(text));

    return jCell;
};

请注意，在我的覆盖中，我没有为缩进等使用与原始 _drawCell 相同的逻辑，因为我不需要它。

这确保了超链接在 div 容器中呈现为网格中的网格单元，并且还允许您设置目标。

【讨论】：