JsTree 复选框 - 检查事件

2023-12-23

我有这个 JsTree

用这个代码:

var Tree = $("#MyTree");

        Tree.jstree({
            "core": {
                "themes": {
                    "responsive": false,
                    "multiple" : false,
                },
                "data": dataTree
            },
            "types": {
                "default": {
                    "icon": "icon-lg"
                },
                "file": {
                    "icon": "icon-lg"
                }
            },
            "ui": {
                "select_limit": 1,
            },
            "plugins": ["wholerow", "types", "checkbox", "ui", "crrm", "sort"],
            "checkbox": {
                "three_state": false,
                "real_checkboxes": false
            }
        });

我需要将选择和检查操作分开,用户必须检查他想要的所有节点,但只选择一行时间。 现在,当我单击该行上的所有位置时,它会选择该行并检查该节点,只有当用户单击它时,我才需要检查该复选框。

我尝试了很多活动,但唯一有效的是:

Tree.on("changed.jstree", function (e, data) { });

捕捉选择和检查的动作。

有什么建议么?


这个答案是关于 jstree 的第 3 版 - 这是你应该在 2016 年使用的。不幸的是,你的示例代码似乎使用 jstree rel 1,我无法帮助你。

对于版本 3

首先,解开选中状态和选中状态(checkbox.tie_selection: false) - 参见

然后,使用check_node.jstree event

工作示例

var data1 = [{
      "id": "W",
      "text": "World",
      "state": { "opened": true },
      "children": [{"text": "Asia"}, 
                   {"text": "Africa"}, 
                   {"text": "Europe",
                    "state": { "opened": false },
                    "children": [ "France","Germany","UK" ]
      }]
    }];

$('#Tree').jstree({ 
    core: {
      data: data1, 
      check_callback: false
    }, 
    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'))
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <div id="Tree"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JsTree 复选框 - 检查事件 的相关文章

随机推荐