版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuanlijiefengjuan/article/details/79174598
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-color: #DFDFDF; } </style>js部分
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("服务器连接失败!"); } }); }