在本文中，我们将深入探讨如何使用EasyUI框架与ASP.NET技术来实现数据网格（datagrid）与数据库的交互，以及如何构建动态的树形结构（tree）来加载数据库数据。EasyUI是一个基于jQuery的轻量级前端框架，它提供了一系列丰富的UI组件，包括datagrid和tree，用于快速构建用户界面。而ASP.NET是微软开发的一种Web应用程序框架，用于构建动态网站、Web应用和Web服务。
**EasyUI Datagrid与数据库的连接**
1. **初始化Datagrid**: 在HTML页面中，我们需要定义一个div元素，将其ID与EasyUI的datagrid绑定。然后通过JavaScript设置datagrid的属性，如列定义、数据源等。例如：
```html
<table id="dg" title="数据表" class="easyui-datagrid"></table>
```
2. **数据源配置**: EasyUI datagrid可以通过Ajax获取数据，我们可以使用ASP.NET来处理请求并返回JSON格式的数据。在服务器端，创建一个ASP.NET MVC控制器或WebAPI方法，查询数据库并返回结果。
```csharp
[HttpGet]
public ActionResult GetData()
{
var data = context.MyTable.ToList(); // 查询数据库
return Json(data, JsonRequestBehavior.AllowGet);
}
```
3. **配置Ajax请求**: 使用EasyUI的`datagrid`方法，配置Ajax请求以获取服务器数据。
```javascript
$(function () {
$('#dg').datagrid({
url: '/Home/GetData', // 调用ASP.NET控制器方法
columns: [[// 列定义
{ field: 'id', title: 'ID' },
{ field: 'name', title: '名称' }
]]
});
});
```
4. **操作功能集成**: EasyUI datagrid支持增删改查操作，可以通过设置datagrid的`onDblClickRow`、`onClickRow`等事件，配合ASP.NET实现具体业务逻辑。
**EasyUI Tree加载数据库数据**
1. **初始化Tree**: 与datagrid类似，创建一个div元素并绑定到EasyUI tree。
```html
<ul id="tree"></ul>
```
2. **数据源转换**: ASP.NET端需要将数据库中的数据转换为适合tree的数据格式，通常是JSON数组。
```csharp
[HttpGet]
public ActionResult GetTreeData()
{
var nodes = context.MyTreeTable.Select(t => new {
id = t.Id,
text = t.Name,
children = t.Childrens // 子节点集合
}).ToList();
return Json(nodes, JsonRequestBehavior.AllowGet);
}
```
3. **加载数据到Tree**: 在JavaScript中，调用`tree`方法并配置Ajax请求。
```javascript
$(function () {
$('#tree').tree({
url: '/Home/GetTreeData', // 调用ASP.NET获取树数据的方法
onClick: function (node) { // 点击节点事件
// 实现节点点击后的业务逻辑
}
});
});
```
通过以上步骤，我们可以利用EasyUI的datagrid和tree组件，结合ASP.NET技术，实现与数据库的交互，为开发初学者提供了一个基础但实用的Web应用框架。在实际项目中，还可以根据需求扩展功能，如添加分页、搜索、排序等。记住，学习这些技术的关键在于理解和实践，不断探索和优化，才能更好地驾驭它们。
renyue_19832015-06-10还不错，主要是没有数据库。可以作为参考。
qq_267380972015-05-06没数据库的呢 怎么用
