使用WTM（ASP.NET Core）框架四步完成树形菜使用及制作增删查改功能

一、创建模型

1、在XXX.Model 项目中创建树形菜单类，继承BasePoco类和ITreeData接口。官方文档地址：点击进入

2、在XXX.DataAccess项目中注册表。EF基本操作，这里就不多说了。

/// <summary>
    /// 单位表
    /// </summary>
    public class UnitWork: BasePoco,ITreeData<UnitWork>
    {
        /// <summary>
        /// 单位名称
        /// </summary>
        [Display(Name = "部门名称")]
        public string UnitWorkName { get; set; }
        /// <summary>
        /// 子菜单
        /// </summary>
        
        public List<UnitWork> Children { get; set; }
        /// <summary>
        /// 子项
        /// </summary>
        [Display(Name = "上级部门")]
        public UnitWork Parent { get; set; }
        /// <summary>
        /// 子项ID
        /// </summary>
        [Display(Name = "上级部门")]
        public Guid? ParentId { get; set ; }
    }

二、新建视图模型，为控制器提供数据源。

在XXX.ViewModel项目中新建视图类，继承自BaseCRUDVM类。官方文档地址：点击进入

可以把CURD逻辑封装在此类中，也可以直接写到控制器中。（建议封装到视图类中。）这里为了方便，和更灵活的使用WTM数据库上下文，我写到控制器中。

Tree可以根据绑定Field字段的类型判断是单选模式还是多选模式，通过 Items 属性设置数据源，Items需要绑定一个List
TreeSelectListItem 是框架提供的辅助类，有 Id，Text，Url，Children等属性
继承了ITreeData接口的模型，可以方便的调用框架提供的函数生成Tree控件需要的数据格式,
比如 DC.Set<T>().GetTreeSelectListItems( LoginUserInfo.DataPrivileges, null, x=>x.DepName) 直接读库并生成一个List

public class TestTreeVM : BaseCRUDVM<UnitWork>
    {     
        public List<TreeSelectListItem> AllParents { get; set; }
        /// <summary>
        /// 生成树形菜单数据
        /// </summary>
        protected override void InitVM()
        {
            AllParents = DC.Set<UnitWork>().GetTreeSelectListItems(LoginUserInfo?.DataPrivileges, null, y => y.UnitWorkName);
        }      
    }

三、新建树形菜单CURD控制器

1、将控制器的继承修改为BaseController

2、注意控制器中返回的视图，如果想完美继续使用WTM框架自带的layui后台菜单，建议使用 return PartialView();

public class TestVMController : BaseController
    {
        /// <summary>
        /// 首页
        /// </summary>
        /// <returns></returns>
        public IActionResult Index()
        {
            var vm = CreateVM<TestTreeVM>();
            return PartialView(vm);
        }
        /// <summary>
        /// 新增子菜单
        /// </summary>
        /// <param name="name">子菜单名</param>
        /// <param name="id">上级菜单主键</param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Add(string name, string id)
        {
            UnitWork unit = new UnitWork
            {
                ParentId = new Guid(id),
                ID = new Guid(),
                UnitWorkName = name
            };

            DC.AddEntity(unit);
            int x = DC.SaveChanges();
            if (x > 0)
            {
                return Content("添加成功");
            }
            return Content("添加失败");
        }
        /// <summary>
        /// 新增顶级菜单
        /// </summary>
        /// <param name="name">顶级菜单名称</param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult AddTop(string name)
        {
            UnitWork unit = new UnitWork
            {
                ID = new Guid(),
                UnitWorkName = name
            };
            DC.AddEntity(unit);
            int x = DC.SaveChanges();
            if (x > 0)
            {
                return Content("添加成功");
            }
            return Content("添加失败");
        }
        /// <summary>
        /// 修改菜单
        /// </summary>
        /// <param name="name">修改名称</param>
        /// <param name="id">菜单主键</param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Edit(string name, string id)
        {
            UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);
            unit.UnitWorkName = name;
            DC.UpdateEntity(unit);
            int x = DC.SaveChanges();
            if (x > 0)
            {
                return Content("修改成功");
            }
            return Content("修改失败");
        }
        /// <summary>
        /// 单独删除菜单（若菜单下有分支，无法删除）
        /// </summary>
        /// <param name="id">菜单主键</param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Del(string id)
        {
            UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);
            DC.DeleteEntity(unit);
            DC.CascadeDelete(unit);
            int x = DC.SaveChanges();
            if (x > 0)
            {
                return Content("删除成功");
            }
            return Content("删除失败");

        }
        /// <summary>
        /// 删除菜单，（若菜单下有分支，连分支一起删除）
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult DelAll(string id)
        {
            UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);
            DC.CascadeDelete(unit);
            int x = DC.SaveChanges();
            if (x > 0)
            {
                return Content("删除成功");
            }
            return Content("删除失败");
        }
    }

四、添加视图，完成树形菜单操作。

和平时使用cshtml页面一样，使用强类型视图，值得注意是WTM框架独有的TagHelper封装。

如果是采用BaseCRUDVM<T>的视图类，那么使用T类中的字段只需要使用Entity.字段名就可以了。无需二次编写代码。

@model HiddenPerils.ViewModel.HomeVMs.TestTreeVM
@{
    ViewData["Title"] = "Index";
}

<h1>树形菜单管理</h1>


<wt:treecontainer items="AllParents" click-func="SetText">

    <wt:textbox field="Entity.UnitWorkName" />
    <wt:hidden field="Entity.ID" />


    <wt:row items-per-row="ItemsPerRowEnum.Six">
        <wt:SubmitButton Text="添加顶级菜单" IsLink="false" Click="AddTop()" />
        <wt:SubmitButton Text="删除" IsLink="false" Click="Del()" />
        <wt:SubmitButton Text="添加字节点" IsLink="false" Click="Add()" />
        <wt:SubmitButton Text="修改名称" IsLink="false" Click="Edit()" />
        <wt:SubmitButton Text="删除全部（含子节点）" IsLink="false" Click="DelAll()" />
    </wt:row>




</wt:treecontainer>

<script>
    function SetText(data) {
        $('#TestTreeVM_Entity_UnitWorkName').val(data.data.title);
        $('#TestTreeVM_Entity_ID').val(data.data.id);
    }
    function AddTop() {
        var name = $('#TestTreeVM_Entity_UnitWorkName').val();
        $.ajax({
            url: '/TestVM/AddTop',
            type: 'POST',
            // 设置的是请求参数
            data: { name: name },
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'text',
            success: function (res) {
                
                if (res == '添加成功') {
                    openWindow(res);
                }
            }
        })

    }
    function Del() {
        var id = $('#TestTreeVM_Entity_ID').val();
        $.ajax({
            url: '/TestVM/Del',
            type: 'POST',
            // 设置的是请求参数
            data: { id: id },
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == '删除成功') {
                    window.location.reload()
                }
            }
        })
    }
    function Add() {
        var id = $('#TestTreeVM_Entity_ID').val();
        var name = $('#TestTreeVM_Entity_UnitWorkName').val();
        $.ajax({
            url: '/TestVM/Add',
            type: 'POST',
            // 设置的是请求参数
            data: { id: id, name: name },
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == '添加成功') {
                    window.location.reload()
                } else {
                    alert(res)
                }
            }
        })
    }

    function Edit() {
        var id = $('#TestTreeVM_Entity_ID').val();
        var name = $('#TestTreeVM_Entity_UnitWorkName').val();
        $.ajax({
            url: '/TestVM/Edit',
            type: 'POST',
            // 设置的是请求参数
            data: { id: id, name: name },
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == '修改成功') {
                    window.location.reload()
                } else {
                    alert(res)
                }
            }
        });

    }
    function DelAll() {
        var id = $('#TestTreeVM_Entity_ID').val();
        var name = $('#TestTreeVM_Entity_UnitWorkName').val();
        $.ajax({
            url: '/TestVM/DelAll',
            type: 'POST',
            // 设置的是请求参数
            data: { id: id, name: name },
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'text',
            success: function (res) {
                console.log(res);
                if (res == '删除成功') {
                    window.location.reload()
                } else {
                    alert(res)
                }
            }
        });
    }
    function openWindow(title) {
        layui.use('layer', function () {
            layer.open({
                type: 1
                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                , id: 'layerDemo' + title //防止重复弹出
                , content: '<div style="padding: 20px 100px;">' + title + '</div>'
                , btn: '关闭全部'
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                , yes: function () {
                    window.location.reload()
                }
            });
        });
    }
</script>

最终效果

结尾：

1、树形菜单官方文档地址：点击进入

2、树形导航官当文档地址：点击进入