一、代码

1、后端php代码

class suite
{
    /*
     * 调用模板
     * param int $projecid 所属项目id
     */
    public function suiteList($projecId){
        $projecId = 670855;
        $this->smarty->assign('projecId',$projecId);
        $this->smarty->display($this->smarty->tlTemplateCfg->template_dir .'suiteList.tpl');
    }
    /*
     * 模板上ajax请求获取列表
     */
    public function suiteListAjax(){
        $projecId = $_REQUEST['projecId'];
        $parentId = isset($_REQUEST['id'])?$_REQUEST['id']:0;
        $opt = array('node_type_id'=>4);
        $rootSuite = $this->tree->rootNodeByProject($parentId,$projecId,$opt);
        foreach ($rootSuite as $key=>$value){
            $sonNodeLength = $this->tree->isParent($value['id']);
            if($sonNodeLength>0){
                $rootSuite[$key]['isParent'] = 'true';
            }else{
                $rootSuite[$key]['isParent'] = 'false';
            }
        }
        echo json_encode($rootSuite);
    }
}

2、前端代码

<script type="text/javascript" src="{$basehref}third_party/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="{$basehref}third_party/zTree_v3/js/jquery.ztree.core.js"></script>
<div class="panel">
         <div class="panel-heading">
              <div class="panel-title">树结构菜单管理</div>
         </div>
         <div class="panel-body">
               <ul id='modulesTree' data-name='tree-case' class="tree ztree">
               </ul>
         </div>
</div>
            <SCRIPT type="text/javascript">
                var projecId = {$projecId} //后端php传递的项目id
                var setting = {
                    view: {
                        selectedMulti: false
                    },
//异步配置
                    async: {
                        enable: true, //是否开启
                        type: "post", //ajax数据提交格式
                        url:"casesIndex.php?c=suite&f=suiteListAjax",   //后台地址
                        autoParam:["id", "name=n", "level=lv"],
                        otherParam:{"projecId":projecId},
                        dataFilter: filter
                    },
                    callback: {
                    }
                };
                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;
                }
//初始化节点
                $(document).ready(function(){
                    $.fn.zTree.init($("#modulesTree"), setting);
                });
            </SCRIPT>

二、说明

ztree是基于jQuery的，所以使用之前要先引入jQuery库，最基础的使用是引入如下3个文件：

zTree_v3/css/zTreeStyle/zTreeStyle.css （自带样式）

zTree_v3/js/jquery-1.4.4.min.js（ztree官方提供的和当前版本对应的jQuery库）

zTree_v3/js/jquery.ztree.core.js（ztree 核心库）

前端调用执行

1、$.fn.zTree.init初始化节点

2、filter(treeId, parentNode, childNodes) 把php返回的json格式数据转化为数组格式

转载请注明：谷谷点程序 » php+ztree 实现异步加载树结构菜单