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里。