combotree 只能选中叶子节点

最新推荐文章于 2023-02-28 09:52:44 发布

palmer_kyle

最新推荐文章于 2023-02-28 09:52:44 发布

阅读量1.7k

点赞数

分类专栏： javascript easyui 文章标签： combotree只选中叶子节点 easyui

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

版权

javascript 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

easyui

8 篇文章 0 订阅

订阅专栏

combotree 只能选中叶子节点

一、 Aphorism

人之所恶在好为人师，慎言之。

二、summary

应该分为两种情况：

1. 第一种情况（单选）： multiple == false

$('#tt').combotree({
        nultiple: false,
        onBeforeSelect: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            } 
        }
        // onBeforeCheck: function (node) {
        //  if (!$(this).tree('isLeaf', node.target)) {
        //      return false;
        //  }
        // }
});

2. 第二种情况（多选）： multiple == true

$('#tt').combotree({
        nultiple: true,
        // onBeforeSelect: function (node) {
        //  if (!$(this).tree('isLeaf', node.target)) {
        //      return false;
        //  } 
        // },
        onBeforeCheck: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            }
        }
});

所以两个都写上也没有问题，就是多做个事件处理。

三、粘贴代码

1. html 代码

html 中的依赖： js 文件和css 文件需要自己去 easyui 官网下载


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic ComboTree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic ComboTree</h2>
    <p>Click the right arrow button to show the tree panel.</p>
    <div style="margin:20px 0"></div>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <div style="margin-bottom:20px">
            <input id="tt"  style="width: 100%;">
            <!-- <input id="tt" class="easyui-combotree" data-options="url:'tree_data1.json',method:'get',label:'Select Node:',labelPosition:'top'" style="width:100%"> -->
        </div>
    </div>
</body>
<script>
    $('#tt').combotree({
        url: 'tree_data1.json',
        method:'get',
        label: 'Select Node:', 
        labelPosition: 'top',
        multiple: true,
        onBeforeSelect: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            } 
        },
        onBeforeCheck: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            }
        }
    });
</script>
</html>

2、tree_data1.json 文件

json 文件和html 文件放在一个目录下就好了


[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]

四、supplement

复写配置参数，可以解决很多bug

之前遇到过一次，combotree 中的值选中后在 box 中不能显示，原因可能是框架中对combotree 操作蛮多的，最终的解决方案是，通过jquery获取 dom ，然后对 combotree 进行复写，之后，每次选中节点， box 中就能正常显示了。
我记得在处理datagrid 双表头问题的时候，也是 把gridDefined 复写后， initGrid ，之后双表头的显示 bug 就消失了。当然，最终我采取的方案是操作 td dom 元素，更简便写。