zTree更新自定义标签>>>
zTree>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
x
本来想自己敲一个zTree的例子的>>>
但是一想zTree文档做的这么好,直接拷贝过来一个得了...
哈哈>>>
<!DOCTYPE html>
<html>
<head>
<title> ZTREE DEMO - addHoverDom / removeHoverDom / addDiyDom</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="diydom_data/demo.css" type="text/css">
<link rel="stylesheet" href="diydom_data/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="diydom_data/jquery-1.js"></script>
<script type="text/javascript" src="diydom_data/jquery.js"></script>
<script type="text/javascript" src="diydom_data/jquery_002.js"></script>
<script type="text/javascript" src="diydom_data/jquery_003.js"></script>
<style type="text/css">
.ztree li span.demoIcon {
padding: 0 2px 0 10px;
} .ztree li span.button.icon01 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
} .ztree li span.button.icon02 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
} .ztree li span.button.icon03 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
} .ztree li span.button.icon04 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
} .ztree li span.button.icon05 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
} .ztree li span.button.icon06 {
margin: 0;
background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
}
</style>
</head> <body>
<h1>添加自定义控件</h1>
<h6>[ 文件路径: super/diydom.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree" style="-moz-user-select: none;"><li id="treeDemo_1" class="level0" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_1_switch" title="" class="button level0 switch roots_open" treenode_switch=""></span><a id="treeDemo_1_a" class="level0" treenode_a="" onclick="" target="_blank" style="" title="hover事件显示控件"><span id="treeDemo_1_ico" title="" treenode_ico="" class="button ico_open" style=""></span><span id="treeDemo_1_span" class="node_name">hover事件显示控件</span></a><ul id="treeDemo_1_ul" class="level0 line" style="display:block"><li id="treeDemo_2" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_2_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_2_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮1"><span id="treeDemo_2_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_2_span" class="node_name">按钮1</span></a></li><li id="treeDemo_3" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_3_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_3_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮2"><span id="treeDemo_3_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_3_span" class="node_name">按钮2</span></a></li><li id="treeDemo_4" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_4_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_4_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="下拉框"><span id="treeDemo_4_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_4_span" class="node_name">下拉框</span></a></li><li id="treeDemo_5" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_5_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_5_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本1"><span id="treeDemo_5_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_5_span" class="node_name">文本1</span></a></li><li id="treeDemo_6" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_6_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_6_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本2"><span id="treeDemo_6_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_6_span" class="node_name">文本2</span></a></li><li id="treeDemo_7" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_7_switch" title="" class="button level1 switch bottom_docu" treenode_switch=""></span><a id="treeDemo_7_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="超链接"><span id="treeDemo_7_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_7_span" class="node_name">超链接</span></a></li></ul></li><li id="treeDemo_8" class="level0" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_8_switch" title="" class="button level0 switch bottom_open" treenode_switch=""></span><a id="treeDemo_8_a" class="level0" treenode_a="" onclick="" target="_blank" style="" title="始终显示控件"><span id="treeDemo_8_ico" title="" treenode_ico="" class="button ico_open" style=""></span><span id="treeDemo_8_span" class="node_name">始终显示控件</span></a><ul id="treeDemo_8_ul" class="level0 " style="display:block"><li id="treeDemo_9" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_9_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_9_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮1"><span id="treeDemo_9_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_9_span" class="node_name">按钮1</span><span class="demoIcon" id="diyBtn_21" title="按钮1" onfocus="this.blur();"><span class="button icon01"></span></span></a></li><li id="treeDemo_10" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_10_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_10_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="按钮2"><span id="treeDemo_10_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_10_span" class="node_name">按钮2</span></a><span class="demoIcon" id="diyBtn_22" title="按钮2" onfocus="this.blur();"><span class="button icon02"></span></span></li><li id="treeDemo_11" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_11_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_11_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="下拉框"><span id="treeDemo_11_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_11_span" class="node_name">下拉框</span></a><select class="selDemo" id="diyBtn_23"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></select></li><li id="treeDemo_12" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_12_switch" title="" class="button level1 switch center_docu" treenode_switch=""></span><a id="treeDemo_12_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="文本"><span id="treeDemo_12_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_12_span" class="node_name">文本</span></a><span id="diyBtn_24">Text Demo...</span></li><li id="treeDemo_13" class="level1" tabindex="0" hidefocus="true" treenode=""><span id="treeDemo_13_switch" title="" class="button level1 switch bottom_docu" treenode_switch=""></span><a id="treeDemo_13_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="超链接"><span id="treeDemo_13_ico" title="" treenode_ico="" class="button ico_docu" style=""></span><span id="treeDemo_13_span" class="node_name">超链接</span></a><a id="diyBtn1_25" onclick="alert(1);return false;">链接1</a><a id="diyBtn2_25" onclick="alert(2);return false;">链接2</a></li></ul></li></ul>
</div>
<div>
<input type="button" id="id_update_text" value="更新文本>>>" onclick="test()" />
</div>
<div class="right">
<ul class="info">
<li class="title">
<h2>1、实现方法说明</h2>
<ul class="list">
<li>利用 setting.view.addHoverDom / removeHoverDom / addDiyDom 这几个参数的配置可以很容易的实现自定义控件的功能</li>
<li class="highlight_red">添加自定义控件,请务必掌握 zTree 节点对象的命名规则,以保证正常添加 DOM 控件</li>
<li class="highlight_red">如果添加标准的 select / checkbox / radio 等,请注意适当调整 zTree 的布局 css,保证 zTree 能正常显示</li>
</ul>
</li>
<li class="title">
<h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>使用 setting.view.addHoverDom / removeHoverDom / addDiyDom 属性,详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title">
<h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
<!-- 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,
addDiyDom: addDiyDom
}
}; var zNodes =[
{id:1, name:"hover事件显示控件", open:true,
children:[
{id:11, name:"按钮1"},
{id:12, name:"按钮2"},
{id:13, name:"下拉框"},
{id:141, name:"文本1"},
{id:142, name:"文本2"},
{id:15, name:"超链接"} ]},
{id:2, name:"始终显示控件", open:true,
children:[
{id:21, name:"按钮1"},
{id:22, name:"按钮2"},
{id:23, name:"下拉框"},
{id:24, name:"文本"},
{id:25, name:"超链接"}
]}
]; function addHoverDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 11) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span><span class='button icon03' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 12) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span class='button icon04' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'></span>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 13) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span><select class='selDemo ' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 141) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span class='test' id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.append(editStr);
} else if (treeNode.id == 142) {
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 15) {
if ($("#diyBtn1_"+treeNode.id).length>0) return;
if ($("#diyBtn2_"+treeNode.id).length>0) return;
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;' style='margin:0 0 0 5px;'>链接1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;' style='margin:0 0 0 5px;'>链接2</a>";
aObj.append(editStr);
}
} function removeHoverDom(treeId, treeNode) {
if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
if (treeNode.id == 15) {
$("#diyBtn1_"+treeNode.id).unbind().remove();
$("#diyBtn2_"+treeNode.id).unbind().remove();
} else {
$("#diyBtn_"+treeNode.id).unbind().remove();
$("#diyBtn_space_" +treeNode.id).unbind().remove();
}
} function addDiyDom(treeId, treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
var aObj = $("#" + treeNode.tId + IDMark_A);
if (treeNode.id == 21) {
var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon01'></span></span>";
aObj.append(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 22) {
var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon02'></span></span>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
} else if (treeNode.id == 23) {
var editStr = "<select class='selDemo' id='diyBtn_" +treeNode.id+ "'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>";
aObj.after(editStr);
var btn = $("#diyBtn_"+treeNode.id);
if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
} else if (treeNode.id == 24) {
var editStr = "<span id='diyBtn_" +treeNode.id+ "'>Text Demo...</span>";
aObj.after(editStr);
} else if (treeNode.id == 25) {
var editStr = "<a id='diyBtn1_" +treeNode.id+ "' onclick='alert(1);return false;'>链接1</a>" +
"<a id='diyBtn2_" +treeNode.id+ "' onclick='alert(2);return false;'>链接2</a>";
aObj.after(editStr);
}
} ///主要是这段代码>>>很容易>>就是一个思路>>>哈哈>>>刚开始一直再查找zTree 的文档>>>没找到,后来一看源码才想到这么简单的问题>>>那时候已经进了zTree的圈出不来了>>>
function test() {
//alert("xx");
//要更新的节点>>>id
var test_id = 24;
var z_tree = $.fn.zTree.getZTreeObj("treeDemo");
var update_node = z_tree.getNodesByParam("id", test_id)[0];;
update_node.name = ">" + Math.floor(Math.random() * 10) + ">";
//updateNode不可以更新自定义标签>>>毕竟自定义的>>>
z_tree.updateNode(update_node);
console.log(update_node);
//这里可以直接用文本的id = "diyBtn_24"来更新>>>我遇上的情况这种文本比较多.通过name或者class来控制的>>>..
$("#" + update_node.tId).find("span").last().text(">" + Math.floor(Math.random() * 10) + ">");
} $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
//触发>>>更新>>>
//$("#id_update_text").off("click");
//$("#id_update_text").on("click", function () {
//})
});
//-->
</script>
</body>
</html>
思路很简单>>>
但是刚开始陷入了zTree的文档里面了{想从里面找到接口>>>}
后来跳出来一看这么简单的问题>>>
下面贴上我拷贝zTree官网的demo↓文件>>>好吧,找到怎么上传文件再贴 /手动尴尬
x
zTree更新自定义标签>>>的更多相关文章
- 一个简单的jsp自定义标签
学到了一个简单的jsp自定义标签,后面有更多的例子,会更新出来: 例子1: 步骤: 1.编写标签实现类: 继承javax.servlet.jsp.tagext.SimpleTagSupport; 重写 ...
- 写一个可插入自定义标签的 Textarea 组件
- “插入自定义标签是什么鬼?” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...” 一.需求背 ...
- day056-58 django多表增加和查询基于对象和基于双下划线的多表查询聚合 分组查询 自定义标签过滤器 外部调用django环境 事务和锁
一.多表的创建 from django.db import models # Create your models here. class Author(models.Model): id = mod ...
- python 全栈开发,Day70(模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介)
昨日内容回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...
- Django模板自定义标签和过滤器,模板继承(extend),Django的模型层
上回精彩回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...
- OneBlog开源博客-详细介绍如何实现freemarker自定义标签
前言 OneBlog中使用到了springboot + freemarker的技术,同时项目里多个controller中都需要查询一个公有的数据集合,一般做法是直接在每个controller的方法中通 ...
- ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)
原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...
- [JSP]自定义标签库taglib
自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag.TagSupport.BodyTagSupport.Simpl ...
- [Java] JSP笔记 - 自定义标签
自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...
随机推荐
- c++类大四个默认函数-构造函数 析构函数 拷贝构造函数 赋值构造函数
每个类只有一个析构函数和一个赋值函数,但可以有多个构造函数(包含一个拷贝构造函数,其它的称为普通构造函数).对于任意一个类A,如果不编写上述函数,C++编译器将自动为A 产生四个缺省的函数,例如: A ...
- Atitit.mysql 5.0 5.5 5.6 5.7 新特性 新功能
Atitit.mysql 5.0 5.5 5.6 5.7 新特性 新功能 1. MySQL 5.6 5 大新特性1 1.1. 优化器的改进1 1.2. InnoDB 改进1 1.3. 使用 ...
- 微信小程序开发填坑
1.模拟器和真机的差异 在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数.譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等.造成这些错乱主要 ...
- Socket网络编程--聊天程序(1)
很早的一段时间,看了APUE和UNPv1了解了网络编程,但是但是只是看而已,没有具体的实践,趁现在没有什么事做,就来实践了解一下网络编程.写博客保存下来,方便以后用到的时候可以查到. 此次的聊天程序是 ...
- golang 命令行cobra妙用
为什么使用命令行 大型项目中少不了数据升级,如果采用web服务,一来不够安全,二来数据量大的时候也会出超时的情况.这时使用命令行是比较合适的方式了. 命令行中的MVC web项目一般采用MVC模式,对 ...
- 【iCore1S 双核心板_ARM】例程十:SYSTICK定时器实验——定时点亮LED
实验原理: 通过STM32的三个GPIO口驱动三色LED的三个通道,设定GPIO为推挽输出,采用 灌电流的方式与LED连接,输出高电平LED灭,输出低电平LED亮,通过系统定时器实现 1s定时,每秒变 ...
- CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...
- Image Lazy Load:那些延时加载图片的开源插件(jQuery)
图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. ...
- 《FPGA全程进阶---实战演练》第七章 让按键恢复平静
1基础理论部分 A:“怎么按键按下去之后,结果不正常?”,B:“按键你消抖了吗?”A:“消什么抖,还要消抖?”, B:“先检测按键变化,然后消抖过滤波动信号,最后输出稳定信号”,A:“我好像漏掉了什 ...
- talk is cheap, show me the code——dcgan,wgan,wgan-gp的tensorflow实现
最近学习了生成对抗网络(GAN),基于几个经典GAN网络结构做了些小实验,包括dcgan,wgan,wgan-gp.坦率的说,wgan,wgan-gp论文的原理还是有点小复杂,我也没有完全看明白,因此 ...