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 ...
随机推荐
- 动态改变APP图标
一.iOS动态更换App图标(一):基础使用 该功能应用的场景 1.白天/夜间模式切换,在切换App主色调同时切换App图标. 2.各类皮肤主题(淘宝就可换肤),附带App图标一块更换. 3.利用Ap ...
- C#面试题(转载)
原文地址:100道C#面试题(.net开发人员必备) https://blog.csdn.net/u013519551/article/details/51220841 1. .NET和C#有什么区 ...
- C++ 匿名namespace的作用以及与static的区别
匿名namespace的作用以及它与static的区别 一.匿名namespace的作用 在C语言中,如果我们在多个tu(translation unit)中使用了同一个名字做 为函数名或者全局变量名 ...
- ubuntu安装odbc及(mysql驱动)
一.安装odbc apt-get install unixodbc 如果需要用到编译的头文件之类的 apt-get install unixodbc-dev 二.安装mysql驱动 apt-get i ...
- Socket网络编程--小小网盘程序(4)
在这一小节中实现了文件的下载,具体的思路是根据用户的uid和用户提供的文件名filename联合两张表,取得md5唯一标识符,然后操作这个标识符对应的文件发送给客户端. 实现下载的小小网盘程序 cli ...
- python中的生成器函数是如何工作的?
以下内容基于python3.4 1. python中的普通函数是怎么运行的? 当一个python函数在执行时,它会在相应的python栈帧上运行,栈帧表示程序运行时函数调用栈中的某一帧.想要获得某个函 ...
- Java Web项目中连接Access数据库的配置方法
本文是对前几天的"JDBC连接Access数据库的几种方式"这篇的升级.因为在做一些小项目的时候遇到的问题,因此才决定写这篇博客的.昨天已经将博客公布了.可是后来经过一些验证有点问 ...
- spark 解析非结构化数据存储至hive的scala代码
//提交代码包 // /usr/local/spark/bin$ spark-submit --class "getkv" /data/chun/sparktes.jar impo ...
- [GPU] DIY for Deep Learning Workstation
Link: jcjohnson/cnn-benchmarks Ref: Build a super fast deep learning machine for under $1,000 Graphi ...
- 【Latex】常用工具包
字体篇: \usepackage{color} {\color{red}{Hello World!}} 表格篇: 1.resizebox \begin{table*}[!htb] \centering ...