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 ...
随机推荐
- Load 和 DOMContentLoaded 区别
Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕. DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载.
- Spring中通过Annotation来实现AOP
一.Spring配置文件 <!--通过@AspectJ注解的形式来使用Spring AOP,强制使用CGLIB代理--> <aop:aspectj-autoproxy proxy-t ...
- JS 全屏代码
// 推断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.requ ...
- sringboot项目在tomcat上的部署
sringboot项目在tomcat上的部署原文链接: https://blog.csdn.net/zhaoyahui_666/article/details/78283559#comments 20 ...
- Atitit 数据库表文档生成解决方案
Atitit 数据库表文档生成解决方案 1.1. Sql dml文件结构法 最快速1 1.2. Sql法+sp存储过程 (表格式样)1 1.3. Navicate uml法 (uml格式)2 1.4. ...
- 在Thinkphp中【自动加载自定义扩展配置文件】！
/Conf/config.php为正式的扩展文件 /Conf/verify.php为扩展的自定义配置文件 /Conf/sendmail.php为扩展的自定义配置文件 如果要自动加载 verify和se ...
- 【iCore1S 双核心板_ARM】例程一：ARM驱动三色LED
实验原理: 通过STM32的三个GPIO驱动一个三色LED,引脚PF3接蓝色LED(ARM_LEDB), 引脚PF4接绿色LED(ARM_LEDG),引脚PF5接红色LED(ARM_LEDR), G ...
- Java8 中增强 Future：CompletableFuture
增强的 Future:CompletableFuture CompletableFuture(它实现了 Future 接口) 和 Future 一样,可以作为函数调用的契约.当你向它请求获得结果,如果 ...
- 删除最少字符生成Palindrome
看到一个哥们G家电面试题,求删除最少字符生成Palindrome.大神们都在讨论dp,我完全想不到. 放一个没优化的DFS. 乐神说是O(n3)复杂度, 有机会的话要减少使用substring,并且要 ...
- Django 源码小剖: Django 中的 WSGI
Django 其内部已经自带了一个方便本地测试的小服务器, 所以在刚开始学习 Django 的时候并不需搭建 apache 或者 nginx 服务器. Django 自带的服务器基于 python w ...