一、樹形菜單的顯示
首先在引入easyui包的基礎上,這個要加進去<div id="menuTree" class="easyui-menu" style="width: 120px;"></div>,div中間不用寫入東西,主要就是在後面的function中進行初始化樹。
一、樹形菜單的右鍵標籤
期中增加同級機構、增加下屬機構、修改、刪除分別是調用了addNode(),del()等方法。
<div id="menuTree" class="easyui-menu" style="width: 120px;">
<SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun_AddSiblingOrg">
<div id="miAddSibling" οnclick="addNode(1)" data-options="iconCls:'icon-add'">
新增同級機構</div>
</SecurityTag:Authorize>
<SecurityTag:Authorize ID="Authorize1" runat="server" FunctionID="fun_AddChildrenOrg">
<div id="miAddChildren" οnclick="addNode(0)" data-options="iconCls:'icon-add'">
新增下屬機構</div>
</SecurityTag:Authorize>
<SecurityTag:Authorize ID="Authorize2" runat="server" FunctionID="fun_ModeifyOrg">
<div id="miEdit" οnclick="edit()" data-options="iconCls:'icon-edit'">
修改</div>
</SecurityTag:Authorize>
<SecurityTag:Authorize ID="Authorize3" runat="server" FunctionID="fun_DelOrg">
<div class="menu-sep">
</div>
<div id="miDel" οnclick="del()" data-options="iconCls:'icon-no'">
刪除</div>
</SecurityTag:Authorize>
</div>
至於爲什麼右鍵點擊才顯示,那就是easyui的內容了,不過有一點注意,加入權限管理標籤方便後面對這些按鈕權限的控制,這裏也可以當作不用加入這些標籤,<div class="menu-sep"></div>是增加分割線,
下面就是要在js中處理了。
<script type="text/javascript">
$(function ()
{
var height = document.body.scrollHeight - document.body.scrollTop - 25 - 26;
//alert(height);
var objLayout = $("#layoutRegion");
objLayout.height(height);
objLayout.layout('resize');
initTree();
})
var currentTreeNode = null;
var parentTreeNode = null;
var objTree = $('#ulTree');
var objLayout = $("#layoutRegion");
function openCenterPage(url, params)
{
$("#ifrContent").attr("src", url + '?1=1' + params);
}
function addNode(isAddSibling)
{
var params = "";
if (isAddSibling == "1")
{
params += "&pid=" + parentTreeNode.id;
} else
{
params += "&pid=" + currentTreeNode.id;
}
params += "&isAddSibling=" + isAddSibling;
openCenterPage('OrgEdit.aspx', params);
}
function viewNode(id)
{
var params = "";
params += "&id=" + id;
openCenterPage('OrgList.aspx', params);
}
function del()
{
if (currentTreeNode.children.length > 0)
{
$.messager.alert("系統提示", "請先刪除下屬機構!", "info");
return;
}
if (!window.confirm("確定刪除該機構嗎?"))
{
return;
}
util.ajaxForWebMethod('orgmgr.aspx/Delete', { id: currentTreeNode.id }, function (data)
{
//請求成功的處理
var result = data.d;
if (result.Code == "0")
{
viewNode(parentTreeNode.id);
updateTree();
$.messager.alert("系統提示", "刪除成功!", "info");
} else
{
$.messager.alert("系統提示", result.Message, "info");
}
},
function (data)
{
//請求失敗的處理
$.messager.alert("系統提示", "刪除失敗,請與管理員聯繫。", "info");
});
}
function edit()
{
var params = "";
params += "&id=" + currentTreeNode.id;
openCenterPage('OrgEdit.aspx', params);
}
//樹菜單狀態
function menuStatus()
{
if (!currentTreeNode)
{
return;
}
var menuTree = $('#menuTree');
//var data = objTree.tree('getData', currentTreeNode.target);
parentTreeNode = objTree.tree('getParent', currentTreeNode.target);
if (parentTreeNode == null)
{
parentTreeNode = currentTreeNode; //爲根節點時,父點與當前點爲相同
menuTree.menu('disableItem', $('#miAddSibling')); //根節點時,不能增加同級
menuTree.menu('disableItem', $('#miEdit')); //根節點時,不能修改
} else
{
menuTree.menu('enableItem', $('#miAddSibling'));
menuTree.menu('enableItem', $('#miEdit'));
}
}
function initTree()
{
treeHelper.bind(objTree, 'Orgmgr.aspx/Query', { requestUser: false });
// 右鍵點擊節點然後顯示上下文菜單
objTree.tree({
onClick: function (node)
{
//alert(node.text); // alert node text property when clicked
viewNode(node.id);
},
onContextMenu: function (e, node)
{
e.preventDefault();
// 選擇節點
objTree.tree('select', node.target);
// 顯示上下文菜單
$('#menuTree').menu('show', {
left: e.pageX,
top: e.pageY
});
if (node == currentTreeNode)
{
return;
}
//當前結點
currentTreeNode = node;
viewNode(node.id);
menuStatus();
}
});
}
function updateTree()
{
//alert('update');
//objTree.tree('reload', objTree.tree('getRoot'));
treeHelper.bind(objTree, 'orgmgr.aspx/Query', { requestUser: false });
}
</script>