EasyUI jQuery combotree widget

EasyUI jQuery combotree widget 是一个基于 jQuery 的组合树形菜单插件。在页面上使用 combotree，可以让用户通过一个下拉框的形式，进行树形菜单的选择，非常方便。

安装 EasyUI

在使用 EasyUI 的 combotree 插件之前，需要先在页面中引入 EasyUI 库。你可以从 官网 上下载最新稳定版的 EasyUI 库，也可以使用以下 CDN 引入：

<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/jquery-easyui/1.9.5/themes/bootstrap/easyui.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery-easyui/1.9.5/jquery.easyui.min.js"></script>

使用 combotree

使用 EasyUI 的 combotree 插件非常简单，以下是一个基本示例：

<input id="myCombotree" class="easyui-combotree" data-options="url:'data/tree_data.json',method:'get',required:true">

在上面的代码中，我们创建了一个 input 标签，并为其添加了 easyui-combotree 的类名。同时，我们通过 data-options 属性，指定了数据的来源 url、请求方式 method 和是否为必填项 required。

在实际使用中，我们需要通过一段 JavaScript 代码来初始化 combotree：

$('#myCombotree').combotree({
    lines: true,
    onLoadSuccess: function(node, data) {
        if (data.length > 0) {
            $('#myCombotree').combotree('setValue', data[0].id);
        }
    }
});

在上面的代码中，我们首先选中了 id 为 myCombotree 的 input 元素，并对其调用了 combotree 方法。在方法中，我们指定了树形菜单是否显示边线、当菜单加载成功时自动选中第一个节点。

之后，我们需要指定 combotree 的数据来源。最常用的方式是从后端服务器获取树形结构的 JSON 数据。以下是一个示例：

$('#myCombotree').combotree({
    url: 'data/tree_data.json',
    method: 'get'
});

在上面的代码中，我们通过 url 属性指定了树形结构数据的来源，并设置了 HTTP 请求方式为 GET。

更多选项

EasyUI 的 combotree 插件还提供了许多其他选项，以下是一些例子：

多选

<!-- HTML -->
<input id="multiCombotree" class="easyui-combotree" data-options="url:'data/tree_data.json',method:'get',multiple:true">

// JavaScript
$('#multiCombotree').combotree({
    lines: true,
    multiple: true,
    checkbox: true
});

在上面的代码中，我们在 HTML 和 JavaScript 中都指定了 combotree 是多选状态，并开启了 checkbox 选择。

菜单过滤

<!-- HTML -->
<input id="filterCombotree" class="easyui-combotree" data-options="url:'data/tree_data.json',method:'get',filter:function(q,node){return node.text.indexOf(q)>-1;}">

// JavaScript
$('#filterCombotree').combotree({
    lines: true,
    filter: function(q, node) {
        return node.text.indexOf(q) > -1;
    }
});

在上面的代码中，我们使用 filter 属性来开启菜单过滤。该属性接受一个回调函数，回调函数的第一个参数是搜索关键词，第二个参数是当前节点。在回调函数中，我们可以根据搜索关键词和节点的文字内容判断是否需要显示该节点。

结语

以上就是 EasyUI jQuery combotree widget 的完整攻略。通过学习本文，你已经掌握了 combotree 的基本用法和一些高级选项。如果想要了解更多关于 EasyUI 的使用技巧，请参考 EasyUI 官方文档。