博客

EasyUI jQuery combotree widget

  • Post category:jquery

EasyUI jQuery combotree widget是一个强大的树形下拉菜单组件，它通过组合了两个组件（combobox和tree）而形成。它可以让用户选择一个列表中的某个值或选择树形结构中的某个节点，同时支持搜索和过滤。

基本使用

引入依赖

使用EasyUI jQuery combotree widget，需要先引入EasyUI和jQuery：

<!-- 引入 jquery 和 easyui 样式库 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/icon.css">

<!-- 引入 easyui.js -->
<script type="text/javascript" src="https://cdn.bootcss.com/easyui/1.9.21/jquery.easyui.min.js"></script>

创建HTML元素

通过HTML元素创建EasyUI jQuery combotree widget：

<input id="combotree" class="easyui-combotree" style="width:250px;">

初始化EasyUI jQuery combotree widget

使用JavaScript代码初始化EasyUI jQuery combotree widget：

$('#combotree').combotree({
    url: 'tree_data.json',
    method: 'get',
    required: true,
    prompt: '请选择',
    lines: true,
    checkbox: true,
    multiple: true,
    onCheck: function(node, checked){
        console.log(node);
    }
});

其中的配置参数说明：

  • url: 获取树节点数据的URL；
  • method: 请求数据的HTTP方法；
  • required: 是否为必填项；
  • prompt: 为空时的提示信息；
  • lines: 是否显示树节点之间的连接线；
  • checkbox: 是否显示多选框；
  • multiple: 是否多选；
  • onCheck: 单击多选框时触发事件的回调函数。

示例说明

示例1：基本使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI combotree widget</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/icon.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/easyui/1.9.21/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="combotree" class="easyui-combotree" style="width:250px;">
    <script>
        $('#combotree').combotree({
            url: 'tree_data.json',
            method: 'get',
            required: true,
            prompt: '请选择',
            lines: true,
            checkbox: true,
            multiple: true,
            onCheck: function(node, checked){
                console.log(node);
            }
        });
    </script>
</body>
</html>

其中，树节点数据的URL为tree_data.json，该文件的内容如下：

[{
    "id": "1",
    "text": "Node1",
    "children": [{
        "id": "11",
        "text": "Node11",
        "children": [{
            "id": "111",
            "text": "Node111"
        },{
            "id": "112",
            "text": "Node112"
        }]
    },{
        "id": "12",
        "text": "Node12",
        "children": [{
            "id": "121",
            "text": "Node121",
            "children": [{
                "id": "1211",
                "text": "Node1211"
            }]
        }]
    }]
}]

示例2：动态加载树节点数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI combotree widget</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.9.21/themes/icon.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/easyui/1.9.21/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="combotree2" class="easyui-combotree" style="width:250px;">
    <script>
        $('#combotree2').combotree({
            url: 'get_tree_data.php',
            method: 'get',
            required: true,
            prompt: '请选择',
            lines: true,
            checkbox: true,
            multiple: true,
            onCheck: function(node, checked){
                console.log(node);
            },
            onLoadSuccess: function(node, data){
                if (data.length == 0) {
                    var t = $(this);
                    if (t.combotree('tree').tree('getRoots').length == 0){
                        t.combotree('clear');
                        t.combotree('hidePanel');
                        alert('没有数据!');
                    }
                }
            }
        });
    </script>
</body>
</html>

动态加载树节点数据的URL是get_tree_data.php，该文件的内容如下：

<?php
$data = array(
    array(
        "id" => 1,
        "text" => "Node1",
        "children" => array(
            array(
                "id" => 11,
                "text" => "Node11",
                "state" => "closed"
            ),
            array(
                "id" => 12,
                "text" => "Node12",
                "state" => "closed"
            )
        )
    )
);
echo json_encode($data);
?>

可以看到，返回的是一段JSON数组，每个元素代表一棵树，其中每个节点包括id、text、children三个字段，分别表示该节点的编号、名称以及子节点。同时，如果该节点还有更多子节点，可以在该节点上添加一个state字段，将其值设为closed，从而告诉EasyUI combotree widget在该节点上关闭分支，以实现懒加载。

Tags: