最近有个项目要用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. Java学习笔记5（API）

    Java API API(Application Programming Interface)指的是应用程序编程接口. String类 String初始化有两种,一个是使用字符串常量初始化一个Stri ...

  2. Charles 功能详解

    Charles的功能有? 1 抓取http和https 网络封包(抓包) 2 Charles 的断点请求 通过断点修改参数 在指定接口打上断点 右键点击接口选择 breakpoints 然后 导航栏 ...

  3. <用户输入url按下回车，一直到用户看到界面，这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...

  4. 蝙蝠算法（BA）学习笔记

    算法原理 蝙蝠能够在夜间或十分昏暗的环境中自由飞翔和准确无误地捕捉食物,是因为他们能够从喉头发出地超声脉冲回声来定位.受这一启发,Yang教授在2010年提出了蝙蝠算法(Bat Algorithm,B ...

  5. 【转】HBase的MapReduce调用

    参考: https://blog.csdn.net/u012848709/article/details/83744699 自己照着搭建了下,顺便把坑也踩了下,项目见云盘: 链接:https://pa ...

  6. eclipse导入git项目

    复制项目的git路径 Eclipse打开 Git Repostitories 视图 弹出show view窗口 选择ok ,进入git repositories 视图窗口 我这里已经导入从我的git仓 ...

  7. ftp的passive模式

    ftp的passive模式 今天在一台测试服务器上搭建ftp,折腾了许久. 主要是不了解ftp的passive模式和port模式的区别.这里记录一下. 和passive模式对应的叫做port模式,也叫 ...

  8. javaScript的三种储存方式

    (一).SessionStorage     会话储存 (二).localStorage           本地储存 (三).Cookier                   现实中为:饼干    ...

  9. VSCode 使用 Settings Sync 同步配置和插件

    简要说明: Settings Sync插件可以在不同的计算机同步VSCode配置和插件. 安装和配置 在VSCode的插件栏搜索settings sync并安装.在安装完成之后如果需要重新载入就点击重 ...

  10. python冷知识

    目录 省略号也是对象 奇怪的字符串 and 和 or 的取值顺序 访问类中的私有方法 时有时无的切片异常 两次 return for 死循环 intern机制 省略号也是对象 在python中一切皆对 ...