jstree复选框操作

Ash*_*win 13 html javascript css jquery jstree

我有一个jstree与每个节点的复选框.我想实现以下目标.让我知道api的哪种方法或部分可以帮助我们做到这一点.

  1. 选择父节点时,我不想检查任何子节点.目前所有孩子都被选中.
  2. 如果选中任何子节点,则检查其所有父节点.当前父节点被部分检查(方形).我想完全删除部分选择.那就是我想完全改变jstree复选框的行为.

我搜索了API文档,却一无所获.

Han*_*nna 9

从JSTree版本3.1.1开始,这里是我要做的:

$('#data').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node", "children" : [
                    { "text" : "Child node 1" },
                    { "text" : "Child node 2" }
            ]},
            { "text" : "Root node 2", "children" : [
                    { "text" : "Child node 1" },
            ]}
        ]
    },
    'checkbox': {
        three_state: false,
        cascade: 'up'
    },
    'plugins': ["checkbox"]
});
Run Code Online (Sandbox Code Playgroud)

JSFiddle演示

请注意,这里的魔术与复选框参数一起发生.

从文档:

three_state:一个布尔值,指示复选框是否应该级联并具有未确定状态.默认为true.


级联:此设置控制如何应用级联和未确定的节点.如果'up'在字符串中 - 启用了级联,如果字符串中的'down' - 启用了级联,如果字符串中存在'未确定',则将使用未确定的节点.如果three_state 设置true为此设置,则会自动设置为"向上+向下+未确定".默认为''.

该文档在v.3.1.1的源代码中找到

编辑我刚刚检查了v3.3.0,虽然文档已经针对这些属性进行了更改(在我看来,情况更糟),但代码的工作方式却相同.与此同时,虽然看起来这些属性在他们的API中列出:three_statecascade,但在撰写时,这似乎比源代码有更好的文档.

请记住,如果父项下有多个子节点,则仅检查其中一个子节点将不会检查父节点.必须检查所有节点才能在父节点上生效.

希望这可以帮助!


chr*_*ris 8

看一下real_checkboxes选项.这可能会让你开始:

        $("#jstree").jstree({
           "checkbox": {
              real_checkboxes: true,
              real_checkboxes_names: function (n) {
                 var nid = 0;
                 $(n).each(function (data) {
                    nid = $(this).attr("nodeid");
                 });
                 return (["check_" + nid, nid]);
              },
              two_state: true
           },
           "plugins": ["themes", "json_data", "ui", "checkbox"]
        })
        .bind('open_node.jstree', function (e, data) {
           $('#jstree').jstree('check_node', 'li[selected=selected]');
        })
Run Code Online (Sandbox Code Playgroud)

您可能需要更改绑定行为,以便在检查子项时检查父项.