数码资讯
一个jQuery插件的使用教程zTree树
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
本文分析了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设置= {
观点：{
addhoverdom：addhoverdom，
removehoverdom：removehoverdom
}，
回调：{
BeforeClick：beforeclick，
OnClick：onclick
}
}；
功能beforeclick（treeid，树节点，clickflag）{
/ /警报（TreeNode。ID）；
无功ticketbagno = treenode.phone；
Re = new RegExp（ticketbagno）；
VaR接受=美元（#接受）（。Val）； / /找到把数据，并测试是否有
如果（！re.test（接受））{
$（#接受）。瓦迩（接受+姓名+树节点。
}
}
函数OnClick（事件、treeid，树节点，clickflag）{
/ /警报（clickflag +ZZZ）；
}
回调中有两个回调函数
BeforeClick：
它是用于捕获或取消校验的事件回调函数，并根据返回值确定是否检查或取消默认值：null。
OnClick：
用于捕获节点单击的事件回调函数。
如果beforeclick方法设置并返回FALSE，onclick事件的回调函数将不会触发。
默认值：null
addhoverdom结束节点响应鼠标，我们到这里来是一个目录添加一个选择功能，是一个功能addhoverdom：
复制代码代码如下：功能addhoverdom（treeid，TreeNode）{
如果（！TreeNode。儿童）返回；
如果（treenode.parentnode treenode.parentnode.id！= 1）返回；
var = $（儿# + treenode.tid + idmark_a）；
如果（TreeNode。孩子。长> 0）{
如果（$（# diybtn1_+ TreeNode。ID）。长> 0）返回；
如果（$（# diybtn2_ + TreeNode。ID）。长> 0 / /返回）；onclick= 'allselect（+树+ ）
无功editstr = 选择；
AObj.append（editstr）；
document.getelementbyid（diybtn1_+ TreeNode。ID）。Onclick =函数（）{（）
allselect（树）；
}；
}
}
选择allselect方法：
复制代码代码如下：功能allselect（树）{
如果（！TreeNode。儿童）返回；
为（i = 0；i < treenode.children.length；i++）{
无功ticketbagno = TreeNode。儿童手机{我}；
Re = new RegExp（ticketbagno）；
VaR接受=美元（#接受）（。Val）； / /如果记录不添加文本框
如果（！re.test（接受））{
$（#接受）。瓦迩（接受+ TreeNode。孩子{我}姓名+。
}
}
}
removehoverdom：使鼠标删除节点响应，删除所有
复制代码代码如下：功能removehoverdom（treeid，TreeNode）{
如果（！TreeNode。儿童）返回；
$（# diybtn1_+ TreeNode。ID）。Unbind（）删除（）；
}
zTree节点信息：可以根据需要动态生成。
下面是演示数据。可以根据需要添加或修改每个节点的名称和电话。例如，您必须添加一个年龄：23
复制代码如下：var znodes n
{ 1，名字：，打开：false，所有的老师，默认情况下，false被关闭，真正打开
孩子们：{
{编号：2，名称：测试教师
{身份证：3，姓名：大教师
}
}，
{编号：4，名称：一班
孩子们：{
{编号：5，姓名：小花
{ id：6，名称：小绿
}，
{ id：7，名称：第二类
孩子们：{
{ id：8，名称：小家
{编号：9，名称：小沙
}
}；
下面是一个示例，说明如何使用JSP从服务动态生成树。它不需要被忽视。我稍后保存参考资料。
复制代码如下： / *无功znodes n
0 >
{ id：1，名称：所有教师
孩子们：{
{：
{：
}
}，
0 >
{：
孩子们：{
{：
{：
} }，
} }
}；
准备好初始化树的显示位置，
复制代码如下：$（文档）Ready（函数（）{（）{）
美元。fn.ztree.init（$（# treedemo ），设置，znodes）；
}）；
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。
了解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设置= {
观点：{
addhoverdom：addhoverdom，
removehoverdom：removehoverdom
}，
回调：{
BeforeClick：beforeclick，
OnClick：onclick
}
}；
功能beforeclick（treeid，树节点，clickflag）{
/ /警报（TreeNode。ID）；
无功ticketbagno = treenode.phone；
Re = new RegExp（ticketbagno）；
VaR接受=美元（#接受）（。Val）； / /找到把数据，并测试是否有
如果（！re.test（接受））{
$（#接受）。瓦迩（接受+姓名+树节点。
}
}
函数OnClick（事件、treeid，树节点，clickflag）{
/ /警报（clickflag +ZZZ）；
}
回调中有两个回调函数
BeforeClick：
它是用于捕获或取消校验的事件回调函数，并根据返回值确定是否检查或取消默认值：null。
OnClick：
用于捕获节点单击的事件回调函数。
如果beforeclick方法设置并返回FALSE，onclick事件的回调函数将不会触发。
默认值：null
addhoverdom结束节点响应鼠标，我们到这里来是一个目录添加一个选择功能，是一个功能addhoverdom：
复制代码代码如下：功能addhoverdom（treeid，TreeNode）{
如果（！TreeNode。儿童）返回；
如果（treenode.parentnode treenode.parentnode.id！= 1）返回；
var = $（儿# + treenode.tid + idmark_a）；
如果（TreeNode。孩子。长> 0）{
如果（$（# diybtn1_+ TreeNode。ID）。长> 0）返回；
如果（$（# diybtn2_ + TreeNode。ID）。长> 0 / /返回）；onclick= 'allselect（+树+ ）
无功editstr = 选择；
AObj.append（editstr）；
document.getelementbyid（diybtn1_+ TreeNode。ID）。Onclick =函数（）{（）
allselect（树）；
}；
}
}
选择allselect方法：
复制代码代码如下：功能allselect（树）{
如果（！TreeNode。儿童）返回；
为（i = 0；i < treenode.children.length；i++）{
无功ticketbagno = TreeNode。儿童手机{我}；
Re = new RegExp（ticketbagno）；
VaR接受=美元（#接受）（。Val）； / /如果记录不添加文本框
如果（！re.test（接受））{
$（#接受）。瓦迩（接受+ TreeNode。孩子{我}姓名+。
}
}
}
removehoverdom：使鼠标删除节点响应，删除所有
复制代码代码如下：功能removehoverdom（treeid，TreeNode）{
如果（！TreeNode。儿童）返回；
$（# diybtn1_+ TreeNode。ID）。Unbind（）删除（）；
}
zTree节点信息：可以根据需要动态生成。
下面是演示数据。可以根据需要添加或修改每个节点的名称和电话。例如，您必须添加一个年龄：23
复制代码如下：var znodes n
{ 1，名字：，打开：false，所有的老师，默认情况下，false被关闭，真正打开
孩子们：{
{编号：2，名称：测试教师
{身份证：3，姓名：大教师
}
}，
{编号：4，名称：一班
孩子们：{
{编号：5，姓名：小花
{ id：6，名称：小绿
}，
{ id：7，名称：第二类
孩子们：{
{ id：8，名称：小家
{编号：9，名称：小沙
}
}；
下面是一个示例，说明如何使用JSP从服务动态生成树。它不需要被忽视。我稍后保存参考资料。
复制代码如下： / *无功znodes n
0 >
{ id：1，名称：所有教师
孩子们：{
{：
{：
}
}，
0 >
{：
孩子们：{
{：
{：
} }，
} }
}；
准备好初始化树的显示位置，
复制代码如下：$（文档）Ready（函数（）{（）{）
美元。fn.ztree.init（$（# treedemo ），设置，znodes）；
}）；
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。