ztree的非同步載入和右鍵增刪改
阿新 • • 發佈:2018-11-13
ztree的非同步載入和右鍵增刪改, html如下
<ul class="ztree" id="ModelcarEditTree"></ul>
<div id="rMenu"> <ul> <li id="m_add" onclick="addTreeNode();">增加節點</li> <li id="m_del" onclick="removeTreeNode();">刪除節點</li> <!--<li id="m_change" onclick="renameTreeNode();">更改節點</li>-->右擊選單的樣式<!--<li id="m_check" onclick="checkTreeNode(true);">Check節點</li>--> <!--<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck節點</li>--> <!--<li id="m_reset" onclick="resetTree();">恢復zTree</li>--> </ul> </div>
<style type="text/css"> div#rMenu {position:fixed; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;} div#rMenu ul li{ margin: 1px 0; padding: 0 5px; cursor: pointer; list-style: none outside none; background-colorjs部分: #DFDFDF; } </style>
var zNodesEdit var bomIdEdit; function gotoModelcarEdit(bomId) { bomIdEdit = bomId; gotoUrl(111); modelCarEdit(); //初始化樹,官方提供的非同步載入方法 function modelCarEdit(){ var allData = { bomId: bomId, parentId: 0 //父節點的Id }; $.ajax({ type: 'post', url: serverUrl+"", contentType:'application/json;charset=utf-8', data:JSON.stringify(allData), async: false, success: function (data) { zNodesEdit = data.data; }, error: function () { layer.alert("伺服器連線失敗!"); } }); } } var settingEdit = { isSimpleData : true,//資料是否採用簡單 Array 格式,預設false async : { enable : true,//設定 zTree 是否開啟非同步載入模式 type:"post",//提交方式 url : serverUrl+"",//Ajax 獲取資料的 URL 地址 contentType:'application/json;charset=utf-8', autoParam : ["bomId","fakeId=parentId"],//非同步載入時需要自動提交父節點屬性的引數 dataFilter: modelCarEditFilter //返回資料的預處理過濾函式 }, view: { dblClickExpand: false, showIcon: false, addHoverDom: false, removeHoverDom: false, selectedMulti: false }, data: { simpleData: { enable: true,//是否採用簡單資料模式 idKey : "id",//樹節點ID名稱 pIdKey : "pId",//父節點ID名稱 rootPId: 0 }, key: { name: "bomNodeName" } }, callback: { onRightClick: OnRightClick, onClick: zTreeOnClickEdit, onAsyncSuccess: zTreeEditOnAsyncSuccess,//非同步載入成功的function onAsyncError: zTreeEditOnAsyncError //載入錯誤的function } }; //右擊事件 function OnRightClick(event, treeId, treeNode) { if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { zTree.cancelSelectedNode(); showRMenu("root", event.clientX, event.clientY); } else if (treeNode && !treeNode.noR) { zTree.selectNode(treeNode); showRMenu("node", event.clientX, event.clientY); } } //顯示右擊選單 function showRMenu(type, x, y) { $("#rMenu ul").show(); if (type=="root") { $("#m_del").hide(); $("#m_check").hide(); $("#m_unCheck").hide(); } else { $("#m_del").show(); $("#m_check").show(); $("#m_unCheck").show(); } y += document.body.scrollTop; x += document.body.scrollLeft; rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"}); $("body").bind("mousedown", onBodyMouseDown); } //隱藏右擊選單 function hideRMenu() { if (rMenu) rMenu.css({"visibility": "hidden"}); $("body").unbind("mousedown", onBodyMouseDown); } //滑鼠按下 function onBodyMouseDown(event){ if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) { rMenu.css({"visibility" : "hidden"}); } } //新增節點 function addTreeNode() { hideRMenu(); var newNode = { bomNodeName:"增加"}; if (zTree.getSelectedNodes()[0]) { var allData = { bomId: bomIdEdit, bomNodeName: newNode.bomNodeName, pId: zTree.getSelectedNodes()[0].fakeId } $.ajax({ type: 'post', url: serverUrl+"", contentType:'application/json;charset=utf-8', data:JSON.stringify(allData), dataType: 'json', success: function (data) { if (data.ok == false) { alert(data.message); }else { var nodes = zTree.getSelectedNodes(); /*根據 zTree 的唯一標識 tId 快速獲取節點 JSON 資料物件*/ var parentNode = zTree.getNodeByTId(nodes[0].parentTId); if(null == parentNode){ gotoModelcarEdit(bomIdEdit); /*強行非同步載入父節點的子節點。[setting.async.enable = true 時有效]*/ zTree.reAsyncChildNodes(nodes[0], "refresh", false); }else{ /*選中指定節點*/ zTree.selectNode(parentNode); zTree.reAsyncChildNodes(parentNode, "refresh", false); } } }, error: function () { layer.alert("伺服器連線失敗!"); } }); } else { var allData = { bomId: bomIdEdit, bomNodeName: newNode.bomNodeName, pId:"" }; $.ajax({ type: 'post', url: serverUrl+"", contentType:'application/json;charset=utf-8', data:JSON.stringify(allData), dataType: 'json', success: function (data) { if (data.ok == false) { alert(data.message); }else { //var zTree = $.fn.zTree.getZTreeObj("ModelcarEditTree"); //zTree.reAsyncChildNodes(null, "refresh", false); //父節點的Id gotoModelcarEdit(bomIdEdit); } }, error: function () { layer.alert("伺服器連線失敗!"); } }); } } //刪除節點 function removeTreeNode() { hideRMenu(); var nodes = zTree.getSelectedNodes(); if (nodes && nodes.length>0) { if (true == nodes[0].isParent) { layer.alert("該節點下有子節點,不允許刪除!"); }else{ layer.confirm('您確定要刪除該節點麼?', { btn: ['確認','取消'] //按鈕 }, function(){ $.ajax({ type: 'delete', url: serverUrl+""+nodes[0].id, dataType: 'json', success: function (data) { if (data.ok == false) { alert(data.message); }else { layer.alert("刪除成功"); zTree.removeNode(nodes[0]); } }, error: function () { layer.alert("伺服器連線失敗!"); } }); }, function(){}); } } } var zTree, rMenu; $.fn.zTree.init($("#ModelcarEditTree"), settingEdit, zNodesEdit); zTree = $.fn.zTree.getZTreeObj("ModelcarEditTree"); rMenu = $("#rMenu"); //樹的節點點選事件 function zTreeOnClickEdit(event, treeId, treeNode) { $.ajax({ type: 'get', //url: serverUrl+""+treeNode.id, url: serverUrl+"", data:{ id:treeNode.id }, dataType: 'json', success: function (data) { if (data.ok == false) { alert(data.message); }else { //移除不可編輯狀態 $("#modelCarEditParentName").removeAttr("readonly"); //情況之前的內容 $("#modelCarEditBCode").val(""); $("#modelCarEditNodeName").val(""); $("#modelCarEditParentName").val(""); $("#modelCarEditId").val(""); //填寫新內容 $("#modelCarEditBCode").val(data.data.nodeInfo.bussCode); $("#modelCarEditNodeName").val(data.data.nodeInfo.bomNodeName); $("#modelCarEditParentName").val(data.data.parentNodeInfo.bomNodeName); $("#modelCarEditId").val(data.data.nodeInfo.id); //設定不可編輯狀態 $("#modelCarEditParentName").attr('readonly','readonly'); } }, error: function () { layer.alert("伺服器連線失敗!"); } }); } function zTreeEditOnAsyncSuccess(event, treeId, treeNode){ //alert("獲取資料成功"); } function zTreeEditOnAsyncError(event, treeId, treeNode){ // alert("獲取資料失敗"); } //非同步載入返回的資料處理 function modelCarEditFilter(treeId, parentNode, responseData) { responseData = responseData.data; return responseData; } /** * 編輯的修改功能 */ function modelCarEditConfirm() { var id = $("#modelCarEditId").val().trim(); var codeCode = $("#modelCarEditBCode").val().trim(); var bomNodeName = $("#modelCarEditNodeName").val().trim(); var editData = { bomId:bomIdEdit, id:id, bussCode:codeCode, bomNodeName:bomNodeName }; $.ajax({ type: 'put', url: serverUrl+"", contentType:'application/json;charset=utf-8', data:JSON.stringify(editData), dataType: 'json', success: function (data) { if (data.ok == false) { alert(data.message); }else { //移除不可編輯狀態 $("#modelCarEditParentName").removeAttr("readonly"); //情況之前的內容 $("#modelCarEditBCode").val(""); $("#modelCarEditNodeName").val(""); $("#modelCarEditParentName").val(""); $("#modelCarEditId").val(""); //設定不可編輯狀態 $("#modelCarEditParentName").attr('readonly','readonly'); var nodes = zTree.getSelectedNodes(); /*根據 zTree 的唯一標識 tId 快速獲取節點 JSON 資料物件*/ var parentNode = zTree.getNodeByTId(nodes[0].parentTId); if(null == parentNode){ gotoModelcarEdit(bomIdEdit); /*強行非同步載入父節點的子節點。[setting.async.enable = true 時有效]*/ zTree.reAsyncChildNodes(nodes[0], "refresh", false); }else{ /*選中指定節點*/ zTree.selectNode(parentNode); zTree.reAsyncChildNodes(parentNode, "refresh", false); } layer.alert("修改節點資訊成功"); //gotoModelcarEdit(data.data[0].bomId); } }, error: function () { layer.alert("伺服器連線失敗!"); } }); }