最近有个项目要用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. SpringBoot从入门到放弃之配置Spring-Data-JPA自动建表

    pom文件配置引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  2. 团队进行Alpha冲刺--冲刺总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--冲刺总结 作业正文 如下 其他参 ...

  3. 安卓开发,Service 服务

    Service 服务 是一种应用组件,可长时间后台运行,不提供用户界面.如音乐播放器/下载程序.不能自己运行. 使用Service的方式: (一)startService(): 调用者和服务之间没有联 ...

  4. C语言副本机制

    1.除了数组外,其他都有副本机制(包括结构体数组) 2.结构体作为参数具有副本机制,结构体返回值也有副本机制 . 3.函数的参数和返回值都有他的副本机制. #include<stdio.h> ...

  5. Vuex怎么用（1）

    1. vuex是什么 github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对应用中组件的状态 ...

  6. SSM框架出现500的错误解决办法

    1,先确认pom.xml中有没有导入项目依赖, 2,发现导入之后还是报500.点击File->Project  Structure->Artifacts 点击SSM右键,选择put int ...

  7. DOM-BOM-EVENT（1）

    1.DOM简介 DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从 ...

  8. python之浅谈数据类型

    什么是数据类型 ​ 数据类型指的就是变量值的不同类型,姓名可能是一种数据类型.年龄可能是一种数据类型.爱好可能又是另一种数据类型,至于是什么数据类型我们将在下一章详细说明. 如何对数据分类 变量的是用 ...

  9. proxool配置连接池

    http://log-cd.iteye.com/blog/199482 1.Hiebernate配置文件中引用proxool配置文件: <hibernate-configuration> ...

  10. vim常用指令参考

    (完)