最近有个项目要用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. Win10下创建virtualenv Linux下创建

    虚拟环境 为什么要搭建虚拟环境 开发多个不同的项目 可能需要用到同一个包不同版本新版本会覆盖旧的 作用 虚拟环境 可以搭建独立的Python运行环境 使项目之间版本不受影响 Linux下如何搭建虚拟环 ...

  2. Shell脚本 概括

    Shell脚本的管理 shell 脚本是linux命令的集合 介于操作系统内核与用户之间,赋值解释命令行 Shell的作用及常见种类 登录Shell 指用户每次登录系统后自动加载的Shell程序,大多 ...

  3. yum 安装包的时候提示“没有可用软件包”

    今天在使用 yum 命令进行包的下载时候,Linux 提示 没有可用的软件包~ 如下: [root@localhost share]# yum -y install wordpress 已加载插件:f ...

  4. MySQL服务器是怎么处理客户端请求的

    不论MySQL客户端进程和服务器进程是采用哪种方式进行通信,最后实现的效果都是:客户端进程向服务器进程发送一段文本(MySQL语句),服务器进程处理后再向客户端进程发送一段文本(处理结果).那服务器进 ...

  5. elasticsearch中query和filter的区别

    参考博客来自: https://mp.weixin.qq.com/s/tiiveCW3W-oDIgxvlwsmXA?utm_medium=hao.caibaojian.com&utm_sour ...

  6. 基数排序（Java）

    基数排序(Java) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 基数排序(桶排序)介绍 基数排序(radix sort)属 ...

  7. 入门大数据---Flume 简介及基本使用

    一.Flume简介 Apache Flume 是一个分布式,高可用的数据收集系统.它可以从不同的数据源收集数据,经过聚合后发送到存储系统中,通常用于日志数据的收集.Flume 分为 NG 和 OG ( ...

  8. 使用 Nginx 部署静态页面

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为「engine X」,是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP ...

  9. codeforce 796C - Bank Hacking(无根树+思维)

    题目 Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. To searc ...

  10. Canvas干货总结

    一.canvas简介 ​<canvas> 是 html5 新增的,一个可以使用脚本(通常为 javascript) 在其中绘制图像的 html 元素.它可以用来制作照片集或者制作简单的动画 ...