jqery easyui 利用treeview实现菜单的增删改查
来源：互联网 发布：编程中不等于 编辑：程序博客网 时间：2024/04/29 15:08
****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: 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 = '<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: 60, 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 (((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<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; }
0 0
- jqery easyui 利用treeview实现菜单的增删改查
- jqery easyui 利用datagrid增删该查后台权限
- EASYUI的增删改查
- jqery easyui 给角色分配菜单 利用tree来实现
- jquery-easyui 实现用户的增删改查！
- 使用springMvc+easyui+mysql实现简单的增删改查
- 使用 EasyUI 实现 MySQL 数据 简单的 增删改查
- jQuery EasyUI+Nutz实现增删改查
- Jquery EasyUI增删改查实现步骤
- ASP.NET EasyUI实现增删改查
- C#easyui实现增删改查
- ssm+easyui+sqlserver2008(增删改查实现)
- easyui增删改查
- easyui增删改查
- 利用系统api实现数据库的增删改查 →数据库的增删改查
- Easyui-DataGrid 的增删查改
- 基于easyui框架的增删改查
- easyUi的简单增删改查案例
- asp如何解析json数组（高分求教）
- HDU 3038（并查集续带权并查集）
- 自己写的 tab显示不同的列表
- RELU 激活函数及其他相关的函数
- 关于备考基础阶段背单词-词典网站
- jqery easyui 利用treeview实现菜单的增删改查
- 史上最全最强SpringMVC详细示例实战教程
- 2000 ASCII码排序
- 如何给虚拟机vmware增加新的磁盘
- eclipse.destop
- 2017年工作目标与生活规划
- 三元组压缩存储稀疏矩阵的C++类模板实现
- Github--push自己的第一段代码
- 【C++学习笔记】使用New来创建动态数组
