VSS控件TreeView顶级节点显示图标而不是节点名称

时间:2016-09-12 11:54:47

标签: tfs treeview azure-devops tfs2015

我按照这个方法使用VSS控件TreeView(在TFS2015.3上): https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/ui-controls/treeviewo

但顶级节点显示奇怪的图标而不是节点名称(见图) result http://i67.tinypic.com/1zd1bbo.jpg

1 个答案:

答案 0 :(得分:0)

按照您提供的说明,我没有看到任何问题。以下是我的HTML中的内容供您参考:

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>EdControl</title>
     <script src="sdk/scripts/VSS.SDK.js"></script>
 </head>
 <body>
     <h1>EdControl</h1>
     <div id="sample-container"></div>
     <script type="text/javascript">
         VSS.init({
             // Our extension will explicitly notify the host when we're done loading
             explicitNotifyLoaded: true,

             // We are using some Team Services APIs, so we will need the module loader to load them in
             usePlatformScripts: true,
             usePlatformStyles: true
         });
         VSS.require(["VSS/Controls", "VSS/Controls/TreeView"],
    function (Controls, TreeView) {

        var container = $("#sample-container");


        var source = [
           {
               name: "Asia", icon: "icon icon-people", children: [
                { name: "Russia" },
                { name: "Afghanistan" },
                { name: "India" },
                { name: "China" }]
           },
           {
               name: "Africa", icon: "icon icon-people", children: [
                { name: "Algeria" },
                { name: "Botswana" },
                { name: "Cameroon" }]
           },
           {
               name: "Europe", icon: "icon icon-people", children: [
                { name: "Germany" },
                { name: "Slovenia" },
                { name: "Belgium" },
                { name: "Luxembourg" },
                { name: "Turkey" }
               ],
               expanded: true
           }
        ];

        // Converts the source to TreeNodes
        function convertToTreeNodes(items) {
            return $.map(items, function (item) {
                var node = new TreeView.TreeNode(item.name);
                node.icon = item.icon;
                node.expanded = item.expanded;
                if (item.children && item.children.length > 0) {
                    node.addRange(convertToTreeNodes(item.children));
                }
                return node;
            });
        }

        // Generate TreeView options
        var treeviewOptions = {
            width: 400,
            height: "100%",
            nodes: convertToTreeNodes(source)
        };

        // Create the TreeView inside the specified container
        Controls.create(TreeView.TreeView, container, treeviewOptions);
        VSS.notifyLoadSucceeded();
    });
     </script>
 </body>
 </html>