EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例


下面是一个基于ASP.NET和EasyUI框架实现权限树或目录树导航的简单示例。这里我们将使用EasyUI的`Tree`组件来展示树形结构,并使用ASP.NET的Web服务(例如Web API或Web Forms中的Ajax方法)来提供数据。

### 1. 前端页面 (ASPX或HTML)

首先,在ASP.NET的Web页面中引入EasyUI的CSS和JS文件。你可以从EasyUI的官方网站下载这些文件,或者使用CDN链接。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限树示例</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <ul id="tt" class="easyui-tree" data-options="
        url:'/GetData',
        method:'get',
        animate:true,
        onClick:function(node){
            alert(node.text); // 点击节点时执行的操作
        }
    "></ul>
</body>
</html>

在这个例子中,`#tt` 是我们为Tree组件指定的元素ID。我们通过`data-options`属性来配置Tree组件,包括设置数据的URL(这里假设是`'/GetData'`,你需要在ASP.NET中定义这个URL对应的方法),加载数据的方法(这里使用GET),是否启用动画等。

### 2. 后端数据提供 (ASP.NET Web API或Ajax方法)

假设你使用的是ASP.NET Web API,你可以创建一个API控制器来提供树形数据。


using System.Collections.Generic;
using System.Web.Http;

namespace YourNamespace.Controllers
{
    public class TreeDataController : ApiController
    {
        [HttpGet]
        [Route("api/GetData")]
        public IHttpActionResult GetData()
        {
            var nodes = new List<TreeNode>
            {
                new TreeNode { id = 1, text = "节点1", state = "open", children = new List<TreeNode>
                {
                    new TreeNode { id = 11, text = "子节点1-1" },
                    new TreeNode { id = 12, text = "子节点1-2" }
                }},
                new TreeNode { id = 2, text = "节点2" }
            };

            return Ok(nodes);
        }

        public class TreeNode
        {
            public int id { get; set; }
            public string text { get; set; }
            public string state { get; set; } // 用于控制节点的展开/折叠状态
            public List<TreeNode> children { get; set; } // 子节点列表
        }
    }
}

请注意,这里我们定义了`TreeNode`类来表示树中的节点,并在`GetData`方法中模拟了一些数据。你需要根据自己的业务逻辑来生成这些数据。

### 3. 配置Web API路由

确保你的ASP.NET Web API项目已经正确配置了路由,以便能够访问`GetData`方法。这通常在`WebApiConfig.cs`文件中设置。

### 4. 运行和测试

运行你的ASP.NET应用程序,并在浏览器中打开包含Tree组件的页面。你应该能看到一个树形结构,并且可以通过点击节点来触发`onClick`事件。

请注意,上述代码示例是基于EasyUI和ASP.NET Web API的,如果你使用的是ASP.NET的其他技术栈(如ASP.NET MVC或ASP.NET Web Forms),你需要对后端代码进行适当的调整。但是,前端部分的代码(HTML和JavaScript)应该是通用的。