jQuery插件zTree实现的基本树与节点获取操作示例

本文实例讲述了jQuery插件zTree实现的基本树与节点获取操作。分享给大家供大家参考，具体如下：

1、实现代码：

！DOCTYPE htmlhtmlhead titlezTree实现基本树/title meta http-equiv=' content-type ' content=' text/html；charset=UTF-8' link rel='样式表type=' text/CSS ' href=' zTree _ v3/CSS/demo。CSS ' rel='外部nofollow '链接rel='样式表type=' text/CSS ' href=' zTree _ v3/CSS/zTree style。CSS ' rel='外部nofollow '脚本类型=' text/JAVAScript ' src=' http 3360 Ztree _ v3/js/jquery-1。4 .4- var设置={ data : { simple data : { enable : true } } }；var zNodes=[ { id:1，pId:0，name: '湖北省，open:true，{ id:11，pId:1，name: '武汉市，open:true，{ id:111，pId:11，名称： '汉口}，{ id:112，pId:11，名称： '汉阳}，{ id:113，pId:11，名称： '武昌}，{ id:12，pId:1，名称： '黄石市}，{ id:121，pId:12，名称： '黄石港区}，{ id:122，pId:12，名称： '西塞山区}，{ id:123，pId:12，名称： '下陆区}，{ id:124，pId:12，名称： '铁山区}，{ id:13，pId:1，名称： '黄冈市}，{ id:2，pId:0，名称： '湖南省，open:true}，{ id:21，pId:2，名称： '长沙市，open:true}，{ id:211，pId:21，名称： '芙蓉区}，{ id:212，pId:21，名称： '天心区}，{ id:213，pId:21，名称： '岳麓区}，{ id:214，pId:21，名称： '开福区}，{ id:22，pId:2，名称： '株洲市}，{ id:221，pId:22，名称为： '天元区}，{ id:222，pId:22，名称： '荷塘区}，{ id:223，pId:22，名称： '芦淞区}，{ id:224，pId:22，名称： '石峰区}，{ id:23，pId:2，名称： '湘潭市}，{ id:231，pId:23，名称： '雨湖区}，{ id:232，pId:23，名称： '岳塘区}，{ id:233，pId:23，名称： '湘乡市}，{ id:234，pId:23，名称： '韶山市'} ];$(文档)。ready(function(){ $)。fn。ztree。init($(' #基本树')，setting，zNodes)；});/** * 获取选中节点的编码和名称*/function find select(){ var treeObj=$。fn。ztree。getztreeObj(' base tree ')；var nodes=treeObj。getselected nodes()；for(var I=0；索引节点长度；i ) { var nodeId=nodes[i].id；var nodeName=nodes[i].姓名；警报('树节点编码：' nodeId '\n ' '树节点名称：' nodeName)；} }/////script/head dydiv class=' content _ wrap ' div class=' zTreeDemoBackground left ' style=' text-align : center；ul id=' BaseTree ' class=' z tree ' style=' height : 300 px；宽度宽度：200像素溢出-y:自动/ul输入类型=' button ' id=' BTN ' onclick=' find select()' value='获取选中节点//div/div/body/html2、设计效果图：

(1)初始化

(2)单击按钮

3、设计说明

获取zTree当前被选中的节点数据集合

var treeObj=$。fn。ztree。getztreeObj(' base tree ')；var nodes=treeObj。getselected nodes()；附：zTree_v3插件点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。