jqery easyui 利用treeview实现菜单的增删改查
****cshtml代码****
@{
ViewBag.Title = null;
}
<html>
<head>
<meta charset="UTF-8">
<title>Basic TreeGrid - jQuery EasyUI Demotitle>
@*<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: 180 },
{ field: 'Domain', title: '导航领域', editor: 'text', width: 150 },
{ field: 'Path', title: '跳转路径', editor: 'text', width: 200 },
{ field: 'Sequence', title: '排序序号', editor: 'text', width: 100 },
{
field: 'Parent', title: '上级菜单', width: 100,
formatter: function (value, row, index) {
if (value != null)
return value.Name;
},
{
field: 'IsEnable', title: '是否启用', width: 60,
formatter: function (value, row, index) {
if (value == true || value == 'true') {
var d = ' ';
row.IsEnable = 'true'; //此处如果不装换为字符串类型，下面的编辑器将不会有默认值
}
else {
var d = ' ';
row.IsEnable = 'false';
}
return d;
},
editor: { //编辑器
type: 'checkbox',
options: {
on: true, off: false, //此出实际返回字符串类型
}
}
},
{
field: 'IsOpen', title: '是否公开', width: 60,
formatter: function (value, row, index) {
//alert(rec.isPresent);
if (value == true) {
var d = ' ';
row.IsOpen = 'true';
}
else {
var d = ' ';
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 (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
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 lists = new Navigation().FindAll();
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(),
};
DiGui(m, lists);
arr.Add(m);
}
return Json(arr);
}
private void DiGui(TreeGridModel m, IList 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();
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(),
};
m.children.Add(m2);
DiGui(m2, lists);
}
}
//后台保存方法
public string SaveNewNode(NewNode node)
{
string message = "success";
bool IsSave = false;//是否是新增
Navigation IsNEW = new Navigation().FindById(node.BaseId);
try
{
Convert.ToInt32(node.Sequence);
Navigation nav = new Navigation().FindSingle(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(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;
}