layui 多级分类

### 使用 Layui 实现多级分类

为了实现多级分类，可以采用 `layui` 提供的 tree 组件来构建一个多级分类结构。以下是具体方法：

#### 数据准备
首先准备好用于展示的数据源。假设有一个数据库查询语句获取到分类信息并转换成适合前端显示的形式。

SELECT id AS id, category_name AS title, parent_id AS pid FROM category;

此 SQL 查询返回的结果集将被用来初始化树形控件所需的数据格式[^3]。

#### HTML 结构设置
接着，在页面中创建一个容器元素放置即将渲染出来的树状列表。

<ul id="demo"></ul>

#### JavaScript 配置 Tree 插件
通过调用 `layui.tree()` 方法配置插件属性，并传入之前准备好的数据集合。

// 假设已加载layui库文件
var data = [
    {
        "id": 1,
        "title": "父节点",
        "pid": 0,
        "children": [
            {"id": 2,"title":"子节点","pid":1}
        ]
    }
];

layui.use(['tree'], function(){
    var tree = layui.tree;

    // 渲染
    tree.render({
      elem: '#demo'  //绑定元素
      ,data: data     //数据源
      ,click: function(item){}  //点击事件回调函数
    });
});

上述代码片段展示了如何利用 PHP 获取的数据作为输入参数传递给 `layui.tree().render()` 函数完成树型组件实例化过程[^2]。

对于更复杂的场景比如带有增删改查功能的操作，则可能涉及到前后端交互逻辑的设计；而对于简单的只读视图来说，上面的例子已经足够说明问题了。