1、首先说一下弹出框中实现input的智能提示。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />将页面显示定死为IE10.
也可以<meta http-equiv="X-UA-Compatible" content="IE=edge"/>不将页面定死。
$('#tags').autocomplete('destroy');每次加载前线消除上次加载项。
$("#tags").autocomplete({
appendTo: $("#Dialog"),
source: "/Controller/Class,
select: function (event, ui) {
$("#tags").val(ui.item.Name);
return false;
}
}).data('autocomplete')._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append($("<a><img style='32px;height:32px;' src='" + item.Url + "'>" + item.Name + "</img></a>"))
.appendTo(ul);
};
这是智能加载包括输入字符串的图片和名字，并且选中后将名字填入输入框。
2、ajax请求。
$.ajax({
async: true,//异步请求
type: "POST",//post方式
url: "/Controller/Class",//处理的控制器和方法
cache: false,
timeout: 60 * 60 * 1000,
dataType: "json",//数据方式
data: {
ID: encodeURI(id)
},
success: function (result) {
}
});
通过json数据，分析结果。
3、dhtmlxtree树。
//jquery脚本
$.menu = new Object();
$.menu.initialize = function (container, loadNodesUrl, autoLoadNodesUrl, showCheckBox, showRadioBox, nodeClick, nodeCheck, nodeSelect) {
var tree = new dhtmlXTreeObject(container, "100%", "100%", 0);//创建对象
if (showCheckBox) {//判断是否显示 checkbox框
tree.enableCheckBoxes(1);//设置显示checkbox框
//tree.enableThreeStateCheckboxes(true);//设置选中3中状态
//tree.enableSmartCheckboxes(true);
}
if (showRadioBox) {//判断显示radiobutton
tree.enableRadioButtons(1);
tree.enableSingleRadioMode(1);//radiobutton单选
}
tree.setImagePath('/Resource/Script/dhtmlxtree/imgs/');
if (autoLoadNodesUrl != null) {
//异步加载数据的数据源nodeChecked
tree.setXMLAutoLoading(autoLoadNodesUrl);
}
//初次加载数据
tree.loadXML(loadNodesUrl);
if (nodeClick != null) {//tree事件响应
tree.attachEvent("onClick", function (id) {
nodeClick(id, this.getItemText(id), tree);
});
}
if (nodeCheck != null) {
tree.attachEvent("onCheck", function (id) {
nodeCheck(id,this.getItemText(id), tree);
});
}
if (nodeSelect != null) {
tree.attachEvent("onCheck", function (id) {
nodeSelect(id,this.getItemText(id), tree);
});
}
return tree;
}
//View页面js脚本写入,调用树
$.menu.initialize("menuTree", '/Controller/Class?'+ 'GroupName=' + select, null, false, false, function (id, name, tree) {
$("#txtID").val(id);
rightMenu(select);
})
4.右键菜单。
//js脚本内容。
function rightMenu() {//绑定右键菜单。
$('#roleTree span').contextMenu('treeMenu', {
bindings: {
'new': function (t) {
id = $(t).attr("name");
id = parseInt(id);
//弹出创建菜单框
$("#divNewAndEditDialog").dialog('open')
$("#divNewAndEditDialog").dialog('option', "title", "新建角色");
$("#txtDialogState").val("New");
$("#txtRolename").val("");
$("#txtRolename").attr('disabled', false);
idarray = new Array();
LoadOperateGroup();
},
'modify': function (t) {
id = $(t).attr("name");
if (id == -1) {
return false;
} else {
var name = $(t).html();
name = encodeURIComponent(encodeURIComponent(name));
//修改菜单框
$("#divNewAndEditDialog").dialog('open')
$("#divNewAndEditDialog").dialog('option', "title", "编辑角色");
$("#txtDialogState").val("Edit");
$("#txtRolename").attr('disabled', false);
LoadData($("#txtID").val());
}
},
'delete': function (t) {
id = $(t).attr("name");
if (id == -1) {
return false;
} else {
var name = $(t).html();
art.dialog.confirm('确认删除“' + name + '”角色组吗？', function () {
//删除菜单
return true;
});
}
},
'refresh': function (t) {
// location.reload();//重新加载页面
LoadRoleTree();
}
}
});
}
<!-- 右键菜单 开始 -->
<div class="contextMenu" id="treeMenu" style="display: none; font-size: 13px; padding-left: 5px;">
<ul>
<li id="new"><span class="m">新建角色</span></li>
<li id="modify"><span class="m">编辑角色</span></li>
<!--<li id="delete"><span class="m">删除</span></li>-->
<li id="refresh"><span class="m">刷新角色</span></li>
</ul>
</div>
<!-- 右键菜单 结束 -->
5.初始化弹出框。
$(function () {
//初始化新建和编辑对话框
$("#divNewAndEditDialog").dialog({
autoOpen: false,
closeText: "关闭",
height: "360",
modal: true,
resizable: false,
"500"
});
})