jquery递归实现树 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/js/jquery-1.7.min.js" type="text/javascript"></script>
    <script>



        $(function () {
            var data = [{

                "id": "01",

                "name": "中国",

                "items": [{

                    "id": "0101",

                    "name": "北京市",

                    "items": [{

                        "id": "0101",

                        "name": "东城区"

                    }]

                }, {

                    "id": "0102",

                    "name": "郴州市",

                    "items": [{

                        "id": "0101",

                        "name": "安仁县"

                    }]

                }]

            },

{

    "id": "02",

    "name": "美国"

}];



            $("#treeRoot").html(TreeHtml(data));
        });


        var strHtml = "";

        //递归实现树结构
        function TreeHtml(data) {

            $.each(data, function (key, value) {
                strHtml += '<li id="li' + value.id + '"> ' + value.name;

                if (value.items && value.items.length > 0) {
                    strHtml += '<ul id="ul' + value.id + '">';
                    TreeHtml(value.items);
                    strHtml += '</ul>';
                }

                strHtml += ' </li>';

            });

            return strHtml;
        }
    </script>
</head>
<body>
    <div class="Tree">
        <ul id="treeRoot">
        </ul>
    </div>
</body>
</html>

 

 

posted @ 2013-07-30 15:58  冰vs焰  阅读(1812)  评论(0)    收藏  举报