ztree实现ajax调用商品分类信息树状显示

1.在也页面中引入ztree.js

<!--引入ztree插件-->
<script src="<?php echo get_url('js/jquery.ztree3.js');?>" type="text/javascript"></script>
<link href="<?php echo get_theme_url ( 'css/ztree/zTreeStyle/zTreeStyle.css' ) ?>" rel="stylesheet" type="text/css" />

 

2.在页面中显示位置

<ul id="treeDemo" class="ztree"></ul>

 

3.后台数据准备：将分类信息按照指定格式传递给前台

    function ztree(array & $request, array & $response, array & $app){
        //$str = "[";
        $cats = new Category();
        $trs = $cats->get_trs();
        foreach($trs as $index => $value){
            $tr[$index]["id"] = $value["cat_id"];
            $tr[$index]["pId"] = $value["last_pid"];
            $tr[$index]["name"] = $value["cat_name"];
        }
//开始的时候尝试直接生成的数据
//        foreach($trs as $index => $value){
//            $str .= "{ id:". $value['cat_id']. ", pId:" . $value['last_pid'] . ", name:\"" . $value['cat_name'] . "\"},";
//        }
//        $str = $str . "]";
        print json_encode($tr);
        exit;
    }

前台开始获取的数据样式：object{798:{id:798,pId:0,name:"衬衫"},799:{} ...}

 

4.JS转换成需要的数据样式,用$.each遍历出需要的数据，组成str的JSON字符串，然后用eval转换成JSON对象。最后通过$.fn.zTree.init($("#treeDemo"), setting,oStr);执行生成树状结构

参数设置参照ztree.js API:

<script>

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

function beforeClick(treeId, treeNode, clickFlag) {
    alert('要点了啊');
    return (treeNode.click != false);
}

function onClick(event, treeId, treeNode, clickFlag) {
    alert('已经点了');
}

//可以执行通过的方法
$(document).ready(function() {
    var str = "[";

    $.ajax({
        async : false,
        cache:false,
        type: 'POST',
        dataType : "json",
        url: "/?app_act=product/ztree&app_page=null",//请求的action路径
        error: function () {//请求失败处理函数
            alert('请求失败');
        },
        success:function(data){ //请求成功后处理函数。
            //console.log(data);//此处的data是JSON对象
            $.each(data,function(i,item){
                str = str + "{ id:"+item.id+", pId:"+item.pId+ ", name:\"" +item.name+ "\"},";
            });
            str=str.substring(0,str.length-1);
            str = str + "]";//此时str是JSON字符串
            //console.log(str);
            oStr = eval("("+str+")");//这货到底是做神马用的啊?  把JSON字符串转换成JSON对象
            //console.log(oStr);
        }
    });

    $.fn.zTree.init($("#treeDemo"), setting,oStr);
});
</script>

 

checkbox,randio等进一步加入，学习ing！