zTree异步加载树形菜单

最新推荐文章于 2024-08-07 14:21:09 发布

godruoyi

最新推荐文章于 2024-08-07 14:21:09 发布

阅读量7.4k

点赞数 2

分类专栏： js 文章标签： ztree

本文链接：https://blog.csdn.net/xu5733127/article/details/49685755

版权

本文介绍了如何利用zTree这个基于jQuery的树形插件来创建异步加载的树形菜单。zTree在权限管理和菜单管理中广泛应用，内容涵盖了前端代码配置和服务端PHP接口设置。

摘要由CSDN通过智能技术生成

zTree异步加载树形菜单

ztree是依赖于jquery实现的多功能树插件，也是目前做菜单管理、权限管理用的较多的前段插件之一。目前ztree功能十分强大，这里只用了部分异步加载的功能。

zTree官网地址

页面截图

这里写图片描述

前端代码

文件引入，注意ztree基于jquery实现，在它之前一定要先引入jquery

<script type="text/javascript" src="./js/jquery.js">
<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>

全局ztree设置，详情可参考管方API

//ztree配置
var setting = {
    async: {
        //设置 zTree 是否开启异步加载模式默认值：false
        enable: true,
        //请求URL， 该处是采用php的thinkphp框架来处理URL
        url:"{:U('System/asyncrequest')}",
        //请求时自动提交的参数， 该参数服务端可直接用$_POST(php)/（java）request.getParameter()获取
        autoParam:["id", "name"],
        //返回的数据过滤器
        dataFilter: filter,
        //对返回返回的数据字体设置
        fontCss: setFont,
    },
    //设置回调
    callback: {
        //节点点击之前触发方法
        beforeClick: zTreeOnBeforeClick,
        //节点点击时
        onClick: zTreeOnClick,
        //异步请求错误回调方法
        onAsyncError: zTreeOnAsyncError
    }
};

//异步请求错误回调方法, 未处理！！！