编辑:复选框不会触发

时间:2019-08-17 15:05:00

标签: jstree

这是我的小提琴。 https://jsfiddle.net/NervousElk/6scrbkex/12/。 树节点填充得很好,但是我找不到一种方法来检测用户选中/取消选中了哪个复选框。

<!DOCTYPE html>
<html>
<head>
<title>testver</title>

<link   rel  = "stylesheet" href="css/jstree/themes/default/style.min.css"> 

</head>           
  <body>                             
  <script src  = "jquery-3.3.1.min.js"></script>                  
  <script src  = "jquery.js"></script>            
  <script src  = "jstree.min.js"></script>    

  <div id="staffallocatertree">                             
  </div> 

  <button id = "treetestbtn" >Build tree
  </button> 

  <script>

  document.getElementById("treetestbtn").addEventListener("click", buildthetree);       

  function buildthetree()
  {     
   //$('#staffallocatertree').jstree('refresh');
   $('#staffallocatertree').jstree(
   {

     'plugins': [ "checkbox", "themes",  "sort", "ui", "state" ], 
     'core' : 
     {
        "check_callback": true,

        /* 'data' : 
        {
            "url"      : "tl2_get_allstaff_as_tree.php",              
            "dataType" : "json" 

        }, */

        'data' : 
        [
            { "id" : "ajson1", "parent" : "#", "text" : "Department 1" },
            { "id" : "ajson2", "parent" : "#", "text" : "Department 2" },
            { "id" : "ajson3", "parent" : "ajson2", "text" : "Dave" },
            { "id" : "ajson4", "parent" : "ajson2", "text" : "Jim" },
        ],

        "checkbox": {       
            "three_state" : false, // to avoid that fact that checking a node also check others
            "whole_node" : false,  // to avoid checking the box just clicking the node 
            "tie_selection" : false // for checking without selecting and selecting without checking
        },
        //"plugins": ['checkbox']

     },

   }) 
   .on("check_node.jstree uncheck_node.jstree", function(e, data) 
   {
            alert(data.node.id + ' ' + data.node.text + (data.node.state.checked ? ' CHECKED': ' NOT CHECKED'))
   })

  };     
</script>     
</body>  
</html>

填充树后,我想与复选框交互并检测节点和文本以供以后使用。为此,我试图触发check_node / uncheck_node。

感谢任何指针。

1 个答案:

答案 0 :(得分:0)

令人惊讶的是,这似乎是open issue。 幸运的是,提供的答案有效,可以收听select_node.jstree。 就您而言,只需更改

.on("check_node.jstree uncheck_node.jstree", function(e, data) {})

.on("select_node.jstree unselect_node.jstree", function(e, data) {})

希望有帮助!