zTree使用说明.docVIP

ZTree使用说明 李守坤 使用条件: 使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件 zTree核心js文件:jquery.ztree-2.6.js zTree样式文件: 因为zTree是基于jquery，所以还需要对应的jQuery库文件 将这些文件引入使用页面: link rel=stylesheet href=css/zTreeStyle.css type=text/css script type=text/javascript src=js/jquery-1.4.2.js/script script type=text/javascript src=js/jquery.ztree-2.6.js/script 简单使用: 用户需要在页面上新建一个tree对象，需要使用 var zTree = $(#tree).zTree(setting, zTreeNodes); $(#tree)是获取页面上一个id为tree的ul元素 zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。 zTree 的数据zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。 完整代码为： html head title这里是测试页面/title link rel=stylesheet href=css/zTreeStyle.css type=text/css script type=text/javascript src=js/jquery-1.4.2.js/script script type=text/javascript src=js/jquery.ztree-2.6.js/script script type=text/javascript var setting = { showLine: false, //是否显示线，true为显示，false为不显示 checkable: true ,//是否有可选框，true为可选，false为不可选 showIcon : false//是否有图标，true为有，false为没有，默认为true }; //新建数据对象，json数据格式 var zTreeNodes1 = [ { name:手机, open:false, checked:true, nodes: [ { name:诺基亚, isParent:true}, { name:三星}, { name:索爱}, { name:多普达} ]}, { name:电脑, open:true, checked:true, nodes: [ { name:硬件, checked:true}, { name:整机, isParent:true, checked:true}, { name:网络, checked:true} ]}, { name:家电, open:false, nodes: [ { name:电视, checked:true}, { name:冰箱}, { name:空调, isParent:true} ]} ]; /script /head body ul id=tree class=tree style=width:300px; overflow:auto;/ul /body script type=text/javascript var zTree = $(#tree).zTree(setting, zTreeNodes1); /script /html 运行结果便如: Setting对象常用属性说明: var setting = { isSimpleData : true, //是否使用简单的数组结构 treeNodeKey : id, //使用简单数组结构必须制定的节点自身id treeNodeParentKey : pId, //使用简单数组结构必须指定的父节点id showLine: false, //是否显示线，true为显示，false为不显示