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
    }
};

//异步请求错误回调方法, 未处理！！！
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
    
   alert(XMLHttpRequest);
};

/**
* 对请求返回的数据进行字体设置
* @param treeId 树节点id
* @param treeNode 树节点对象
*/
function setFont(treeId, treeNode) {
    
    if (treeNode && treeNode.isParent) {
        //父节点设置字体为blue
        return {color: "blue"};
    } else {
        return null;
    }
}

/*
*节点点击前触发方法，用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作，默认值：null
*若返回folse, 则中断后续操作， 不会像服务器发送请求
*/
function zTreeOnBeforeClick(treeId, treeNode) {
    
    //该处判断点击节点是否属于父节点
    var check = (treeNode && !treeNode.isParent);
    return check;
}

//请求成功后的数据过滤函数
function filter(treeId, parentNode, childNodes) {
    
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    }
    return childNodes;
}

//节点点击时触发的回调
function zTreeOnClick(even, treeId, treeNode) {
    
    //获取点击节点的id和name, 要求返回的json数据有该属性
    var sub_id       = treeNode.id;
    var sub_name     = treeNode.name;
    var parentId     = treeNode.getParentNode().id;
    var parentName   = treeNode.getParentNode().name;

}



//页面在家是初始化ztree， 需要绑定tree显示的dom元素ID
$(document).ready(function(){
    
    $.fn.zTree.init($("#dropdownMenu"), setting);
});

页面DOM元素

<div id="DropdownMenuBackground" style="position:absolute; height:260px;width: 260px;min-width:205px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;margin-top: 74px;margin-left: 47%;">
    <!-- ztree要求放在ul元素下， class指定为ztree样式文件的ztree -->
    <ul id="dropdownMenu" class="ztree"></ul>
</div>

服务端配置

     /**
     *  异步请求菜单
     *  首先获取页面请求的id, 即autoParam:["id", "name"],提交的参数， 若是页面加载时第一次请
     *  求，则该参数为空。 
     * 
     */
    public function asyncrequest(){
    
        //获取ztree自带提交的参数， 若是页面加载时第一次请求， 该参数为空，     
        $father_id = $_POST['id'];

        //php实例化模型， 查询数据库数据， 此处根据不同语言不同实现
        $model = D('Module');

        $data = array();
        //当请求提交的参数id为空时， 只获取父菜单，
        if (!isset($father_id)) {
   //get all father menu
            $tempData = array();

            //获取数据
            $tempData =  $model->getAllModule(array('pmid' => -1, 'enable' => 1) );
            $a = array();

            /*
            * JSON数据封装时注意事项， 要求返回的json数据属性为父
            * {"id":"52","name":"","issuper":"0","pid":"-1","isParent":true}
            * 其中id为子节点id， pid为父节点id， name为节点名， isParent标明该节点是否属于父
            * 节点， 这四个属性**必须**
            */

            foreach ($tempData as $d) {
                $tempData['id'] = $d['mid'];
                $tempData['name'] = $d['name'];
                $tempData['issuper'] = $d['is_super'];
                $tempData['pid'] = $d['pmid'];
                $tempData['isParent'] = true;
                $a[] = $tempData;
                unset($tempData);
            }
            $data = $a;
            unset($a);

        //子节点点击时
        } else {
   //get all sun node where mid = $father_id
            $tempData = array();
            $tempData =  $model->getAllModule(array('enable' => 1, 'pmid' => $father_id) );
            $a = array();
            foreach ($tempData as $d) {
                $tempData['id'] = $d['mid'];
                $tempData['name'] = $d['name'];
                $tempData['issuper'] = $d['is_super'];
                $tempData['pid'] = $father_id;
                $tempData['isParent'] = false;
                $a[] = $tempData;
                unset($tempData);
            }
            $data = $a;
            unset($a);
        }

    //json数据返回
        $this->ajaxReturn($data, "JSON");
    }

该dome采用php作为服务端， php不熟的可在百度云盘下载Java版的按理！！！！！！

版权所有 @ruoyi 转载请注明出处！！！