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

jstree中添加checkbox,需要在初始化时设置plugins属性:

$('#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属性。

$('#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);
                });
            });

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

转载于:https://www.cnblogs.com/vevi/p/5623683.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Element Plus的`el-tree`组件,默认情况下`checkbox`是可以多选的,如果要实现单选,可以通过以下步骤实现: 1. 在`el-tree`组件上添加属性`show-checkbox`,并且将其值设置为`true`,以显示`checkbox`。 2. 在`el-tree`的`data`添加一个属性,例如`checkedList`,用于保存选节点。 3. 在`el-tree`的`node-key`属性指定节点的唯一标识符,例如`id`。 4. 在`el-tree`的`check`事件,判断当前节点是否已经被选,如果已经被选,则从`checkedList`删除该节点,否则将该节点添加到`checkedList`。 5. 在`el-tree`的`node`的`checkStrictly`属性设置为`true`,以强制`checkbox`只能通过点击节点来设置其状态,而不能通过勾选父节点或子节点来设置状态。 下面是一个示例代码: ```html <template> <el-tree :data="data" :show-checkbox="true" :node-key="nodeKey" :check-strictly="true" @check="handleCheck"> </el-tree> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', }, { id: 2, label: 'Node 2', }, { id: 3, label: 'Node 3', }, ], checkedList: [], nodeKey: 'id', }; }, methods: { handleCheck(node, checked) { if (checked) { this.checkedList.splice(0, this.checkedList.length, node); } else { this.checkedList.splice(0, this.checkedList.length); } }, }, }; </script> ``` 在上面的代码,我们通过`checkedList`数组保存选节点。在`handleCheck`方法,我们判断当前节点是否已经被选,如果已经被选,则从`checkedList`删除该节点,否则将该节点添加到`checkedList`。同时,我们将`nodeKey`设置为`id`,以确保节点的唯一性。最后,我们将`checkStrictly`设置为`true`,以确保`checkbox`只能通过点击节点来设置其状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值