****cshtml代碼****
@{
ViewBag.Title = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TreeGrid - jQuery EasyUI Demo</title>
@*<link rel="stylesheet" type="text/css" href="~/Content/js/Menu/easyui.css">
<link rel="stylesheet" type="text/css" href="~/Content/js/Menu/icon.css">
<link rel="stylesheet" type="text/css" href="~/Content/js/Menu/demo.css">
<script type="text/javascript" src="~/Content/js/Menu/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Content/js/Menu/jquery.easyui.min.js"></script>*@
</head>
<body>
<table id="tg"></table>
</body>
</html>
<script type="text/javascript">
$(function () {
//function onEndEdit(index, row) {
// debugger;
// var ed = $(this).datagrid('getEditor', {
// index: index,
// field: 'IsEnable'
// });
// debugger;
// row.IsEnable = $(ed.target).checkbox('getChecked');
// row.IsOpen = true;
// //row.productname = $(ed.target).combobox('getText');
//};
$('#tg').treegrid({
url: '/Menu/GetNavgitionData',
idField: 'BaseId',
treeField: 'Name',
iconCls: 'icon-ok',
state: 'closed',
rownumbers: true, //行号
animate: true, //點選節點的動畫效果
collapsible: true,//定義是否可折疊按鈕
fitColumns: true, // 置為true将自動使列适應表格寬度以防止出現水準滾動。
showFooter: true,//定義是否顯示行底（如果是做統計表格，這裡可以顯示總計等）。
striped: false,//設定為true将交替顯示行背景。
onDblClickRow: function (row) { edit() },//輕按兩下節點是觸發
//onClickRow: function (row) { save() },//點選節點時觸發
columns: [[
{ field: 'Name', title: '子產品名稱', editor: 'text', width: },
{ field: 'Domain', title: '導航領域', editor: 'text', width: },
{ field: 'Path', title: '跳轉路徑', editor: 'text', width: },
{ field: 'Sequence', title: '排序序号', editor: 'text', width: },
{
field: 'Parent', title: '上級菜單', width: ,
formatter: function (value, row, index) {
if (value != null)
return value.Name;
},
{
field: 'IsEnable', title: '是否啟用', width: ,
formatter: function (value, row, index) {
if (value == true || value == 'true') {
var d = '<input type="checkbox" checked="checked" class="zhen" disabled="disabled" /> ';
row.IsEnable = 'true'; //此處如果不裝換為字元串類型，下面的編輯器将不會有預設值
}
else {
var d = '<input type="checkbox" disabled="disabled" /> ';
row.IsEnable = 'false';
}
return d;
},
editor: { //編輯器
type: 'checkbox',
options: {
on: true, off: false, //此出實際傳回字元串類型
}
}
},
{
field: 'IsOpen', title: '是否公開', width: ,
formatter: function (value, row, index) {
//alert(rec.isPresent);
if (value == true) {
var d = '<input type="checkbox" checked="checked" name="IsOpen"/> ';
row.IsOpen = 'true';
}
else {
var d = '<input type="checkbox" name="IsOpen"/> ';
row.IsOpen = 'false';
}
return d;
},
editor: { //編輯器
type: 'checkbox',
options: {
on: true, off: false, //此出實際傳回字元串類型
}
}
}
]],
toolbar: [
{
text: '添加根菜單', iconCls: 'icon-add', handler: function () {
appendroot();
}
}, '-',
{
text: '添加子菜單', iconCls: 'icon-add', handler: function () {
append();
}
}, '-',
{
text: '删除', iconCls: 'icon-remove', handler: function () {
remove();
}
}, '-',
{
text: '編輯', iconCls: 'icon-edit', handler: function () {
edit();
}
}, '-',
{
text: '儲存', iconCls: 'icon-save', handler: function () {
save();
}
}, '-',
{
text: '取消編輯', iconCls: 'icon-undo', handler: function () {
$('#tg').treegrid('cancelEdit', editingId);
editingId = undefined;
}
}, '-',
{
text: '全部折疊', iconCls: 'icon-fold', handler: function () {
$('#tg').treegrid('collapseAll');
}
}, '-',
{
text: '全部展開', iconCls: 'icon-unfold', handler: function () {
$('#tg').treegrid('expandAll');
}
},
],
}
);
})
var editingId;
function IsEditingId() {
if (editingId) {
$('#tg').treegrid('endEdit', editingId);
editingId = undefined;
}
}
function edit() {
debugger;
if (undefined != editingId) {
utils.message('error', '請先儲存目前節點！');
return;
}
var row = $('#tg').treegrid('getSelected');
if (undefined == row) {
utils.message('error', '請選中一個節點！');
}
if (row) {
editingId = row.BaseId;
$('#tg').treegrid('beginEdit', editingId);
}
}
function save() {
if (editingId != undefined) {
editId = editingId;
$('#tg').treegrid('endEdit', editingId);
utils.message('confirm', '确認儲存目前操作嗎？', function (b) {
if (b) {
var row = $('#tg').treegrid('find', editingId);
if (row.IsEnable == 'false') {
row.IsEnable == false
}
if (row.IsEnable == 'true') {
row.IsEnable = true
}
if (row.IsOpen == 'true') {
row.IsOpen = true;
}
if (row.IsOpen == 'false') {
row.IsOpen = false;
}
var node = {
BaseId: row.BaseId, Domain: row.Domain, Name: row.Name, Path: row.Path, ParentId: row._parentId, Sequence: row.Sequence, IsEnable: row.IsEnable, IsOpen: row.IsOpen
};
var data;
$.ajax({
type: "post",
async: false,
data: node,
url: '/Menu/SaveNewNode',
success: function (res) {
data = res;
}
});
if (data == 'success') {
utils.message('success', '儲存成功！');
$('#tg').treegrid('refresh', editingId);
$('#tg').treegrid('acceptChanges');
}
else {
utils.message('error', data);
$('#tg').treegrid('rejectChanges');
$('#tg').treegrid('refresh', editingId);
//$('#tg').treegrid('remove', editingId);
// $('#tg').treegrid('cancelEdit', editingId);
//$('#tg').treegrid('rejectChanges');
editingId = undefined;
return;
}
editingId = undefined;
}
}
)
}
}
function appendroot() {
debugger;
$('#tg').treegrid('append', {
parent: null, // 節點有一個'id'值,定義是通過'idField'屬性
data: [{
BaseId: guid(),
Name: '',
Path: '',
Parent: null,
IsEnable: false,
IsOpen: false,
}]
});
//$('#tg').treegrid('expand', node.BaseId);
$('#tg').treegrid('select', editingId);
$('#tg').treegrid('beginEdit', editingId);
}
function append() {
if (undefined != editingId) {
utils.message('error', '請先儲存目前節點！');
return;
}
var node = $('#tg').treegrid('getSelected');
if (!node) {
utils.message('error', '請選擇節點！');
return;
}
$('#tg').treegrid('append', {
parent: node.BaseId, // 節點有一個'id'值,定義是通過'idField'屬性
data: [{
BaseId: guid(),
Name: '',
Path: '',
Parent: node,
IsEnable: false,
IsOpen: false,
}]
});
$('#tg').treegrid('expand', node.BaseId);
$('#tg').treegrid('select', editingId);
$('#tg').treegrid('beginEdit', editingId);
}
function remove() {
var node = $('#tg').treegrid('getSelected');
if (undefined != editingId) {
if (editingId != node.BaseId) {
utils.message('error', '請先儲存目前節點！');
return;
}
}
if (null == node) {
utils.message('error', '請選擇要删除的節點！');
return;
}
var id = node.BaseId;
utils.message('confirm', '确認删除嗎？', function (b) {
if (b) {
$('#tg').treegrid('endEdit', id);
$.post('/Menu/DeleteNode', { id: id }, function (data) {
if (data == 'error') {
utils.message('error', '删除失敗！');
$('#tg').treegrid('rejectChanges');
}
if (data == 'success') {
$('#tg').treegrid('remove', node.BaseId);
utils.message('success', '删除成功！');
editingId = undefined;
// $('#tg').treegrid('reload', id);
$('#tg').treegrid('acceptChanges');
}
});
}
});
}
//表示全局唯一辨別符 (GUID)。 因為操作菜單需要id 是以要自己生成id 來儲存到資料庫
function guid() {
function S4() {
return ((( + Math.random()) * ) | ).toString().substring();
}
editingId = (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
return editingId;
}
</script>
//背景查詢菜單展示的方法 用到遞歸方法
public ActionResult GetNavgitionData()
{
ArrayList arr = new ArrayList();
var top = new Navigation().GetRootNav();
IList<Navigation> lists = new Navigation().FindAll<Navigation>();
foreach (var item in top)
{
TreeGridModel m = new TreeGridModel()//這個是自己建立的Model類
{
BaseId = item.BaseId,
Domain = item.Domain,
Name = item.Name,
Path = item.Path,
Sequence = item.Sequence,
IsEnable = item.IsEnable,
IsOpen = item.IsOpen,
children = new List<TreeGridModel>(),
};
DiGui(m, lists);
arr.Add(m);
}
return Json(arr);
}
private void DiGui(TreeGridModel m, IList<Navigation> lists)//遞歸方法。
{
//當沒有子節點的時候方法結束
if (lists.Where(a => null != a.Parent && a.Parent.BaseId == m.BaseId).Count() == 0) { return; }
var sub = lists.Where(a => null != a.Parent && a.Parent.BaseId == m.BaseId).ToList<Navigation>();
foreach (var item in sub)
{
TreeGridModel m2 = new TreeGridModel()
{
BaseId = item.BaseId,
Domain = item.Domain,
Name = item.Name,
Path = item.Path,
Parent = item.Parent,
Sequence = item.Sequence,
IsEnable = item.IsEnable,
IsOpen = item.IsOpen,
children = new List<TreeGridModel>(),
};
m.children.Add(m2);
DiGui(m2, lists);
}
}
//背景儲存方法
public string SaveNewNode(NewNode node)
{
string message = "success";
bool IsSave = false;//是否是新增
Navigation IsNEW = new Navigation().FindById<Navigation>(node.BaseId);
try
{
Convert.ToInt32(node.Sequence);
Navigation nav = new Navigation().FindSingle<Navigation>(n => n.Domain == node.Domain);
if (null == IsNEW)
{
if (null != nav)
{
return "導航領域已存在！";
}
}
}
catch (System.Exception e)
{
return "排序序号隻能填寫數字！";
}
try
{
if (null == IsNEW)
{
IsNEW = new Navigation();
IsSave = true;
}
Navigation navigation = null;
if (null != node.ParentId)
{
navigation = new Navigation().FindById<Navigation>(node.ParentId);
}
//Navigation newnode = new Navigation();
IsNEW.Name = node.Name;
IsNEW.Domain = node.Domain;
IsNEW.Path = node.Path;
if (null != navigation)
{
IsNEW.Parent = navigation;
}
IsNEW.Sequence = node.Sequence;
IsNEW.IsEnable = node.IsEnable;
IsNEW.IsOpen = node.IsOpen;
IsNEW.BaseId = node.BaseId;
if (IsSave)
{
IsNEW.Insert();
}
else
{
IsNEW.Update();
}
message = "success";
return message;
}
catch (System.Exception e)
{
message = "儲存失敗";
return message;
}
return message;
}
![Ace Admin背景管理系統模闆、使用者權限管理設計、按鈕級别一、前言二、使用三、使用者權限管理系統界面結語[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)