Hyperlinks in Dojo Tree_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-22 03:08 出处：网络

There is an example tree in the dojo campus with hyperlinks.They are not clickable.Does anyone have a dojo implementation with clickable links?Have you been able to determine which node/link was click

There is an example tree in the dojo campus with hyperlinks. They are not clickable. Does anyone have a dojo implementation with clickable links? Have you been able to determine which node/link was clicked? I am looking for sample code that does this.

Here is the sample code from dojo campus. How do I make these links clickable and how do I implement node selection from click of image?

Thanks.

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

You can do a connect to the onClick event on the Tree. When creating your Tree, add an extra onClick parameter to your constructor, pointing to a function with the following signature:

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");