LigerUI 是一款基于 jQuery 的开源 UI 组件库，它提供了许多常用的前端组件，例如树形控件、数据网格、表单控件、对话框、菜单等，可以帮助开发人员快速构建复杂的 web 应用。ligerTree 是 LigerUI 提供的一个树形控件，用于展示和操作层次结构数据。

ligerTree 插件介绍

ligerTree 插件是一个高度可定制的树形控件，它支持以下功能：

  • 节点展开/收缩：可以通过点击节点展开或收缩树的层级结构。
  • 异步加载：支持动态加载树节点，适合处理大量数据的情况。
  • 节点复选框：可以支持多选操作。
  • 节点拖拽：支持拖拽节点来重新排列。
  • 多种样式：支持多种树形样式，可以通过配置选项灵活控制外观。
  • 事件处理：提供丰富的事件接口，如节点点击、选中、双击等事件。

ligerTree 的基本使用

首先，需要确保你已经引入了 LigerUI 库及其依赖的 jQuery。

1. 引入 LigerUI 和 jQuery

在 HTML 页面中引入 jQuery 和 LigerUI 的 CSS 和 JS 文件：

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ligerui/1.0/skins/Aqua/css/ligerui-all.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ligerui/1.0/js/ligerui.all.js"></script>
</head>

2. 创建树形结构的 HTML 元素

在 HTML 中创建一个容器来放置树形控件：

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

3. 初始化 ligerTree

通过 jQuery 来初始化 ligerTree：

$(function() {
  $("#tree").ligerTree({
    nodes: [
      { id: 1, name: "Node 1", isexpand: true, children: [
        { id: 11, name: "Node 1-1" },
        { id: 12, name: "Node 1-2" }
      ]},
      { id: 2, name: "Node 2", isexpand: true, children: [
        { id: 21, name: "Node 2-1" },
        { id: 22, name: "Node 2-2" }
      ]}
    ]
  });
});
  • nodes：定义树的结构，每个节点可以包含 id、name 等属性。children 属性用于嵌套子节点。
  • isexpand：定义节点是否默认展开。

ligerTree 配置项

ligerTree 提供了丰富的配置项，可以用来定制树形控件的行为和外观。常用的配置项包括：

  1. nodes：树的节点数据。可以是静态的，也可以是动态加载的。
  2. isexpand：指定节点是否展开，true 为展开，false 为收起。
  3. checkbox：是否显示复选框，true 为显示，false 为隐藏。
  4. checkboxName：复选框的名称属性，通常用于表单提交时的名称。
  5. autoCheckboxEven：是否自动勾选父节点的复选框。
  6. slide：是否启用滑动效果，true 为启用，false 为禁用。
  7. dataAction：控制节点数据的加载方式，如异步加载。
  8. render：自定义节点渲染方式。

配置项示例：

$(function() {
  $("#tree").ligerTree({
    checkbox: true, // 显示复选框
    checkboxName: "nodes", // 设置复选框的名称
    autoCheckboxEven: true, // 自动勾选父节点
    isexpand: true, // 默认展开
    slide: false, // 禁用滑动效果
    nodes: [
      { id: 1, name: "Node 1", isexpand: true, children: [
        { id: 11, name: "Node 1-1" },
        { id: 12, name: "Node 1-2" }
      ]},
      { id: 2, name: "Node 2", isexpand: true, children: [
        { id: 21, name: "Node 2-1" },
        { id: 22, name: "Node 2-2" }
      ]}
    ]
  });
});

常见操作与事件

  1. 获取选中的节点
    可以通过 getSelected 方法来获取选中的节点：var selectedNodes = $("#tree").ligerTree().getSelected(); console.log(selectedNodes);
  2. 获取所有节点
    可以通过 getAll 方法来获取树的所有节点：var allNodes = $("#tree").ligerTree().getAll(); console.log(allNodes);
  3. 节点展开/收缩
    使用 expand 或 collapse 方法来控制节点的展开和收缩。$("#tree").ligerTree().expand({id: 1}); // 展开指定节点 $("#tree").ligerTree().collapse({id: 1}); // 收缩指定节点
  4. 节点点击事件
    ligerTree 提供了 onSelect 和 onClick 事件，可以在节点被选中或点击时触发：$("#tree").ligerTree({ onSelect: function(node) { alert("Selected node: " + node.name); }, onClick: function(node) { alert("Clicked node: " + node.name); } });
  5. 异步加载节点
    ligerTree 也支持异步加载节点数据：$("#tree").ligerTree({ dataAction: 'server', url: 'data.json', // 提供一个返回树形数据的接口 parms: { id: 1 } // 可选择向服务器传递参数 });

总结

  • ligerTree 是 LigerUI 提供的一个强大的树形控件，支持丰富的功能，如节点的展开/收缩、复选框、多级嵌套、拖拽、异步加载等。
  • 通过灵活的配置项，你可以定制树形控件的外观和行为。
  • ligerTree 提供了丰富的事件和方法，可以轻松处理节点的选择、点击、展开等操作。

如果你有更具体的需求或者问题，欢迎继续提问！