0

制作了我自己的 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 超链接，而不是网格内的超链接。

有任何想法吗？

4

2 回答 2

0

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

首先，在更高版本的列定义中，您只需将 a 添加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 容器中呈现为网格中的网格单元，并且还允许您设置目标。

于 2022-01-07T10:55:00.370 回答
0

在网格中添加链接不支持此功能。但是您可以调用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>
于 2018-01-02T07:00:50.987 回答