如何将点击事件添加到jstree(jQuery插件)异步列表中?

发布于 2024-08-21 11:32:35 字数 1237 浏览 7 评论 0原文

我想将点击事件添加到 jstree 的异步列表项。

理想的结果是:当我点击jstree中的项目时,项目的内容将作为参数传输到sql查询中,然后执行查询并在同一页面或另一个页面中显示结果集。

虽然我不知道如何实现它。我在 jquery.tree.js 中找到了以下代码。我想我应该修改这个事件。但我不知道怎么办。您能看一下代码并给我一些建议或指导吗?

$("#" + 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;
  })

页面代码:

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

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

非常感谢。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你与昨日 2024-08-28 11:32:35

您可以使用回调方法onselect,该方法通常在单击节点时发生(甚至尽管您也可以通过脚本选择它)

如果您的节点(li)具有“node_1234”形式的I​​D,那么:

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

我刚刚意识到,还有一种更简单的方法可以完成您需要的操作:

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

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>
风筝在阴天搁浅。 2024-08-28 11:32:35
.delegate("a","click", function(e) {
         console.log($(this).parent().attr("id").split("_")[1]); //get ID of clicked node
  })
.delegate("a","click", function(e) {
         console.log($(this).parent().attr("id").split("_")[1]); //get ID of clicked node
  })
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文