jQuery插件zTree实现的多选树效果示例

本文实例讲述了jQuery插件zTree实现的多选树效果。分享给大家供大家参考，具体如下：

1、实现代码：

！DOCTYPE htmlhtmlhead标题多选树/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设置={ check: { enable: true，chkStyle: 'checkbox '，chkboxType: { 'Y': 's '，' N': 'ps' }，数据： { simpledata : { 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:12，pId:1，名称： '黄石市，open:true，{ id:121，pId:12，名称： '黄石港区}，{ id:122，pId:12，名称： '西塞山区}，{ id:2，pId:0，名称： '湖南省，open:true}，{ id:21，pId:2，名称： '长沙市}，{ id:22，pId:2，名称： '株洲市，open:true}，{ id:221，pId:22，名称： '天元区}，{ id:222，pId:22，名称： '荷塘区}，{ id:23，pId:2，名称： '湘潭市'} ];$(文档)。ready(function(){ $)。fn。ztree。init($(' # tree multiple ')，setting，zNodes)；});/////script/head dydiv class=' content _ wrap ' style=' text-align : center；div class=' zTreeDemoBackground left ' ul id=' tree multiple ' class=' ztree ' style=' height : 300 px；宽度宽度：150像素溢出-y:自动/ul /div/div/body/html2、实现效果图：

3、源码说明

(1)Y、N、‘p’和" s "说明

Y属性定义检验盒被勾选后的情况；普通属性定义检验盒取消勾选后的情况；p '表示操作会影响父级节点；s表示操作会影响子级节点。

(2)chkboxType: { 'Y': 's '，' N': 'ps' }

表示检验盒勾选操作，只影响子节点；取消勾选操作，影响父子节点

附：zTree_v3插件点击此处本站下载。

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

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