jstree question | 易学教程

问题

I am using XML as my datasource for my JSTree tree, but I cannot find any examples where you can set a node in your XML as a hyperlink, or anywhere to set your own node types with their own icon etc. Has anybody done this and have examples?

回答1:

I think you're looking for the jsTree Types plugin documentation.

回答2:

The documentation for jsTree states:

All attributes you set on the item node will be transfered to the resulting li node. All attributes you set on the name node will be transfered to the resulting a node.

By default, jsTree adds an href address of the current page to the anchor tag generated from the name node in the XML markup (flat or nest). You can override the href with your own address. Here's an example:

<item id="link__1" parent_id="0">
  <content>
    <name title="Click here to go to website" href="http://google.com">Google</name>
  </content>
</item>

Another option is to use jQuery to capture the click event on the a tag and redirect based on the text node or something. In that case, use a delegate on a container (diagMenu in the following example) for the jsTree to monitor the clicks.

$("#diagMenu").delegate('a', 'click', function(e) {
                         //code to redirect based on event object
                       });

Kind of a late response but hopefully this is a help to you or others that stumble across this answer.

回答3:

jstree Nodes render as hyperlinks ("a" or "anchor" tags) as long as you are set up right. You can bind some javascript to the node select event like this:

jQuery(".foldertree").bind("select_node.jstree", function (e, data) {
    // use this to debug: alert("data.rslt.name=" + data.rslt.name + " data.rslt.obj.attr('rel')=" + data.rslt.obj.attr("rel"));

    // to get selected node Id and type
    var nodeId = data.rslt.obj.attr("id");
    var nodeType = data.rslt.obj.attr("rel");

    // to get node's immediate parent node
    parentId = data.rslt.obj[0].parentNode.parentNode.id;

    // use this info to call a method or go to another page
    window.location = "somepage.aspx?" + nodeId;
}

Here is how I set different node types with different icons. My tree represents documents in folders, so I have "default" (Folders), and "form" (Documents) types:

jQuery(".foldertree")

.jstree({

.
. (various setup stuff)
.

"types": {
    // -2 means don't check (faster)
    "max_depth": -2,
    "max_children": -2,
    // This will prevent moving or creating any other type as a root node
    "valid_children": ["default"],
    "types": {

        // Folders
        "default": {
            // can have files and other folders inside of it
            "valid_children": ["default", "form"],
            "icon": {
                    "image": "css/jstree/folder.png"
            }
        },

        // Documents (saved forms). 
        "form": {
            // No children (so only leaf nodes)
            "valid_children": "none",
            // override theme icon
            "icon": {
                    "image": "css/jstree/file.png"
            }
        },


    } // end types (within types)
}, // end types (outer)

"themes":

.
. (etc)
.

来源：https://stackoverflow.com/questions/5147401/jstree-question

标签

jquery

jstree