带有响应数据的jstree刷新树

时间:2015-09-17 08:45:19

标签: jstree

我的第一个问题,为什么我无法进入' check_node.jstree'事件,虽然我检查树中的复选框.. 第二。这是我的树定义,每次我点击展开按钮触发& open_open.jstree'事件和刷新树与新数据..但重建树后,它再次触发事件并发布到服务器..我怎么能刷新树然后停止工作。

<!doctype html>
<html>

<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>

<body>
  <dom-module id="my-component-one">
    <template>
      <div class="content-wrapper">
        <content select="*" />
      </div>
      Counter 1: <span counter1>0</span>
      <input type="button" value="Increment counter" on-click="_incrementCounter" />
    </template>
  </dom-module>
  <dom-module id="my-component-two">
    <template>
      <content select="*" />
      <span class="counter blue">
          Counter 2: <span counter2>0</span>
      </span>
      <span class="counter magenta">
          Counter 3: <span counter3>0</span>
      </span>
    </template>
  </dom-module>

  <my-component-one>
    <my-component-two></my-component-two>
  </my-component-one>

  <script>
    (function() {
      Polymer({
        is: 'my-component-one',
        _incrementCounter: function() {
          // Note: Polymer.dom(this) accesses the light dom. Use Polymer.dom(this.root) 
          // to access the element's local dom
          var componentTwo = Polymer.dom(this).querySelector('my-component-two');

          if (!componentTwo) return; // don't do anything when there is no my-component-two

          // access element's local dom by getting it's root property
          var c2_counter2 = Polymer.dom(componentTwo.root).querySelector('[counter2]');
          var c2_counter3 = Polymer.dom(componentTwo.root).querySelector('[counter3]');
          var c1_counter1 = Polymer.dom(this.root).querySelector('[counter1]'); // this can be shortened to this.$$
          var c1c1 = parseInt(c1_counter1.innerHTML);
          var c2c2 = parseInt(c2_counter2.innerHTML);
          var c2c3 = parseInt(c2_counter3.innerHTML);
          c1_counter1.innerHTML = c1c1 + 1;
          c2_counter2.innerHTML = c2c2 + 1;
          c2_counter3.innerHTML = c2c3 + 1;
        }
      });
      Polymer({
        is: 'my-component-two'
      });
    })();
  </script>
</body>

</html>

并使用响应数据重建jstree:

$('#tree_2').jstree({
    'plugins': ["checkbox","types","json_data" ,"ui"],
    'core': {
        "themes" : {
            "responsive": true,
            "icons":true
        },
        'data': [{}]
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder icon-state-warning icon-lg"
        },
        "file" : {
            "icon" : "fa fa-file icon-state-warning icon-lg"
        }
    }

}).bind('check_node.jstree', function (e, data) {
    debugger
    alert("check_node.jstree")
}).bind('before_open.jstree', function (e, datap) {
     $.ajax({
     url: "../../Controller/ActiveDirectoryController.php5",
     type: "POST",
     dataType: "json",
     data: datap.node.text,//selected node text
     success: function (result) {
         debugger
         if(result.Objects.length>0)
         {
             passOpen=false;
             treeData_ = prepareObjectsforTree(result.Objects);
             resfreshJSTree(treeData_);

         }

     },
     error: function (a, b, c) {

     }
     })

})

1 个答案:

答案 0 :(得分:0)

只有在您的配置中将check_node.jstree设置为checkbox.tie_selection时,

false才会触发。如果不是 - 请收听select_node.jstree(或changed.jstree)。

关于第二个问题 - 不要以这种方式实现延迟加载 - 请阅读延迟加载的文档 - 这不是实现它的方法。