zTree_v3无限分类操作案例

最新推荐文章于 2025-06-10 09:02:21 发布

转载最新推荐文章于 2025-06-10 09:02:21 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yjft/blog/918729

文章标签：

#php #javascript #json #ViewUI

本文介绍了一个使用 zTree_v3 的操作案例，通过 AJAX 提交数据并请求后台 PHP 处理返回目录结构 JSON 数据，实现了树形结构的展示，并提供了点击节点的回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<?php
/**
 * Created by 小雨在线
 * User: 飛天
 * Date: 2017/6/11 0011
 * Time: 10:33
 */


?>


<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> zTree_v3操作案例 </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>


    <SCRIPT LANGUAGE="JavaScript">
        function zTreeOnClick(event, treeId, treeNode) {
            //alert(treeNode.tId + ", " + treeNode.name);
            console.log(treeNode);
            console.log(treeNode.pId);
            console.log(treeNode.id);
            console.log(treeNode.name);
            //alert(treeId);
        };

        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        };


        $(document).ready(function () {



            //ajax提交数据，请求后台PHP处理返回出目录结构json数据
            $.ajax({
                url: "./test2.php",
                type: "get",
                async: false,
                dataType: "json",
                success: function (data) {

                    zNodes = data;    //将请求返回的数据存起来
                    //alert(zNodes);
                },
                error: function () {//请求失败处理函数
                    alert('请求失败');
                }
            });


           var tree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                tree.expandALL(true);//默认展开
        });


    </SCRIPT>


</HEAD>
<BODY>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>


</BODY>
</HTML>

<?php
/**
 * Created by 小雨在线
 * User: 飛天
 * Date: 2017/6/11 0011
 * Time: 10:42
 */



define("HOST", "xxx");    //主机名
define("USER", "aa");        //账号
define("PASS", "bb");        //密码
define("DBNAME", "cc");    //数据库名


$conn = new mysqli(HOST, USER, PASS);
$conn->select_db(DBNAME);
$sql = "SELECT id,pid AS pId,catename AS name FROM wuxianfenlei_deepcate ORDER BY id DESC";
$result = $conn->query($sql);


$data1 = [];

while ($row = $result->fetch_assoc()) {
    $data1[] = $row;
}


echo json_encode($data1);

前台操作事例：