正文

JsTree中节点添加CheckBox 以及 单选的实现

IP云
IP云V管理员/9 阅读
09/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

stree中添加checkbox，需要在初始化时设置plugins属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#DpTree').data('jstree', false).empty().jstree({
                'core': {
                    'data': data.data,
                    "check_callback": true,
                    'multiple': false,
                },
                "force_text": true,
                plugins: ["sort", "types", "checkbox", "themes", "html_data"],
                "checkbox": {
                    "keep_selected_style": false,//是否默认选中
                    "three_state": false,//父子级别级联选择
                    "tie_selection": false
                },
            });

eg:设置three_state为true时，选择所有子节点后父节点会自动选择。

我的需求是选择一个节点绑定给其他数据，节点只能选择一个，且不可重复。

故，添加如下事件，选择节点后遍历所有选中的节点，更改其checkbox属性。

1
2
3
4
5
6
7
8
$('#DpTree').on('check_node.jstree', function(event, obj) {
                var ref = $('#DpTree').jstree(true);
                var nodes = ref.get_checked();  //使用get_checked方法
                $.each(nodes, function(i, nd) {
                    if (nd != obj.node.id)
                        ref.uncheck_node(nd);
                });
            });

只能选择一个节点，可用于类似下拉框中的选择。