2. 程式人生 > >zTree結合jquery.contextMenu.js實現右鍵選單

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; }

相關推薦

zTree結合jquery.contextMenu.js實現右鍵選單

var zTree; var demoIframe; var selectNode; var flag=true; var setting = { view: { dblClickExpand: false,

Js實現——右鍵出現選單，選單中有新建，複製，剪下，貼上，刪除

描述：    單擊右鍵出現選單，選單中有新建，複製，剪下，貼上，刪除    選擇新建時，建立第一個div，寬高50，顏色隨機，並且放在滑鼠點選的位置    點選div，div被選中，加邊線，如果被選中，div可以被拖動，當選擇別的d

win32 實現右鍵選單

contextMenu.h #ifndef _CONTEXTMENU_H_ #define _CONTEXTMENU_H_ #include <windows.h> #define ITEM_MENU_FULLSCREEN 40001 #define ITEM

js 禁用右鍵選單、拖拽、選中、複製

  //禁用拖拽 document.ondragstart = function () { return false; }; /** * 禁用右鍵選單 */ document.oncontextmenu = function () { event.retu

PyQt5 實現右鍵選單

QWidget 及其子類均支援右鍵選單功能，通過宣告 ContextMenuPolicy 啟用選單 Qt.DefaultContextMenu 預設選單，重寫 contextMenuEvent(

QListWidget的item上實現右鍵選單

。 問題：如何實現在一個列表中點選右鍵，如果在Item上面，則有“修改”選項，在其餘空白處，則只有“新增”，"刪除"選項。 實現右鍵選單， 從QListWidget中派生出ListWidget,重寫 void QWidget::contextMenuEvent ( QContextMenuEvent * ev

js 模擬右鍵選單

不經意地被一位同事問起在javascript裡面如何檢測右鍵事件，並且遮蔽原來的右鍵選單，上網查詢一翻之後發現一些比較簡單的方法。如設定onmousedown，檢查其event.button的值是不是2（代表右鍵）。這個方法在FF和IE中都可用，但是在Maxthon

tkinter實現右鍵選單

一 程式碼 import tkinter root = tkinter.Tk() menu = tkinter.Menu(root,tearoff=0) menu.add_command(label

jQuery,JS實現自定義滑鼠右鍵選單

滑鼠點選事件基本上是每個頁面必不可少的，絕大多數情況下都是普通的滑鼠左鍵點選，即可以通過click()方法來實現。 但是我們在很多情況下我們想通過滑鼠右鍵來實現一些功能的實現，比如說一個表格資料，表格的每行資料都可以進行刪除、修改、傳送等等操作，如果採用在每行都新增這些操作

JS自定義右鍵選單—複製到貼上板（jQuery和原生JS實現）

##自定義右鍵選單——複製到貼上板 ####需求： 滑鼠在li標籤上點選右鍵出現選單，主要是複製等功能 遮蔽瀏覽器預設右鍵點選事件 右鍵選單出現在滑鼠點選的位置 點選螢幕其他位置選單消失

js jQuery 右鍵選單 清屏

主要用到了oncontextmenu事件，在oncontextmenu事件中使用return false 遮蔽掉原生右鍵選單，再使用event獲取滑鼠的座標位置，設定自定義選單的位置。   http://swisnl.github.io/jQuery-contextM

arcgis for js 開發系列之地圖實現右鍵點選事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv

Jquery contextMenu右鍵選單使用

本部落格介紹一下一款開源的jquery右鍵選單外掛使用，github連結：https://github.com/swisnl/jQuery-contextMenu 樣例程式碼： <!DOCTYPE html> <html> <head>

【JavaScript】jquery右鍵點選事件和js禁用右鍵事件程式碼

jQuery滑鼠點選事件函式//jQuery滑鼠左擊、右擊和中擊事件 $('div').mousedown(function(e){ if(e.which == 3){ alert(

JS元件系列——Bootstrap右鍵選單解決方案：ContextMenu

前言：有段時間沒發表隨筆了，過個年人都變得懶了。新年剛來上班，今天正好得空，將去年遺留的兩個小元件總結記錄下。有朋友跟我說：你的bootstrap元件要能夠形成一個可以滿足一般專案需求的系列元件，才有真正的實用價值。想想說得在理。這不今天來總結下bootstrap的一個小元件的應用。好了，不說廢話，進入正題吧

JS元件Bootstrap ContextMenu右鍵選單使用方法

今天來總結下bootstrap的一個小元件的應用。好了，不說廢話，進入正題吧。 一、ContextMenu介紹 一個需求：表格行調序，支援多選調序，並且可以不連續多選。什麼意思呢？先來看看需要實現的效果圖： 需求是：需要將選中的6、8、9行移動到第2行和第3行之間。撇開業務不說，單純從技術層面來

【JAVASCRIPT】使用ztree樹，實現右鍵增加，修改，刪除節點。帶有複選框。

測試支援火狐，谷歌，IE10等。 主要使用ztree，擁有複選框，增加，修改，刪除功能，這些是要連線後臺的，自己再修改下就可以用。 效果如下圖： 點選增加後會出現 程式碼如下： <!DOCTYPE html> <html> <head>

js實現瀏覽器右鍵選單，遮蔽預設選單

<div id="mouse" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;">

jquery以及js實現option左移右移

[html] view plain copy print? <tablecellspacing="1"width="350px"align="center">        

js實現自定義右鍵選單

JavaScript實現自定義右鍵選單，思路如下： 1. 遮蔽預設右鍵事件； 2. 隱藏自定義的選單模組（如div、ul等）； 3. 右鍵點選特定或非特定區域，顯示選單模組； 4. 再次點選，隱藏選單