MVC開發-後臺開發總結

一、首先說一下彈出框中實現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);
};

這是智能加載包括輸入字符串的圖片和名字，而且選中後將名字填入輸入框。

二、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數據，分析結果。

三、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"
});

})