最近有个项目要用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>

以上。

最新文章

  1. 背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu
  2. Thinkphp源码分析系列（七）–控制器基类
  3. 阅读Nosql代码有感
  4. js 求前n项的 fibnaci 数列和
  5. opencv保存选择图像中的区域(二)
  6. Kia&amp;#39;s Calculation（贪心）
  7. 美国企业人事喜欢考的3道.Net经典笔试题
  8. ToDictionary用法
  9. cmd alias 自定义命令
  10. Leetcode_203_Remove Linked List Elements
  11. AndroisStudio列选择模式
  12. python - 用类写装饰器
  13. docekr－image的区别和container;docker run和start,create
  14. daemon not running的解决办法
  15. rtsp/rtmp/hls/onvif测试源以及ffmpeg在流媒体方面的应用
  16. 编写高质量代码改善C#程序的157个建议——建议74：警惕线程的IsBackground
  17. java学习笔记-9.违例差错控制
  18. linux用户登录指定目录
  19. checkbox和后面文字无法居中对齐的解决方案
  20. Robot Framework与Web界面自动化测试：简单例子

热门文章

  1. Mysql和Redis数据同步策略
  2. spring boot actuator扩展httptrace的记录
  3. Java解析apk、ipa图标，包名，应用名称，版本号
  4. Python 简明教程 --- 13，Python 集合
  5. python变量拷贝
  6. vue全家桶（1）
  7. P5774 [JSOI2016]病毒感染
  8. SpringBoot中Service实现类添加@Service却任然无法注入的问题
  9. Orleans 框架3.0 官方文档中文版系列一 —— 概述
  10. Apache Hudi重磅特性解读之全局索引