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

Question

制作了我自己的 VSTS 扩展，returns 一个带有使用 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"].link(w.url) 替换 w.fields["System.Title"]，结果是 table 中的 html 超链接，而不是网格内的超链接。

有什么想法吗？

Answer 1

在网格中添加 link 不支持此功能。但是你可以调用 Open row details 方法来实现你想要的功能。获取URL信息，触发openRowDetail方法时，开启新的window

<!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>

Answer 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 容器中呈现为网格中的网格单元格，还允许您设置目标。

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

VSTS extensions - Hyperlinks in Grid Source

javascript

azure-devops

azure-devops-extensions