html + js 右 点击 弹出 菜单

页面

引用jar 包

<link rel="stylesheet" href="../../style/zui.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../zui/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../zui/zui.min.js"></script>

'jquery.contextmenu.r2.js'

<!--右击 弹出的 下拉菜单-->
<div style="display:none;">
<div class="contextMenu" id="menu" >
<ul>
<li id="add">
<i class="icon-add"></i> 添加
</li>
<li id="update">
<i class="icon-edit"></i> 修改
</li>
<li id="delete">
<i class="icon-exit"></i> 删除
</li>
</ul>
</div>
</div>

<!-- 左侧导航-->
<div class="indmain" >
<div id="centerLeft" class="shenfenleft">
<div><span>请选择</span></div>
<div>
<input class="input_client text-input" type="text" id="Department">
<a href="#" class="button zi_searchEntuser" id="button_search">搜索</a>
</div>
<ul class="tree" data-ride="tree" id="tree">
</ul>
</div>
</div>

js 文件

//右击 弹出 菜单
function loadMenu(){
$('ul li a').contextMenu('menu',{
//菜单样式
menuStyle: {

},
//菜单项样式
itemStyle: {
fontFamily : 'verdana',
backgroundColor : '#333333',
color: 'white',
border: 'none',
padding: '1px'

},
//菜单项鼠标放在上面样式
itemHoverStyle: {
color: '#fff',
backgroundColor: '#0099CC',
border: 'none'
},
bindings:
{
'add': function(t, target) {
//alert(t.id+"|||"+ t.name);
RightOperation("add",t.name,target);
// alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
'update': function(t, target) {
RightOperation("update",t.name,target);
//alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());
},
'delete': function(t, target) {
RightOperation("delete",t.name,target);
//alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());
}
},
onShowMenu: function(e, menu) {

if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
return menu;
}

});
}

function RightOperation(type,val,target){

var list = val.split(":");
var num = list[0];
var id =list[1];
var name = list[2];
//添加级别
if(type=="add"){
if(num.indexOf("one")!=-1){ //操作区级单位
dialog.confirm("省级名称：<input type='text' id='unit_name' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" +
"省级编码：<input type='text' id='unit_code' value='' style='width:180px;border:1px solid #cccccc'/><br/>",
function(){
//调用新增方法添加医院
var unit_name = $("#unit_name").val();
var unit_code = $("#unit_code").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = unit_name.match(reg);

if(unit_name==""){
dialog.alert("区级名称不能为空");
back;
}
if(unit_code==""){
dialog.alert("区级编码不能为空");
back;
}

if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

var reg1 = /^[A-Za-z0-9]*$/;
var d = unit_code.match(reg1);
if(d==null){
dialog.alert("区级编号只能输入数字、字母");
back;
}

//var city_code =? //市级编码

var data = {"unit_name":unit_name,"unit_code":unit_code,"city_code":id};
insertUnit(data,target,unit_name,unit_code);
;
//动态加载右键事件
loadMenu();

},function(){

});
}
else if(num.indexOf("two")!=-1){ //操作医院单位
dialog.confirm("市(地级)级名称：<input type='text' id='org_name' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" +
"市(地级)级编码：<input type='text' id='org_code' value='' style='width:180px;border:1px solid #cccccc'/><br/>",
function(){
//调用新增方法添加医院
var org_name = $("#org_name").val();
var org_code = $("#org_code").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = org_name.match(reg);

var reg1 = /^[A-Za-z0-9]*$/;
var d = org_code.match(reg1);

if(org_name==""){
dialog.alert("医院名称不能为空");
back;
}
if(org_code==""){
dialog.alert("医院编码不能为空");
back;
}

if(r==null){
dialog.alert("医院名称只能输入数字、字母、汉字");
back;
}

if(d==null){
dialog.alert("医院编号只能输入数字、字母");
back;
}

//var unit_code =?

var data = {"org_name":org_name,"org_code":org_code,"unit_code":id};
insertOrg(data);
//添加医院节点
$(target).parent().next().append('<div id="sfgc94" class="fff"><a style="padding-left: 20px;" name="three:'+org_code+':'+org_name+'" data-id="'+org_code+'" id="three003"><i class="icon-pack-2" style="color: #0099CC; font-size: 14px;"></i>'+org_name+'</a></div><div class="ps" id="fgcthree003" style="display:block"></div>');
//动态加载右键事件
loadMenu();

},function(){
});
}
else if(num.indexOf("three")!=-1){ //操作科室单位
dialog.confirm("县级名称：<input type='text' id='DepartmentName' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" +
"县级编码：<input type='text' id='DepartmentCode' value='' style='width:180px;border:1px solid #cccccc'/>",
function(){
//调用新增方法添加科室
var DepartmentName = $("#DepartmentName").val();
var DepartmentCode = $("#DepartmentCode").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = DepartmentName.match(reg);

var reg1 = /^[A-Za-z0-9]*$/;
var d = DepartmentCode.match(reg1);

if(DepartmentName==""){
dialog.alert("科室名称不能为空");
back;
}
if(DepartmentCode==""){
dialog.alert("科室编码不能为空");
back;
}

if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

if(d==null){
dialog.alert("区级编号只能输入数字、字母");
back;
}

var data = {"department_name":DepartmentName,"department_code":DepartmentCode,"org_code":id};
insertDepartment(data);

//添加科室节点
$(target).parent().next().append('<div class="bb"><a name="four:'+DepartmentCode+':'+DepartmentName+'" id="'+DepartmentCode+'"><i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>'+DepartmentName+'</a></div>');
//动态加载右键事件
loadMenu();

},function(){
});
} else if(num.indexOf("four")!=-1){
dialog.alert("科室下面无需添加！");
}

}
//修改级别
else if(type=="update"){
if(num.indexOf("one")!=-1){
dialog.confirm("市级名称：<input type='text' id='city_name' style='width:180px;border:1px solid #cccccc' value='"+name+"'/><br/>",
function(){
//调用新增方法添加医院
var city_name = $("#city_name").val();
var city_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = city_name.match(reg);

if(city_name==""){
dialog.alert("市级名称不能为空");
back;
}
if(r==null){
dialog.alert("市级名称只能输入数字、字母、汉字");
back;
}

var data = {"city_name":city_name,"city_code":city_code};
updateCity(data);
$(target).html(city_name)

},function(){
});
}
else if(num.indexOf("two")!=-1){
dialog.confirm("区级名称：<input type='text' id='unit_name' style='width:180px;border:1px solid #cccccc' value='"+name+"' /><br/>",
function(){
//调用新增方法添加医院
var unit_name = $("#unit_name").val();
var unit_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = unit_name.match(reg);

if(unit_name==""){
dialog.alert("区级名称不能为空");
back;
}
if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

var data = {"unit_name":unit_name,"unit_code":unit_code};
updateUnit(data);
$(target).html('<i class="icon-address" style="color: #0099CC; font-size: 14px;"></i>' + unit_name);
},function(){
});
}
else if(num.indexOf("three")!=-1){
dialog.confirm("医院名称：<input type='text' id='org_name' style='width:180px;border:1px solid #cccccc' value='"+name+"' /><br/>",
function(){
//调用新增方法添加医院
var org_name = $("#org_name").val();
var org_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = org_name.match(reg);

if(org_name==""){
dialog.alert("医院名称不能为空");
back;
}

if(r==null){
dialog.alert("医院名称只能输入数字、字母、汉字");
back;
}
//var unit_code =?

var data = {"org_name":org_name,"org_code":org_code};

updateOrg(data);
$(target).html('<i class="icon-add" style="color: #0099CC; font-size: 14px;"></i>' + org_name + '</a>')
},function(){
});
}
else if(num.indexOf("four")!=-1){
dialog.confirm("科室名称：<input type='text' id='DepartmentName' style='width:180px;border:1px solid #cccccc' value='"+name+"' />",
function(){
//调用新增方法添加科室
var DepartmentName = $("#DepartmentName").val();
var DepartmentCode = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = DepartmentName.match(reg);

if(DepartmentName==""){
dialog.alert("科室名称不能为空");
back;
}

if(r==null){
dialog.alert("科室名称只能输入数字、字母、汉字");
back;
}

var data = {"department_name":DepartmentName,"department_code":DepartmentCode};
updateDepartment(data);
$(target).html('<i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>'+DepartmentName);
},function(){
});
}
}
//删除级别
else if(type=="delete"){
if(num.indexOf("one")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"city_name":name,"city_code":id};
citySelectUnit(id);
if(unitname.length==0){
deleteCity(data,target);

}
else{
dialog.alert("该城市下还存在区级信息，不能直接删除！");
}

},function(){
return;
});
}
else if(num.indexOf("two")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"unit_name":name,"unit_code":id};
unitCodeSelectOrg(id);
if(Hospitalinfo.length==0){
deleteUnit(data,target);

}
else{
dialog.alert("该区下还存在医院信息，不能直接删除！");
}

// $(target).remove();
//$(target).parent().html("");
},function(){
});
}
else if(num.indexOf("three")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"org_name":name,"org_code":id};
orgCodeSelectDepartment(id);
if(Department.length==0){
deleteOrg(data,target);

}
else{
dialog.alert("该医院下还存在科室信息，不能直接删除！");
}

// $(target).parent().parent().html("");
//$(target).parent().siblings(1).html("");
},function(){
});
}
else if(num.indexOf("four")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"department_name":name,"department_code":id};
deleteDepartment(data,target);

},function(){

});
}
}

}