Ztree 节点的增删改

短命女 2022-07-12 04:19 301阅读 0赞

<script src="/Scripts/zTree_v3/js/jquery.ztree.all-3.5.js" type="text/javascript" ></script>
    <script src="/Scripts/zTree_v3/js/jquery.ztree.exhide-3.5.js" type="text/javascript" ></script>
    <link href="/Scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
        
        .ztree li span.button.add {
            margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle
        }
    </style>
    
    <table style="width: 100%; overflow: hidden;">
        <tr>
            <td style="width: 280px">
                
                <div class="DivTree">
                   <div style="display: none;">
                        <asp:TextBox ID="IDS3" runat="server"></asp:TextBox>
                    </div>
                    <div id="menuContent3" class="menuContent divcss5" style=" position: absolute;height: 300px;">
                        <ul id="treeDemo3" class="ztree" style="margin-top: 0; "></ul>
                    </div>
                </div>
                <div class="zTreeDemoBackground left">
    		        <ul id="treeDemo" class="ztree"></ul>
    	        </div>
            </td>
        </tr>
    	<div style="display: none">
            <input type="text" id="treeid"/>
            <input type="text" id="treename"/>
        </div>
    </table>
        
    <script type="text/javascript">
        //左侧树
        $(function () {
            getJsonData3();
            $.fn.zTree.init($("#treeDemo3"), setting3, zNodes3);
        });
    
        function addHoverDom(treeId, treeNode) {
            if (treeNode.id == "-1") {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>";
                sObj.after(addStr);
                var btn = $("#addBtn_" + treeNode.tId);
                if (btn) btn.bind("click", function () {
                    addNode(treeId, treeNode);
                });
            }
        }
    
        function addSaveNode(name) {
            callAjax({
                async: false,
                url: "/Ajax/DataDictionaryManageHandler.ashx",
                data: {
                    acflag: "addnode",
                    value: name
                },
                success: function () {
                    
                }
            });
        }
    
        function addNode(treeId, parentNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo3"),
                lastIndex = zNodes3.length - 1;
            var treeNode = zNodes3[lastIndex];
            var newNode = zTree.addNodes(parentNode, { id: -9999, name: "new node", open: true, pId: treeNode.id }, true);
            zTree.editName(newNode[0]);
        }
    
        function modifyNode(id, name) {
            callAjax({
                async: false,
                url: "/Ajax/DataDictionaryManageHandler.ashx",
                data: {
                    acflag: "modifynode",
                    id: id,
                    name:name
                },
                success: function () {
                    
                }
            });
        }
    
        function beforeRename(treeId, treeNode) {
            $("#treeid").val(treeNode.id);
            var tId = treeNode.tId;
            var name = $("#" + tId + "_input").val();
            $("#treename").val(name);
            if (treeNode.id == -9999) {
                //新建
                //这里可以添加验证操作 预留
    			 addSaveNode($("#treename").val());
            } else {
                //修改
    			//这里可以添加验证操作 预留
    			modifyNode($("#treeid").val(), $("#treename").val());
            }  
    
    		getJsonData3();
            $.fn.zTree.init($("#treeDemo3"), setting3, zNodes3);
        }
    
        function beforeRemove(treeId, treeNode) {
            
            $("#treeid").val(treeNode.id);
            
    		//这里可以添加验证操作 预留
    		deleteNode($("#treeid").val());
    		
    		
        }
    
        function deleteNode(treeid) {
            callAjax({
                async: false,
                url: "/Ajax/DataDictionaryManageHandler.ashx",
                data: {
                    acflag: "deletenode",
                    id: treeid
                },
                success: function (data) {
                    var result = data.Obj;
                    if (result == "0") {
                        alert("删除失败，此类型正在被使用。");
                    } 
                    getJsonData3();
                    $.fn.zTree.init($("#treeDemo3"), setting3, zNodes3);
                }
            });
        }
    
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        }
    
        function onClick(event, treeId, treeNode, clickFlag) {
            //点击节点操作，预留
        }
    
        function getJsonData3() {
            callAjax({
                async: false,
                url: "/Ajax/DataDictionaryManageHandler.ashx",
                data: {
                    acflag: "gettype"
                },
                success: function (dataArray) {
                    zNodes3 = dataArray.Obj;
                }
            });
        }
    
        var setting3 = {
            view: {
                addHoverDom: addHoverDom,  //新建按钮
                removeHoverDom: removeHoverDom, //移除新建按钮
                selectedMulti: false
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: false,  //是否显示删除按钮
                showRenameBtn: true  //是否显示编辑按钮
            },
            data: {
                keep: {
                    parent: true,
                    leaf: true
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick,
                //onRename: onRename,
                //onRemove: onRemove,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename
            }
        };
    
        var zNodes3 = [];
        
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20220711/99990f7b15f44752939bb172aec6593b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

相关 iView树形组件：增删改节点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

曾经终败给现在/ 2022年12月29日 06:59/ 0 赞/ 479 阅读

相关 ztree增删改和拖动

页面：<ul style="width: 500px;" id="treeDemo" class="ztree"></ul> js：function loadClassLis

╰+哭是因爲堅強的太久メ/ 2022年08月07日 09:52/ 0 赞/ 171 阅读

相关 Ztree 节点的增删改

<script src="/Scripts/zTree_v3/js/jquery.ztree.all-3.5.js" type="text/javascript" ><

短命女/ 2022年07月12日 04:19/ 0 赞/ 302 阅读

相关 ZTree节点单击展开

ZTree 没有提供单击展开节点的功能，所以我们可以利用 onClick 事件回调方法法实现此功能。但是ZTree默认是双击节点展开，为了避免与之冲突，先要把双

红太狼/ 2022年06月16日 04:10/ 0 赞/ 234 阅读

相关 Ztree树节点应用

`树节点增删改查:` 前台jsp页面： <% String root=request.getContextPath();//获取项目目录

青旅半醒/ 2022年06月04日 08:47/ 0 赞/ 259 阅读

相关 ztree显示、折叠所有节点

<html> <head> <title>zTree显示折叠节点</title> <link rel="stylesheet" h

旧城等待，/ 2022年05月25日 05:12/ 0 赞/ 478 阅读

相关【zTree】基于zTree动态生成树节点的一些应用

最近项目中需要用到zTree动态构建树节点，实现树节点的增删改查，以及点击树节点展示树节点对应的页面。趁着这个机会把zTree的用法大概看了一遍，代码示例见我的Github：[

曾经终败给现在/ 2022年05月15日 12:54/ 0 赞/ 326 阅读

相关 JavaScript-元素节点的增删改查

增加一个元素使用createElement()方法 <p id="demo">单击按钮创建button元素</p> <button onclick="my

清疚/ 2022年04月17日 01:10/ 0 赞/ 288 阅读

相关 ztree——如何获取当前节点的根节点

<table> <tbody> <tr> <td align="left"><font> 前言</font></td> </tr> </tbody

悠悠/ 2022年03月09日 17:14/ 0 赞/ 387 阅读

相关 Curator API 节点的增删改查

文章目录一、Curator API 增删改查 1.1、maven 依赖 1.2、重试策略 1.2.1、Expone

迷南。/ 2022年02月02日 12:57/ 0 赞/ 351 阅读