dwz 动态生成树哦

ww380459000 发布于 2012/07/05 21:52
阅读 4K+
收藏 0
DWZ
请问一下dwz动态生成树怎么做呢?ul和li怎么去动态嵌套呢?
加载中
0
ww380459000
ww380459000

自己用php写了个,分享一下哦

$cates 数据格式

$html = str_replace('<ul></ul>','',$this->getTree($cates,0));

echo $html;

private function getTree($data,$pId){
        if($pId==0){
            $html = '<ul class="tree treeFolder">';
        }else{
            $html = '<ul>';
        }
        foreach ($data as $key=>$value){
            if($value['category']['pid']==$pId){
                $html .= "<li><a href='#' target='navTab' rel='main'>".$value['category']['name']."</a>";
                $html .= $this->getTree($data,$value['category']['id']);
                $html .= "</li>";
            }
        }
        return $html."</ul>";
    }

希望能帮到大家哦,本人qq:380459000

0
ww380459000
ww380459000

js实现:服务器返回固定格式的json或者数组

<div id="leftside">
    <div id="sidebar">
        <div class="toggleCollapse">
            <h2>主菜单</h2>
        </div>
        <div class="accordion" fillSpace="sidebar" ref="index">
            <div class="accordionHeader">
                <h2>
                    <span>Folder</span>系统首页
                </h2>
            </div>
            <div class="accordionContent" id="left">
            </div>
        </div>

    </div>
</div>
<script>
    function getTree(data,pId){
        var tree;
        if(pId==0){
            tree = '<ul class="tree treeFolder">';
        }else{
            tree = '<ul>';
        }
        for(var i in data){
            if(data[i].pId == pId){
                tree += "<li><a href='#' target='navTab' rel='main'>"+data[i].name+"</a>";
                tree += getTree(data,data[i].id);
                tree += "</li>";
            }
        }
        return tree+"</ul>";
    }
    jQuery(function($) {
        var data = [{"id":1,"pId":0,"name":"aaa"},{"id":2,"pId":1,"name":"bbb"},{"id":3,"pId":2,"name":"ccc"},{"id":4,"pId":3,"name":"ddd"},{"id":5,"pId":2,"name":"eee"},{"id":6,"pId":5,"name":"fff"}]
        $("#left").html(getTree(data,0).replaceAll("<ul></ul>",""));
    });
</script>
返回顶部
顶部