easyui combtree 单选的时候实现再次点击取消选中_easyui combotree 清除选中值-CSDN博客

本文链接：https://blog.csdn.net/palmer_kai/article/details/81130580

easyui combtree 单选的时候实现再次点击取消选中

原理

就是在 select 的时候判断当前节点是否选中，选中了的话就通过改变节点的class 属性来取消选中，并且清空combotree 的值。同时 return false ,让本次 select 不能实现选中

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ComboTree Actions - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <script src="../jquery.min.js"></script>
    <script src="../jquery.easyui.min.js"></script>
</head>

<body>
    <h2>ComboTree Actions</h2>
    <p>Click the buttons below to perform actions</p>
    <div style="margin:20px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
    </div>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <div style="margin-bottom:20px">
            <input id="cc">
        </div>
    </div>
    <script type="text/javascript">
        function getValue() {
            var val = $('#cc').combotree('getValue');
            alert(val);
        }

        function setValue() {
            $('#cc').combotree('setValue', '122');
        }

        function disable() {
            $('#cc').combotree('disable');
        }

        function enable() {
            $('#cc').combotree('enable');
        }
        $(function () {
            $('#cc').combotree({
                onBeforeSelect: function (node) {
                    // debugger;
                    var isSelected = $(node.target).hasClass('tree-node-selected');

                    if (isSelected) {
                        $(node.target).removeClass('tree-node-selected'); // 去除树上 节点的 class
                        $('#cc').combotree('clear'); // 同时需要 combobox 的值
                        return false; // 本次点击不选中
                    }
                },
                // unselect: fu
                data: [{
                    id: 1,
                    text: 'Languages',
                    children: [{
                        id: 11,
                        state: 'close',
                        text: 'Java'
                    }, {
                        id: 12,
                        text: 'C++'
                    }]
                }]
            });
        });
    </script>

</body>
</html>