2011-07-22 81 views
2

在dojo校园中有一个树形超链接示例树。他们不可点击。有没有人有可点击链接的dojo实现?您是否能够确定点击了哪个节点/链接?我正在寻找这样做的示例代码。Dojo树中的超链接

以下是来自dojo校园的示例代码。如何使这些链接可点击,以及如何从点击图像实现节点选择?

谢谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html dir="ltr"> 

    <head> 
     <style type="text/css"> 
      body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
     djConfig="parseOnLoad: true"> 
     </script> 
     <script type="text/javascript"> 
      dojo.require("dojo.data.ItemFileReadStore"); 
      dojo.require("dijit.Tree"); 
      var rawdata = [{ 
       label: 'Something <b>important</b>', 
       id: '1', 
       children: [{ 
        label: 'Life', 
        id: '1.1' 
       }, 
       { 
        label: 'Liberty', 
        id: '1.2' 
       }] 
      }, 
      { 
       label: 'Some links (note: the link is <b>not</b> clickable)', 
       id: '2', 
       children: [{ 
        id: '2.1', 
        label: '<a href="http://dojotoolkit.org">Dojo Toolkit</a>' 
       }, 
       { 
        id: '2.2', 
        label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />' 
       }, 
       { 
        id: '2.3', 
        label: '<a href="http://blog.nqzero.com">my blog</a>' 
       }] 
      }]; 
      function prepare() { 
       var store = new dojo.data.ItemFileReadStore({ 
        data: { 
         identifier: 'id', 
         label: 'label', 
         items: rawdata 
        } 
       }); 
       var treeModel = new dijit.tree.ForestStoreModel({ 
        store: store 
       }); 
       var treeControl = new dijit.Tree({ 
        model: treeModel, 
        showRoot: false, 
        _createTreeNode: function(
        /*Object*/ 
        args) { 
         var tnode = new dijit._TreeNode(args); 
         tnode.labelNode.innerHTML = args.label; 
         return tnode; 
        } 
       }, 
       "treeOne"); 
      } 
      dojo.addOnLoad(prepare); 
     </script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" 
     /> 
    </head> 

    <body class=" claro "> 
     <div id="treeOne"> 
     </div> 
     <!-- NOTE: the following script tag is not intended for usage in real 
     world!! it is part of the CodeGlass and you should just remove it when 
     you use the code --> 
     <script type="text/javascript"> 
      dojo.addOnLoad(function() { 
       if (document.pub) { 
        document.pub(); 
       } 
      }); 
     </script> 
    </body> 

</html> 

回答

0

你可以做一个连接到树上的onClick事件。创建树时,向构造函数添加一个额外的onClick参数,指向具有以下签名的函数:

function myOnClickHandler(item, tree, evt){ 
    //item is the node's DataStore item 
    //I forgot if tree is the whole tree or just the currtent node 
    //evt is the usual event object, with things like mouse position, etc... 

    console.log('clicked a tree'); 
} 

var treeControl = new dijit.Tree({ 
    model: treeModel, 
    showRoot: false, 
    _createTreeNode: function(/*Object*/ args) { 
     var tnode = new dijit._TreeNode(args); 
     tnode.labelNode.innerHTML = args.label; 
     return tnode; 
    }, 
    onClick: myOnclickHandler // THIS LINE // 
}, 
"treeOne");