Ztree 节点的增删改

<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>

posted @ 2017-02-10 11:56  预立科技  阅读(13)  评论(0编辑  收藏  举报