Jquery树插件zTree用法入门教程

  • Z时代
  • 2024-01-10
  • 分类：综合

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

关于zTree的介绍就搜吧。

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

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

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

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>  
    <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>  
    <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>  
    <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>  
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/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+"<"+ticketBagNo+">,"); 

    } 

} 

function onClick(event, treeId, treeNode, clickFlag) { 

    //alert(clickFlag+"zzz"); 

}

以上是 Jquery树插件zTree用法入门教程 的全部内容， 来源链接： utcz.com/z/340564.html

回到顶部