最近有个项目要用ztree，需要用ztree自带的功能（增删改），也需要自定义DOM的功能（置顶）。

ztree的demo里有增删改的demo，也有自定义DOM的demo，但没有两者结合的。

所以我把demo改了一下，两个功能合在了一起。

上代码。

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - edit</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">

    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>

    <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 = {

            edit: {

                enable: true

            },

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback: {

                beforeDrag: beforeDrag

            },

            view: {

                addHoverDom: addHoverDom,

                removeHoverDom: removeHoverDom

            }

        };

        var zNodes =[

            { id:1, pId:0, name:"父节点 1", open:true},

            { id:11, pId:1, name:"叶子节点 1-1"},

            { id:12, pId:1, name:"叶子节点 1-2"},

            { id:13, pId:1, name:"叶子节点 1-3"},

            { id:2, pId:0, name:"父节点 2", open:true},

            { id:21, pId:2, name:"叶子节点 2-1"},

            { id:22, pId:2, name:"叶子节点 2-2"},

            { id:23, pId:2, name:"叶子节点 2-3"},

            { id:3, pId:0, name:"父节点 3", open:true},

            { id:31, pId:3, name:"叶子节点 3-1"},

            { id:32, pId:3, name:"叶子节点 3-2"},

            { id:33, pId:3, name:"叶子节点 3-3"}

        ];

        function beforeDrag(treeId, treeNodes) {

            return false;

        }

        function setEdit() {

            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

            remove = $("#remove").attr("checked"),

            rename = $("#rename").attr("checked"),

            removeTitle = $.trim($("#removeTitle").get(0).value),

            renameTitle = $.trim($("#renameTitle").get(0).value);

            zTree.setting.edit.showRemoveBtn = remove;

            zTree.setting.edit.showRenameBtn = rename;

            zTree.setting.edit.removeTitle = removeTitle;

            zTree.setting.edit.renameTitle = renameTitle;

            showCode(['setting.edit.showRemoveBtn = ' + remove, 'setting.edit.showRenameBtn = ' + rename,

                'setting.edit.removeTitle = "' + removeTitle +'"', 'setting.edit.renameTitle = "' + renameTitle + '"']);

        }

        function showCode(str) {

            var code = $("#code");

            code.empty();

            for (var i=0, l=str.length; i<l; i++) {

                code.append("<li>"+str[i]+"</li>");

            }

        }

        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+ "' >&nbsp;</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);});

            }

        }

        function removeHoverDom(treeId, treeNode) {

            if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;

            console.log("???")

            if (false) {

                $("#diyBtn1_"+treeNode.id).unbind().remove();

                $("#diyBtn2_"+treeNode.id).unbind().remove();

            } else if (treeNode.id == 11) {

                $("#diyBtn_"+treeNode.id).unbind().remove();

                $("#diyBtn_space_" +treeNode.id).unbind().remove();

            }

        }

        $(document).ready(function(){

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            setEdit();

            $("#remove").bind("change", setEdit);

            $("#rename").bind("change", setEdit);

            $("#removeTitle").bind("propertychange", setEdit)

            .bind("input", setEdit);

            $("#renameTitle").bind("propertychange", setEdit)

            .bind("input", setEdit);

        });

        //-->

    </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>[ 文件路径: exedit/edit.html ]</h6>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="treeDemo" class="ztree"></ul>

    </div>

    <div class="right">

        <ul class="info">

            <li class="title"><h2>1、setting 配置信息说明</h2>

                <ul class="list">

                <li>此 Demo 仅从功能上演示编辑节点的基本方法和配置参数</li>

                <li class="highlight_red">1)、使用 编辑功能，必须设置 setting.edit 中的各个属性，详细请参见 API 文档中的相关内容</li>

                <li class="highlight_red">2)、使用 编辑功能的事件回调函数，必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等属性，详细请参见 API 文档中的相关内容</li>

                <li class="highlight_red">3)、zTree 不提供默认的增加按钮，如需实现请利用自定义控件的方法 addHoverDom / removeHoverDom ，详细请参见 API 文档中的相关内容；另外也可以参考 "高级 增 / 删 / 改 节点" 的 Demo</li>

                <li><p>基本编辑按钮设置：<br/>

                        <input type="checkbox" id="remove" class="checkbox first" checked /><span>显示删除按钮</span>

                        <input type="checkbox" id="rename" class="checkbox " checked /><span>显示编辑按钮</span><br/>

                        remove 按钮的 title: <input type="text" id="removeTitle" value="remove" /><br/>

                        rename 按钮的 title: <input type="text" id="renameTitle" value="rename" />

                        <ul id="code" class="log" style="height:85px;"></ul></p>

                </li>

                </ul>

            </li>

            <li class="title"><h2>2、treeNode 节点数据说明</h2>

                <ul class="list">

                <li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li>

                </ul>

            </li>

        </ul>

    </div>

</div>

</BODY>

</HTML>

以上。

ztree : 增删改功能demo与自定义DOM功能demo的结合的更多相关文章

  1. JavaWeb系统（增删改查、多条件查询功能）

    该系统是一个简单的青年服务管理系统,主要包括了较完整的常用的增删改查以及多条件查询功能,对于初学者有很大帮助. 下面是相关的Java代码.jsp页面.以及数据库的创建和相关表的设计 java代码 首先 ...

  2. JS增删改查localStorage实现搜索历史功能

    <script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath" ...

  3. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

  4. IOS之分析网易新闻存储数据(CoreData的使用，增删改查)

    用过网易新闻客户端的朋友们都知道,获取新闻列表时有的时候他会请求网络有时候不会,查看某条新闻的时候再返回会标注已经查看的效果,接下来分析一下是如何实现的. 首先: 1.网易新闻用CoreData存储了 ...

  5. SpringBoot JPA + H2增删改查示例

    下面的例子是基于SpringBoot JPA以及H2数据库来实现的,下面就开始搭建项目吧. 首先看下项目的整体结构: 具体操作步骤: 打开IDEA,创建一个新的Spring Initializr项目, ...

  6. ASP.NET CORE系列【三】使用Entity Framework Core进行增删改查

    身份验证 以前我们熟悉的web.config中配置的form验证,现在没有了.我们来看看在Core里面如何配置: 首先需要NuGet安装一个包:Microsoft.AspNetCore.Authent ...

  7. 总结：mysql的各种增删改查！

    (原创总结)分为数据库的增删改查,数据表(和字段)的增删改查,数据的增删改查 三部分!// 创建用户并授权 GRANT SELECT ON bodydb.user TO us@localhost ID ...

  8. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  9. 手把手教你ASP.NET Core：使用Entity Framework Core进行增删改查

    新建表Todo,如图 添加模型类 在"解决方案资源管理器"中,右键单击项目. 选择"添加" > "新建文件夹". 将文件夹命名为 Mo ...

随机推荐

  1. docker安装，基本使用，实战

    [docker概念作用术语] [使用docker的步骤] [docker安装及配置] [环境要求] docker要求centos7 必须要64位,内核3.1及以上 https://docs.docke ...

  2. 旷世提出类别正则化的域自适应目标检测模型，缓解场景多样的痛点 | CVPR 2020

    论文基于DA Faster R-CNN系列提出类别正则化框架,充分利用多标签分类的弱定位能力以及图片级预测和实例级预测的类一致性,从实验结果来看,类该方法能够很好地提升DA Faster R-CNN系 ...

  3. linux网络编程-一个简单的线程池（41）

    有时我们会需要大量线程来处理一些相互独立的任务,为了避免频繁的申请释放线程所带来的开销,我们可以使用线程池 1.线程池拥有若干个线程,是线程的集合,线程池中的线程数目有严格的要求,用于执行大量的相对短 ...

  4. 并发05--JAVA并发容器、框架、原子操作类

    一.ConcurrentHashMap的实现原理与使用 1.为什么要使用ConsurrentHashMap 两个原因,hashMap线程不安全(多线程并发put时,可能造成Entry链表变成环形数据结 ...

  5. POJ 3463 Sightseeing 【最短路与次短路】

    题目 Tour operator Your Personal Holiday organises guided bus trips across the Benelux. Every day the ...

  6. 你想了解的 HTTPS 都在这里

    HTTP 协议仅仅制定了互联网传输的标准,简化了直接使用 TCP 协议进行通信的难度.有关 HTTP 协议相关的讲解请看前面两节: HTTP 协议详解 HTTP协议详解(二) less is more ...

  7. windows挂载nas存储

    操作系统:windows server 2016 1.安装nfs客户端打开程序面板 2.点击下一步 3.点击下一步 4.下一步 5.这里只选择文件和存储服务器就可以 6.选择nfs客户端,安装 7.m ...

  8. Java 从入门到进阶之路（二十八）

    在之前的文章我们都是通过 Java 在内存中应用,本章开始我们来看一下 Java 在系统文件(硬盘)上的操作. 系统文件就是我们电脑中的文件,简单来说就是像 Windows 系统中 C D E 等各类 ...

  9. Python必须知道的异常处理

    异常处理 把可能会发生的错误,提前在代码里进行捕捉(监测) try : code except Exception: 出错后要执行的代码 下面是常见的异常: attributeError 试图访问一个 ...

  10. Netty系列之源码解析（一）

    本文首发于微信公众号[猿灯塔],转载引用请说明出处 接下来的时间灯塔君持续更新Netty系列一共九篇 当前:Netty 源码解析(一)开始 Netty 源码解析(二): Netty 的 Channel ...