ztree 使用demo

最新推荐文章于 2023-12-12 11:21:28 发布

高成浩

最新推荐文章于 2023-12-12 11:21:28 发布

阅读量6.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gaochh01/article/details/9030507

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ZTREE DEMO</TITLE>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/zTreeStyle_0/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.exedit-3.5.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>


<SCRIPT type="text/javascript">
   var contextPath = "../../console/";

   var onAdd = function(parentNode,nodeName){

       var nId = parentNode && parentNode.id;
       if (nId) {
           $.ajax({
                   url:contextPath + "addPageNode.json",
                   data:{
                       id       : nId,
                       nodeName : nodeName
                   },
                   type:"POST",
                   dataType:"json",
                   success:function(){
                       zTreeObj.reAsyncChildNodes(parentNode, "refresh");
                   }
           });
       }
   };

   var onRename = function(event, treeId, treeNode) {
       var nId = treeNode && treeNode.id, name = treeNode && treeNode.name;
       if (nId && name) {
           $.ajax({
               url:contextPath + "modifyNode.json",
               type:"POST",
               data:{id : nId,nodeName : name},
               dataType:"json"
           });
       }
   };

   var beforeRemove = function(treeId, treeNode) {
       return confirm("确认删除节点 -- " + treeNode.name + " 吗？");
   };

   var newCount = 1;
   var addHoverDom = function (treeId, treeNode) {
       var sObj = $("#" + treeNode.tId + "_span");
       if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
       var addStr = "<span class='button add' id='addBtn_" + treeNode.id
           + "' title='add node' οnfοcus='this.blur();'></span>";
       sObj.after(addStr);
       var btn = $("#addBtn_"+treeNode.id);
       if (btn) btn.bind("click", function(){
           //portlet cant add sub node
           if(treeNode.isPortlet){
               return;
           }
           var newName = "新节点"+(newCount++);
           zTreeObj.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:newName});
           onAdd(treeNode,newName);
           return false;
       });
   };

   var removeHoverDom = function (treeId, treeNode) {
       $("#addBtn_"+treeNode.id).unbind().remove();
   };

   var zTreeObj, setting = {
       view : {
           selectedMulti : false,
           addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom
       },
       async : {
           enable : true,
           url : contextPath + "initTree.json",
           dataType : "json",
           autoParam : [ "id" ],
           type:"POST",
           otherParam:{"includeRoot":true}
       },
       callback : {
           onExpand : function(event, treeId, treeNode) {
               zTreeObj.reAsyncChildNodes(treeNode, "refresh");
           },
           onCollapse:function(event, treeId, treeNode){
               zTreeObj.selectNode(treeNode);
           },
           beforeRemove : beforeRemove,
           onRemove : function(event, treeId, treeNode) {
               var nId = treeNode && treeNode.id;
               if (nId) {
                   $.ajax({
                       url:contextPath + "removeNode.json",
                       data: {id : nId},
                       dataType:"json",
                       type:"POST",
                       success:function(data){
                           zTreeObj.selectNode(zTreeObj.getNodeByTId("tree_1"),false);
                           FrameUtil.frame("mainFrame").location = contextPath + 'refreshMainPage.html';
                       }});
               }
           },
           onRename : onRename,
           onAsyncSuccess: function(event, treeId, treeNode, msg){
               if(treeNode == undefined){
                   zTreeObj.selectNode(zTreeObj.getNodeByTId("tree_1"),false);
               }else{
                   zTreeObj.selectNode(treeNode);
               }
               //only first time load tree includeRoot = true ,after set false
               zTreeObj.setting.async.otherParam["includeRoot"] = false;

           },
           onClick: function(event, treeId, treeNode) {
               if(treeNode.isPortlet){
                   FrameUtil.frame("mainFrame").location = contextPath + 'editPortletPromote.html?selectNodeId='+treeNode.id;
               }else{
                   FrameUtil.frame("mainFrame").location = contextPath + 'refreshMainPage.html';
               }
           }
        },
       edit : {
           drag : {},
           enable : true,
           showRemoveBtn : true,
           showRenameBtn : true,
           removeTitle : "remove",
           renameTitle : "rename"
       }
   };

   $(document).ready(function() {
       zTreeObj = $.fn.zTree.init($("#tree"), setting, []);
   });
</SCRIPT>
</HEAD>

<BODY>
<ul id="tree" class="ztree" style="width: 230px;"></ul>
</BODY>
</HTML>

高成浩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ztree 使用demo

pageEncoding="utf-8"%> ZTREE DEMO --> var contextPath = "../../console/"; var onAdd = function(parentNode,nodeName){ var nId =
复制链接

扫一扫

专栏目录