首页 > web前端 > js教程 > Jquery树插件zTree用法入门教程_jquery

Jquery树插件zTree用法入门教程_jquery

WBOY
发布: 2016-05-16 16:13:46
原创
1402 人浏览过

本文实例分析了Jquery树插件zTree用法。分享给大家供大家参考。具体分析如下:

关于zTree的介绍就搜吧。

这个例子的最终效果如下:

鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个。至于要添加些什么信息由自己决定。

1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css

复制代码 代码如下:
 
     
     
     

 
jquery.ztree.core-3.5.js:zTree核心包 
 
jquery.ztree.excheck-3.5.js:复选框功能包  
 
jquery.ztree.exedit-3.5.js:编辑功能包  

zTree核心包是必须引入的。

2. 配置zTree,个别说明见代码中的注释

zTree设置信息:

变量:zTree中用到的html标签ID都会在后面添加以下后缀,如一级目录前面的展开和关闭图片的id为添加IDMark_Switch,其他的摸索吧。

复制代码 代码如下:
var IDMark_Switch = "_switch", 
IDMark_Icon = "_ico", 
IDMark_Span = "_span", 
IDMark_Input = "_input", 
IDMark_Check = "_check", 
IDMark_Edit = "_edit", 
IDMark_Remove = "_remove", 
IDMark_Ul = "_ul", 
IDMark_A = "_a"; 

var setting = { 
    view: { 
 addHoverDom: addHoverDom, 
 removeHoverDom: removeHoverDom 
    }, 
    callback: { 
 beforeClick: beforeClick, 
 onClick: onClick 
    } 
}; 
function beforeClick(treeId, treeNode, clickFlag) { 
    //alert(treeNode.id); 
    var ticketBagNo = treeNode.phone; 
    re =new RegExp(ticketBagNo);  
    var accept = $("#accept").val();//找到要放数据的地方,并测试是否已经存在 
    if(!re.test(accept)){ 
    $("#accept").val(accept+treeNode.name+","); 
    } 

function onClick(event, treeId, treeNode, clickFlag) { 
    //alert(clickFlag+"zzz"); 
}

callback中有两个回调函数

beforeClick:

是用于捕获 勾选 或 取消勾选 之前的事件回调函数,并且根据返回值确定是否允许 勾选 或 取消勾选默认值:null

onClick:

用于捕获节点被点击的事件回调函数
如果设置了 beforeClick 方法,且返回 false,将无法触发 onClick 事件回调函数。
默认值:null

addHoverDom,就是鼠标移过节点所作出的反应,我们这里为一级目录添加一个全选功能,addHoverDom是一个函数:

复制代码 代码如下:
function addHoverDom(treeId, treeNode) { 
 if (!treeNode.children)return; 
    if (treeNode.parentNode && treeNode.parentNode.id!=1 ) return; 
    var aObj = $("#" + treeNode.tId + IDMark_A); 
    if (treeNode.children.length>0) { 
 if ($("#diyBtn1_"+treeNode.id).length>0) return; 
 if ($("#diyBtn2_"+treeNode.id).length>0) return;//' onclick='allSelect("+treeNode+") 
 var editStr = "全选"; 
 aObj.append(editStr); 
 document.getElementById("diyBtn1_"+treeNode.id).onclick = function() { 
      allSelect(treeNode); 
 }; 
    } 
}

全选allSelect方法:

复制代码 代码如下:
function allSelect(treeNode){ 
    if (!treeNode.children)return; 
    for(i=0;i  var ticketBagNo = treeNode.children[i].phone; 
    re =new RegExp(ticketBagNo);   
    var accept = $("#accept").val();//找到文本框如果该记录未添加就添加 
    if(!re.test(accept)){ 
 $("#accept").val(accept+treeNode.children[i].name+","); 
    } 
    } 
}

removeHoverDom:鼠标移除节点所做出的反应,去掉全选

复制代码 代码如下:
function removeHoverDom(treeId, treeNode) { 
if (!treeNode.children)return; 
$("#diyBtn1_"+treeNode.id).unbind().remove(); 
}

zTree节点信息:可以根据需求动态生成。

以下为Demo数据,每个节点中的name,phone都可以按照自己的需要进行添加或修改,比如你要添加一个年龄:age="23",但是要注意格式问题,这一点是非常方便。

复制代码 代码如下:
var zNodes =[ 
    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 
 children:[ 
  {id:2,name:"测试老师",phone:"123456789101"}, 
  {id:3,name:"大老师",phone:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 children:[ 
      
   {id:5,name:"小花",phone:"25364215211"}, 
  {id:6,name:"小绿",phone:"365241253"} 
  }, 

  {id:7,name:"二班",open:true, 
 children:[ 
      
   {id:8,name:"小家",phone:"25364215211"}, 
  {id:9,name:"小沙",phone:"365241253"} 
   } 
];

以下是我用jsp从服务动态生成树的例子,不需要可以忽略,我留着以后参考的。

复制代码 代码如下:
/*var zNodes =[ 
 
    {id:1,name:"所有老师",open:false, 
 children:[ 
   
  {id:,name:"",phone:""}, 
  {id:,name:"",phone:""} 
  
 
 ] 
    }, 
   
 
 
     
    {id:,name:"",open:true, 
 children:[ 
      
   {id:,name:"",phone:""}, 
  {id:,name:"",phone:""} 
    
 
     ]}, 
     ]} 
   
 
 
];*/

准备就绪。初始化树要显示的地方,

复制代码 代码如下:
$(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
});

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板