【layui-tree树形组件】ajax动态获取数据

作者：System 时间：2024年08月08日分类：所有,ajax 字数：1259

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

在Layui中使用tree组件进行动态获取数据，你需要使用url属性指定一个AJAX请求的地址，并且后端需要返回符合tree组件数据格式的JSON数据。

以下是一个简单的示例：

前端HTML和JavaScript代码：




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui Tree 示例</title>
  <link rel="stylesheet" href="path/to/layui/css/layui.css">
</head>
<body>
 
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-md-offset2">
      <div id="tree-container"></div>
    </div>
  </div>
</div>
 
<script src="path/to/layui/layui.js"></script>
<script>
layui.use(['tree'], function(){
  var tree = layui.tree;
  
  // 初始化树形组件
  tree.render({
    elem: '#tree-container' // 指向树形组件的容器
    ,url: '/get-tree-data' // 后端数据接口URL
    ,edit: ['add', 'update', 'del'] // 设置节点的编辑功能
    ,click: function(obj){ // 节点被点击时的回调
      console.log(obj.data); // 输出当前点击的节点数据
    }
  });
});
</script>
</body>
</html>

后端PHP或其他语言示例代码（以PHP为例）：




<?php
header('Content-Type: application/json');
 
// 假设这是从数据库或其他存储中获取的数据
$data = [
  ["name"=>"节点1", "id"=>1, "children"=>[
    ["name"=>"子节点1.1", "id"=>2],
    ["name"=>"子节点1.2", "id"=>3]
  ]],
  ["name"=>"节点2", "id"=>4]
];
 
echo json_encode($data);
?>

确保你的后端接口/get-tree-data能够返回上述格式的JSON数据，tree组件会自动根据返回的数据构建树形结构。

【layui-tree树形组件】ajax动态获取数据

评论已关闭

推荐阅读