jEasyUI 创建带复选框的树形菜单学习笔记

1. jEasyUI简介

jEasyUI是一款基于jQuery框架开发的UI插件库，它提供了丰富多样的UI组件，包括表格、树形菜单、对话框、表单验证等，使用它可以快速地开发出漂亮、易用的Web应用程序。

2. 树形菜单简介

树形菜单是一种常见的UI组件，它将数据以树形结构展示出来，用户可以通过点击节点展开或收缩子节点。在实际开发中，我们经常需要在树形菜单中添加复选框，以便用户可以选择多个节点进行操作。

3. 创建带复选框的树形菜单

jEasyUI提供了tree组件来实现树形菜单，同时也支持在树形菜单中添加复选框。下面是一个简单的示例：

htmlCopy Code
<div id="tree"></div>

javascriptCopy Code
$('#tree').tree({
    data: [{
        id: 1,
        text: '节点1',
        children: [{
            id: 11,
            text: '节点11'
        }, {
            id: 12,
            text: '节点12'
        }]
    }, {
        id: 2,
        text: '节点2',
        children: [{
            id: 21,
            text: '节点21'
        }]
    }],
    checkbox: true
});

在上面的示例中，我们首先创建了一个空的div元素，并给它一个id属性。然后通过jQuery选择器获取到这个div元素，并调用tree方法来初始化树形菜单。

在tree方法的参数中，我们传入了一个包含节点数据的数组，其中每个节点都有一个id和text属性。同时，我们也设置了复选框为true，使得树形菜单中会出现复选框。

4. 实例演示

下面是一个实际应用场景的示例：我们需要在页面中添加一个树形菜单，用于展示商品分类信息。用户可以通过勾选树形菜单中的节点来选择对应的商品分类，以便进行相关操作。

htmlCopy Code
<div id="tree"></div>

javascriptCopy Code
$('#tree').tree({
    url: '/getCategoryData',  // 请求后端接口获取节点数据
    method: 'post',
    checkbox: true,
    cascadeCheck: false,
    onBeforeLoad: function (node, param) {
        param.id = node.id || 0;  // 发送请求时向后端携带节点id参数
    },
    onLoadSuccess: function (node, data) {
        if (!data.length) {
            $('#tree').tree('remove', node.target);
        }
    }
});

在上面的示例中，我们通过url属性指定了向后端发送请求获取节点数据的接口地址，同时也设置了请求方法为post。我们还对节点勾选状态的级联行为进行了设置，通过cascadeCheck属性来禁用级联勾选。

在请求发送前，我们通过onBeforeLoad事件对请求参数进行了处理，将当前节点的id携带上去。在请求成功后，我们还增加了onLoadSuccess事件的处理函数，当某个节点没有子节点时，就将这个节点从树形菜单中移除。

5. 总结

通过jEasyUI的tree组件，我们可以很容易地创建出一个带复选框的树形菜单，并且也支持异步加载数据、级联勾选等常见功能。在实际开发中，我们可以根据自己的需求进行组件的扩展和定制化，以满足不同的业务需求。