Asp.net+ jQuery 写自己的右键菜单

最新推荐文章于 2022-11-28 22:57:45 发布

manbufenglin

最新推荐文章于 2022-11-28 22:57:45 发布

阅读量3.6k

点赞数

分类专栏： JQuery 文章标签： jquery asp.net function action class url

本文链接：https://blog.csdn.net/manbufenglin/article/details/5591029

版权

JQuery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这几天赶项目，注意到有用【右键菜单】操作起来更方便的地方；于是抽出了点时间做了个右键菜单操作TreeView树Nodes的效果！

现共享出来，希望能对有同样需求的你有所帮助！

一、效果

二、界面实现

树结构：通过cs后台加载绑定；
点击一级菜单时，显示【添加】和【关闭】菜单项；
点击二级测试路线时，显示右键菜单项【修改】、【删除】、【关闭】。

三、具体实现

1、前台页面：

备注：

在页面标签head中引入jquery.js;
在页面标签head中引入右键菜单js和css;
右键菜单js+css: Jquery.contextMenu_1.01.zip

2、 jquery 脚本：

下面我们实现对树的右键菜单，并实现菜单项功能。

首先，我们需要选中一级菜单结点，并将右键菜单设置给它；然后再找到路线结点【二级菜单】，给它设置上右键菜单项【修改、删除、关闭】。

选中一级结点项（即工厂级别的结点）

这样就让一级结点拥有了右键菜单项，并将菜单项【修改、删除】置为不可用状态（业务的需求）。

选中二级结点项

//点检路线右键菜单 $('a[target^=RightFrmLineMgr]').contextMenu({ menu: 'lineMenu' }, function(action, el, pos) {//修改、删除 var lineid = getLineID($(el).attr("href")); if (action == "edit") { dealWithEdit(lineid); } else if (action == "delete") { dealWithDelete(lineid, el); } else if (action == "cancel") { $('#lineMenu').hide(); } }); $('#lineMenu').disableContextMenuItems('#add');

为路线结点成功设置了右键菜单项后，设置其【添加】菜单项不可用。（业务需求所致。在这里也演示了如何使右键菜单项不可用）

其它功能的实现

1、js实现具体功能项：

//处理添加操作 var dealWithAdd = function dealWithInsert(depNo, depname) { var url = "../../ShowMoalDialog.aspx?type=DepAddLine&depno=" + depNo + "&depname=" + depname; var returnVal = showModalDialog(url); //成功：返回1 }; //处理更新操作 var dealWithEdit = function dealWithModify(lineID) { var url = "../../ShowMoalDialog.aspx?type=DepEditLine&lineid=" + lineID; var returnVal = showModalDialog(url); //成功：返回标示1 --和depno alert(returnVal); }; //处理删除操作 var dealWithDelete = function dealWithDel(lineID, el) { var lineName = $(el).text(); if (!confirm('确定要删除路线' + lineName + '吗？')) return; $.getJSON("../../jqServices.ashx?t=" + new Date(), { type: 'DJDEPLINEDEL', lineid: lineID }, function(data) { if (data.hasOwnProperty("Result")) { var result = data.Result; if (result == '1') { alert('删除路线' + lineName + '成功！'); $(el).hide(); //删除成功，则隐藏此元素 } else { alert('删除失败！原因：/n' + result); } } }); }; var showModalDialog = function showDialog(url) { return window.showModalDialog(url, 'dialogWidth=300px;dialogHeight=500px'); }; var getDepNo = function getDepCode(mystr) { var split = mystr.split(""); var temp = split[split.length - 1]; return temp.replace("/')", ""); }; var getLineID = function getLineNo(str) { var temp = ''; if (str.length > 0) temp = str.substring(str.length - 1); return temp; };

2、当【添加】时，弹出窗体，提供用户交互接口。保存成功后，可返回值给父页面。实现代码即： var showModalDialog = function showDialog(url) { return window.showModalDialog(url, 'dialogWidth=300px;dialogHeight=500px'); }; 在弹出窗体的页面（Asp.net），通过注册脚本如下所示，可实现向父窗体传值的功能： #region 返回弹出网页对话框值 /// <summary> /// 返回弹出网页对话框值 /// </summary> /// <param name="paramValue"></param> /// <returns></returns> public static void ReturnShowDialog(string paramValue) { string js = ""; js = js + " <Script language='JavaScript'>"; js = js + " function returnShowDialog(){ "; js = js + " window.returnValue = '" + paramValue + "' ;"; js = js + " window.close();"; js = js + " }"; js = js + " </Script>"; HttpContext.Current.Response.Write(js); } #endregion

3、至于【删除】菜单项功能的实现是通过jQuery的Ajax调用服务端代码实现对数据库数据的删除操作。

具体实现代码很简单，在这里就不写出了！不熟悉的可参考 JQuery +Ajax有关知识。

If it is useful to u, Plz let me know!

Enjoy it！ :-)