jquery樹形插件zTree實踐

zTree 是一個開源的，依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

地址：http://www.treejs.cn/

項目中展示程序調用堆棧樹結構，因此採用了zTree比較簡單的方式，進行需求實現。

1、引用zTree

主要引入的對象有：zTreeStyle.css、jquery.ztree.all.js，注意jquery版本應在1.4.4版本以及以上。

<link rel="stylesheet" href="/static/css/zTreeStyle.css">
<script src="/static/js/ztree/jquery.ztree.all.js"></script>

 

2、前端調用

頁面內容

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

編寫js

{literal}
    <script type="text/javascript">
        function test(event, treeId, treeNode) {
            alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
        }
        setting = {
            callback:{
                onCheck:test
            }
        };

        zTreeNodes = [
            {
                name:"test1",
                open:true,
                children:[
                    {
                        name:"test1_1",
                        open:true,
                        children:[
                            {
                                name:"test_1_1_1",
                                open:true,
                            },
                            {
                               name:"test1_1_2",
                                open:true
                            }

                        ]
                    },
                    {
                        name:"test1_2",
                        open:true,
                        children:[
                            {
                                name: "test1_2_1",
                                open: true,
                            }
                        ]
                    }
                ]
            }
        ];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"),setting,zTreeNodes)
        });

    </script>
{/literal}

參考前端頁面如下：

其中遇到幾個問題：

1、Unexpected ":", expected one of: "}" , " "

javascript代碼本身是沒問題的，這個錯誤是smarty框架報錯，js變量中配置了smarty的開閉標籤爲‘{’,'}'，smarty在編譯的時候就會以爲遇到smarty語法，進行編譯發生了錯誤，解決方法是用smarty中的{literal}標籤，來包裹javascript代碼。

2、$ undefined

還是引用問題，js引用要在調用之前，最好在basetpl的head裏。