最近在做宿舍管理系统小型项目,在进行用户角色设定、角色资源(菜单)设定的时候,需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。
1、通过官网下载demo或者下载zTree相关的插件;
官网地址:zTree官网
2、页面文件引入需要的zTree插件:
主要引入的对象有:zTreeStyle.css、 jquery-1.4.4.min.js、 jquery.ztree.all.js。
引入示例:
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.all.js"></script>
3、编写js脚本,设定树形结构的一些属性值以及加载文件位置:
页面内容:
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
js脚本文件:
<SCRIPT LANGUAGE="JavaScript">
//js方法
function test(event, treeId, treeNode){
alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
}
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
check:{
enable: true,
autoCheckTrigger:true,
chkStyle:"checkbox"
},
callback:{
onCheck:test
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"test1", open:true,"checked":"true", children:[
{name:"test1_1","checked":"true"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
//页面加载成功后,开始加载树形结构
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.
运行结果如下: