码迷,mamicode.com
首页 > 其他好文 > 详细

ztree : 增删改功能demo与自定义DOM功能demo的结合

时间:2019-02-13 12:47:20      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:log   http   name   需求   data   pid   rename   sheet   项目   

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

标签:log   http   name   需求   data   pid   rename   sheet   项目   

原文地址:https://www.cnblogs.com/foxcharon/p/10369078.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!