javascript - jstree 获取选中和未选中的节点

Question

我想从我的 jstree 中获取 2 个单独的数组中的已检查节点和未检查节点。

我已经看到.get_checked并.get_unchecked运行了，但它们返回给我当前选中和未选中的所有节点。（即如果一个节点未选中并且我没有取消选中它，那么我仍然使用它来获取它.get_unchecked。我想防止这种情况发生）。我也准备对 api 进行重大更改。有什么方向吗？

我可以获取复选框的更改事件吗？我也尝试过change_state，但这仅适用于单击的一个节点。

Answer 1

据我了解，几乎不可能不重写 jstree 的复选框插件）来处理复选框的单个事件，因为它们只是在每个选中/取消选中事件上重绘单击文件夹的所有父项和子项。

这里是简单的演示：

一切都为我工作，

HTML

<div id="demo1" class="demo">
    <ul>
        <li id="phtml_1">
            <a href="#">Root node 1</a>
            <ul>
                <li id="phtml_2" class="jstree-checked">
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3">
                    <a href="#">A Child node 2</a>
                </li>
            </ul>
        </li>
        <li id="phtml_4">
            <a href="#">Root node 2</a>
             <ul>
                <li id="phtml_2" >
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3">
                    <a href="#">A Child node 2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>​

JS

$(function() {
    var tree = $("#demo1").jstree({
        "plugins": ["themes", "html_data", "checkbox", "sort", "ui"]
    });
    tree.bind("open_node.jstree close_node.jstree check_node.jstree uncheck_node.jstree", function(e) {
        console.log("Event", e);
        console.log('Cheked:', tree.jstree('get_checked'));
        console.log('Uncheked:', tree.jstree('get_unchecked'));
    });
});​

Answer 2

这个或其他帖子上的答案都没有对我有用，但找到了一种扫描节点并维护一组未检查项目的方法。

我的方法是首先迭代地获取所有节点的列表，然后我从这个答案中引用代码来获取节点列表（我自己的调整以递归地遍历整个树，因为 OP 没有进入嵌套级别，加上我只想要ID）。

然后我得到了一个带有过滤功能的 li 标签，用于所有单击和未确定的项目以及一个 for 循环，在其中我从我之前检索的主列表中删除了这些。

$("#getUnchecked").bind("click", function () {

  //get a list of all nodes in the entire tree recursively - function in fiddle.
  ids = get_jstree_order('#tree > ul');

  var selNodes = $('li').filter(function () {
      //Find nodes that have jstree-clicked - or clicked items and
      //Find nodes that are undetermined
      return $(this).children('a.jstree-clicked').length
          || $(this).children('a').children('i.jstree-undetermined').length;
  });
  selNodes.each(function () {
      //find the position of the checked or undetermined id 
      let pos = ids.indexOf(this.id);
      //remove it from the master list, as we are filtering it down to just the unchecked ones
      ids.splice(pos, 1);
  })

  console.log(ids);
});

对于一个工作示例，请在此处查看小提琴。