zTree 是一个开源的,依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
项目中展示程序调用堆栈树结构,因此采用了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里。