Easyui 之 Treegrid 笔记
EasyUI——基于jQuery的界面插件宝库
EasyUI，一个基于jQuery的强大用户界面插件集合，为创建现代化、互动性强的JavaScript应用程序提供了丰富的功能。无需大量编码，只需简单的HTML标记，即可定义独特而富有吸引力的用户界面。它完美支持HTML5网页，为开发者节省大量开发时间和成本。初次接触EasyUI时，我曾遇到一些困惑和弯路。在此分享我的经验和学习心得。
在使用EasyUI中的TreeGrid组件时，有几个关键点需要注意：
必须明确根节点的定义。每个TreeGrid都需要一个或多个根节点作为起点。这些根节点的父节点属性无需定义，或者可以设为0。关于子节点的父节点属性，有一个重要的命名规范：“_parentId”。这个属性在建立树形结构时至关重要，必须在后台数据输出时遵循此命名规则。至于后台数据的输出格式，虽然树形结构的json数据是一种常见选择，但实际上并不需要严格按照树形结构输出数据。只要数据格式符合前台TreeGrid组件的需求，就可以顺利建立树形并输出到页面。
举个例子，以下是一个简单的数据列表：
```json
{
"total": 17,
"rows": [
{"id": 3, "goodsid": 36120, "Qty": 2.0000, "Rem": "15"},
// 其他数据项...
]
}
```
在后台代码中，我们可以根据实际需求进行数据整理和输出。例如：
```csharp
var pls = ListAll(p.PartChild).ToList(); // 获取数据列表
List
foreach(var item in pls) { // 遍历数据列表
if(item.PartParent == p.PartChild) { // 判断是否为符合条件的子节点
result.Add(new { id = item.ListID, goodsid = item.PartChild, Qty = item.Qty, Rem = item.Rem }); // 添加数据到输出列表
}
}
// 注意：在生成树形数据时，无需特别处理成树形结构，只要符合前台TreeGrid组件的需求即可。调用生成树形数据的方法是不必要的。
```
以上就是我在使用EasyUI TreeGrid时的一些经验和心得分享。希望对大家有所帮助，更好地利用EasyUI打造出色的用户界面。利用Easyui的自动建树功能构建层级结构
在前端开发中，我们常常需要展示具有层级关系的数据，如产品目录、组织架构等。Easyui框架中的Treegrid组件可以帮助我们轻松地实现这种需求。本文将介绍如何使用Easyui的Treegrid组件根据parentID自动构建树形结构。
我们先看一段代码片段，它描述了如何在服务器端处理数据，为Treegrid组件提供所需的数据格式。
```csharp
// 根据item的父节点构建树形结构
if (item.ParentID == 0) // 如果是顶级节点
{
// 创建节点并添加到结果集中
var l = new
{
id = item.ListID,
text = item.PartChild,
_parentId = 0,
Qty = item.Qty,
Rem = item.Rem,
children = BuildTree(pls, item.PartChild) // 递归调用构建子节点
};
result.Add(l);
}
else // 非顶级节点则查找其父节点并构建关联
{
var parent = pls.Where(a => a.PartChild == item.PartParent).FirstOrDefault(); // 找到父节点
result.Add(new
{
id = item.ListID,
goodsid = item.PartChild,
_parentId = parent != null ? parent.ListID : null, // 确保有父节点ID关联
Qty = item.Qty,
Rem = item.Rem
});
}
```
接下来，我们在前端View中使用Treegrid组件展示这些数据。确保已引入所需的JS库（如jquery.easyui-1.4.3.min.js和jquery-1.11.3.min.js）。以下是HTML代码示例：
```html
| goodsid | ListID | parent |
|---|
```
确保后端服务能够按照Treegrid组件所需的数据格式返回数据。通常，这需要返回包含层级关系的JSON数据。Easyui的Treegrid组件会自动这些数据并展示为树形结构。如果配置正确，你将看到一个能够根据parentID自动构建树形结构的界面。希望这对大家有所帮助！如有任何疑问或需要进一步指导，请随时咨询。记得在使用前确保你的项目已经引入了Easyui的相关库和依赖。
编程语言
- Easyui 之 Treegrid 笔记
- jquery读取xml文件实现省市县三级联动的方法
- javascript先序遍历DOM树的方法
- webpack与SPA实践之管理CSS等资源的方法
- jQuery+PHP实现微信转盘抽奖功能的方法
- Bootstrap基本组件学习笔记之进度条(15)
- 浅析Nodejs npm常用命令
- PHP生成唯一ID之SnowFlake算法
- Javascript中document.referrer隐藏来源的方法
- laravel配置Redis多个库的实现方法
- php判断用户是否手机访问代码
- 用Ajax来控制书签和回退按钮的代码
- Angular 4.x 动态创建表单实例
- 基于zTree树形菜单的使用实例
- vue iView 上传组件之手动上传功能
- Angular如何引入第三方库的方法详解