php - How to add click event to jstree's(jQuery plugin) asynchronous list? - Stack Overflow

admin管理员组

文章数量:1290941

I want to add click event to jstree's asynchronous list items.

The ideal result is: when i click the items in the jstree, the content of the item will be transfered to a sql query as a parameter, and then, the query is executed and display a result set in the same page or in another page.

While I don't know how to implement it. I found the following code in jquery.tree.js. And I think I should modify the event. But i don't know how. Can you see the code and give me some suggestions or guidance?

$("#" + this.container.attr("id") + " li a")
 .live("click.jstree", function (event) { // WHEN CLICK IS ON THE TEXT OR ICON
  if(event.which && event.which == 3) return true;
  if(_this.locked) {
   event.preventDefault(); 
   event.target.blur();
   return _this.error("LOCKED");
  }
  _this.select_branch.apply(_this, [event.target, event.ctrlKey || _this.settings.rules.multiple == "on"]);
  if(_this.inp) { _this.inp.blur(); }
   event.preventDefault();
   event.target.blur();
   return false;
  })

The page code:

<script type="text/javascript" >
    $(function () { 
        $("#async_json_1").tree({
            data : { 
                type : "json",
                opts : {
                    url : "twodimen.php"
                }
            },
            callback:{
                onselect: function(node,tree){

                }
            }
        });
    });
</script>

Thanks very much.

I want to add click event to jstree's asynchronous list items.

The ideal result is: when i click the items in the jstree, the content of the item will be transfered to a sql query as a parameter, and then, the query is executed and display a result set in the same page or in another page.

While I don't know how to implement it. I found the following code in jquery.tree.js. And I think I should modify the event. But i don't know how. Can you see the code and give me some suggestions or guidance?

$("#" + this.container.attr("id") + " li a")
 .live("click.jstree", function (event) { // WHEN CLICK IS ON THE TEXT OR ICON
  if(event.which && event.which == 3) return true;
  if(_this.locked) {
   event.preventDefault(); 
   event.target.blur();
   return _this.error("LOCKED");
  }
  _this.select_branch.apply(_this, [event.target, event.ctrlKey || _this.settings.rules.multiple == "on"]);
  if(_this.inp) { _this.inp.blur(); }
   event.preventDefault();
   event.target.blur();
   return false;
  })

The page code:

<script type="text/javascript" >
    $(function () { 
        $("#async_json_1").tree({
            data : { 
                type : "json",
                opts : {
                    url : "twodimen.php"
                }
            },
            callback:{
                onselect: function(node,tree){

                }
            }
        });
    });
</script>

Thanks very much.

• php
• javascript
• jquery
• jstree

Share Improve this question Follow edited Jul 13, 2010 at 2:00 Ned Batchelder 376k7777 gold badges581581 silver badges673673 bronze badges asked Feb 12, 2010 at 13:36 SUN JiangongSUN Jiangong 5,3121616 gold badges6060 silver badges7777 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You could use the callback method onselect which usually takes place when the node is clicked (even though you can also select it by script)

if your nodes (the li) have an id of the form "node_1234", then:

<script type="text/javascript" >
 $(function () { 
  $("#async_json_1").tree({
   data : { 
    type : "json",
    opts : {
     url : "twodimen.php"
    }
   },
   callback: {
      onselect: function(node, tree) {
         var id = $(node).attr("id").split("_")[1]; // that is 1234
         $.ajax({
            url: "your/url",
            data: "id="+id,
            success: function(data){
               alert("Great");
            }
         });
      }
   }
  });
 });
</script>

---

I just realized, that there is also an even simpler way of doing what you need:

<script type="text/javascript" >
 $(function () { 
  $("#async_json_1").tree({
   data : { 
    type : "json",
    opts : {
     url : "twodimen.php"
    }
   }
  });
  $(".tree a").live("click", function(e) {
     // your code here
  }) 
 });
</script>

.delegate("a","click", function(e) {
         console.log($(this).parent().attr("id").split("_")[1]); //get ID of clicked node
  })

本文标签： phpHow to add click event to jstree39s(jQuery plugin) asynchronous listStack Overflow