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='width: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, width: "500" });})