ZTree樹和layui框架整合的demo 獲取動態資料實現增刪改查（只展現前臺部分，後臺邏輯自己寫）

Java-dezhe發表於2019-04-08
UI框架

一、我今天做了一個Ztree樹增刪改查選單的功能，在這裡記錄一下，下次使用時拿過來直接用。

二、首先ztree有特別好的中文 API，目前現在更新到3.5.40版本，大家可以直接去官網下載它的類庫（js,css,demo,api）,這裡我就不提供了。

ztree官網：http://www.treejs.cn/v3/api.php

三、開始操作

1.首先要先引入相關的jquery,ztree中的css,js。（要是用到其他的js，比如這裡我用到了layui直接引入即可。）

這幾個必須引（當然layui除外。）  還有其他的用到的話 自行引入處理。
<link rel="stylesheet" th:href="@{/ztree_v3/css/demo.css}">
<link rel="stylesheet" th:href="@{/ztree_v3/css/zTreeStyle/zTreeStyle.css}">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/layui/css/style.css}">

<script th:src="@{/ztree_v3/js/jquery-1.4.4.min.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.exedit.js}"></script>
<script th:src="@{/layui/layui.js}"></script>

2.展示樹樣式

CSS程式碼塊

<style type="text/css">
    	ul.ztree{
    		width : 320px;
    		height: 420px;
    	}
 </style>

HTML 程式碼塊

<div class="layui-row">
		<div id="layer-zTree" >
			    <div style="padding: 10px; height:90%;">
			        <ul id="treeDemo" class="ztree"></ul>
			    </div>
		</div> 
</div>

JS程式碼塊

<script type="text/javascript">
	
	$(function(){
		onLoadZTree();
	});

	/* 樹狀圖 */
	var setting = {
			
			//檢視顯示樣式
			view : {
				  dblClickExpand: false, //雙擊節點時，是否自動展開父節點的標識 預設true
			      showLine: false,   //設定 zTree 是否顯示節點之間的連線。預設true
			      selectedMulti: false, //設定是否允許同時選中多個節點。預設true
			      addHoverDom: addHoverDom, //顯示按鈕
			      removeHoverDom: removeHoverDom //隱藏按鈕
			},
	
	  		//編輯
			edit: {
			      enable: true,   //設定 zTree 是否處於編輯狀態 預設false
			      editNameSelectAll: true,  //點選編輯的時候，裡面的文字全部選中
			      removeTitle: '刪除節點', //刪除按鈕的名稱
			      renameTitle: '重新命名' //編輯名稱按鈕
		    },
		    
		    //採用的資料格式
		    data: {
		        simpleData: {
		          enable: true,  //是否採用簡單資料模式 (Array)
		          idKey: "id",   //指定子節點的元素名稱
		          pIdKey: "pid",  //指定父節點的元素名稱
		          rootPId: 0  //用於修正根節點父節點資料
		        }
		    },
		    
		    //回撥函式
		    callback: {
		        beforeRemove: beforeRemove, //點選刪除時觸發，用來提示使用者是否確定刪除
		        beforeEditName: beforeEditName, //點選編輯時觸發，用來判斷該節點是否能編輯,是否進入編輯狀態
		        beforeRename: beforeRename, //編輯結束時觸發，用來驗證輸入的資料是否符合要求
		        onRemove : onRemove,   //刪除節點後觸發，使用者後臺操作
		        onRename : onRename,   //編輯後觸發，用於操作後臺
		    }
	};
	
	/* 載入資料 */
	function onLoadZTree(){
		$.ajax({
			async: false,  //是否非同步
			cache: false,  //是否使用快取
			type: 'POST',  //請求方式
			url: '寫自己的', //請求地址
			success: function(data) {
				//console.log(data)
				treeNodes = data.data; //把後臺封裝好的簡單的JSON格式賦給treeNodes
			}
		});
		var t = $("#treeDemo");
		t = $.fn.zTree.init(t, setting, treeNodes);  //zTree 初始化方法
		t.expandAll(false);  //展開 / 摺疊 全部節點
	}
	
	/* 新增  */
	function addHoverDom(treeId, treeNode) {
		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='新增' 'this.blur();'></span>";
	    sObj.after(addStr);
	    var btn = $("#addBtn_" + treeNode.tId);
	    
	    layui.use(['layer', 'form'], function(){
	    	  var layer = layui.layer
	    	  ,form = layui.form;
	    	 
				    if(btn) btn.bind("click", function() {
				        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				        layer.prompt({
				            formType: 0,
				            value: '',
				            title: '請輸入節點名稱'
				          }, function (value, index){
				        	  if(value.trim().length === 0) {//非空驗證
				                  return false;
				              }
				              if($('#guonp').val()===""){
			                       layer.tips("請正確填寫分組資訊",$('#guonp'));
			                       return;
			                  }	
				        	  if($('#full_name').val()===""){
			                       layer.tips("請填寫部門全稱",$('#full_name'));
			                       return;
			                  }		
				        	  layer.close(index)
				              var pid = treeNode.id;
				              var name = value;
				              var grup = $('#guopp input[name="zuzu"]:checked').val()
				              var deptFullName = $('#full_name').val();
				              $.ajax({
				            	  type: "POST",
				                  async: false,
				                  url: "寫自己的",
				                  data: {
				                    "pid": pid,
				                    "name": name,
				                    "grup": grup,
				                    "deptFullName": deptFullName
				                  },
				                  success: function(data) {
				                    if(data.code == 10000) {
				                      zTree.addNodes(treeNode, {
				                        pId: treeNode.id,
				                        name: value
				                      });
				                      onLoadZTree() //重新載入，不然再次新增會報錯
				                      layer.msg('新增成功', {
				                        icon: 1,
				                        time: 1000
				                      });
				                    } else {
				                      onLoadZTree()
				                      layer.msg('' + data.msg + '', {
				                        icon: 5,
				                        time: 1000
				                      });
				                    }
				                  }
				              });
				              
				         });
				        $(".layui-layer-content").append("<br/><div  id=\"guopp\">集團：<input type=\"radio\" name=\"zuzu\"  value=\"0\" title=\"集團\" />&nbsp;&nbsp;&nbsp;&nbsp;股份：<input type=\"radio\" name=\"zuzu\" value=\"1\" title=\"股份\" checked /></div>")
				        $(".layui-layer-content").append("<br/><input type=\"text\" id= \"full_name\" class=\"layui-input\" placeholder=\"輸入部門全稱\" />")

				    });
	    }); /* layui */
	}
	
	//移除滑鼠隱藏按鈕
	function removeHoverDom(treeId, treeNode) {
	    $("#addBtn_" + treeNode.tId).unbind().remove();
	}
	
	/*
     * 編輯
	*/
	function beforeEditName(treeId, treeNode) {
	    return true;
	}
	
	/**
	 * 重新命名
	*/
	function beforeRename(treeId, treeNode, newName, isCancel) {
		if(newName.length < 3){
			alert("名稱不能少於3個字元！");
			return false;
		}
		return true;
	}
	
	/* 編輯後觸發，後臺操作 */
	function onRename(event, treeId, treeNode, isCancel){
		var typeId = treeNode.id;
		var typeName = treeNode.name;
		if(confirm("您確認修改類別名稱?")){
		        $.post("寫自己的",
		                {
		            		"id": typeId,
		           			"name": typeName
		                },
		                function(response){
		                    if(response != null){
		                        if(response.code == 10000){
		                            console.log(response);
		                        } else if(response.code == 10001){
		                        	alert("修改名稱失敗!");
		                        }
		                    }
		                },
		        'json');
		}
	}

	/* 
	 * 刪除
	*/
	function beforeRemove(treeId, treeNode) {
		if(confirm("確認要刪除？")){
			if(treeNode.isParent){
				alert("該目錄下面還有子目錄，請從最底層目錄開始刪除！")
				return false;
			}
			return true;
		}
		return false;
	}
	
	/* 刪除後觸發，後臺操作  */
	function onRemove(event, treeId, treeNode) {
		var typeId = treeNode.id;
		$.post("寫自己的",{"id":typeId},function (reposonse){
			console.log(reposonse);
			if(reposonse.code == 10000){
				onLoadZTree();	//重新載入
			} else{
				alert("刪除失敗");
			}
		})
	}
	
</script>

============結束=

相關文章