zTree結合jquery.contextMenu.js實現右鍵選單
阿新 • • 發佈:2019-02-18
var zTree;
var demoIframe;
var selectNode;
var flag=true;
var setting = {
view: {
dblClickExpand: false,
showLine: true,//節點之間的連線
selectedMulti: false,//是否可以多選
expandSpeed: "slow",//節點展開動畫速度
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
},
edit: {
enable: true ,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
removeTitle: "刪除崗位",
showRenameBtn: showRenameBtn,
renameTitle: "編輯崗位"
},
async:{
autoParam:["sRoleid"],//點選節點進行非同步載入時預設傳送引數
dataType:"json",
enable:true ,
type:"post",
url:"<%=request.getContextPath()%>/login/post/getzTreeOrgPostData.do"
},
data: {
key:{
name:"sRolename"//節點顯示的欄位
},
simpleData : {
enable : true,
idKey : "sRoleid" , // id
pIdKey : "sParentroleid", // 父id
rootPId : 0//根節點
},
keep:{
parent: true //始終保持為可展開狀態
}
},
callback: {
onClick:function(event, treeId, treeNode, msg){
selectNode=treeNode;
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandNode(treeNode, true, false, true);
if("root" != treeNode.sRoleid){
demoIframe.attr('src','<%=request.getContextPath()%>/login/post/showOrgPostUserRelationListPageYes.do?sRoleid='+treeNode.sRoleid);
}
},
beforeEditName:beforeEditName,
beforeRemove: beforeRemove,
onAsyncSuccess:function(event, treeId, treeNode, msg){//資料載入完成後執行
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.getNodes();
if(flag){
treeObj.expandNode(nodes[0], true, false, true);
flag=false;
}
},
beforeRightClick:function(treeId, treeNode){
if(null ==treeNode){
return;
}
var id=treeNode.tId;
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.selectNode(treeNode);
$.contextMenu({
selector: '#'+id+"_a",
className: 'css-title',
build: function($trigger, e) {
return {
callback: function(key, options) {
var m = "clicked: " + treeNode.sRoleid;
alert(m);
},
items: {
"add": {name: "新增", icon: "add",
disabled: function(){
return false;
}
},
"edit": {name: "修改", icon: "edit"},
"delete": {name: "刪除", icon: "delete"}
}
};
}
});
return false;
}
}
};
$(document).ready(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting);
$("#treeDiv").height($(window).height()-120);
$("#iframeDiv").height($(window).height()-120);
demoIframe = $("#testIframe");
});
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='新增下級崗位' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) {
btn.bind("click", function(){
beforeAddName(treeNode.tId);
});
}
};
function removeHoverDom(treeId, treeNode) {//滑鼠滑離後移除圖示按鈕
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function beforeAddName(tId){//重寫預設新增節點的方法,需要返回false
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node = treeObj.getNodeByTId(tId);
var layerWidth=$(window).width()*0.8 > 550?550:$(window).width()*0.8;
var layerHeigth=$(window).height()*0.8 > 270?270:$(window).height()*0.8;
layer.open({
type: 2,
content: '<%=request.getContextPath()%>/login/post/showOrgPostInfoPage.do?sRoleid='+node.sRoleid+"&type=0",
area: [layerWidth+'px', layerHeigth+'px'],
title:'新增崗位',
btn:["提 交","取 消"],
yes:function(index, layero){
var iframeWin = window[layero.find('iframe')[0]['name']];
if(iframeWin.validatebox()){
iframeWin.saveOrgPostInfo(window);
demoIframe.attr('src','');
}
},
closeBtn: 2
});
return false;
}
function beforeEditName(treeId, treeNode) {//重寫預設編輯節點的方法,需要返回false
var layerWidth=$(window).width()*0.8 > 550?550:$(window).width()*0.8;
var layerHeigth=$(window).height()*0.8 > 270?270:$(window).height()*0.8;
layer.open({
type: 2,
content: '<%=request.getContextPath()%>/login/post/showOrgPostInfoPage.do?sRoleid='+treeNode.sRoleid+'&type=1',
area: [layerWidth+'px', layerHeigth+'px'],
title:'修改崗位',
btn:["提 交","取 消"],
yes:function(index, layero){
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveOrgPostInfo(window);
},
closeBtn: 2
});
return false;
}
function beforeRemove(treeId, treeNode) {//重寫預設刪除節點的方法,需要返回false
var _param="&sRoleid="+treeNode.sRoleid;
layer.confirm('確定要刪除該<span style="color: red;font-size: 20px;">'+treeNode.sRolename+'</span>崗位嗎?', {icon: 3, title:'提示'}, function(index){
$.post('<%=request.getContextPath()%>/login/post/deleteOrgPost.do', _param, function(data){
if(data == 1){
layer.msg("刪除成功", {icon: 6});
//在本地刪除節點
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.removeNode(treeNode);
demoIframe.attr('src','');
}else{
layer.msg("刪除失敗", {icon: 5});
}
});
});
return false;
}
function showRemoveBtn(treeId, treeNode) {
return !(treeNode.sRoleid == "root");//root節點不顯示刪除圖示
}
function showRenameBtn(treeId, treeNode) {
return !(treeNode.sRoleid == "root");//子節點不顯示修改圖示
}
function refreshTree(){//重新整理節點
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(selectNode, "refresh");
}
function zteeHeight(){//iframe頁取高度用
return $(window).height()-120;
}