Easyui Treegrid是一款基于jQuery的UI库，用于创建具有树形结构的表格。它结合了表格和树的优点，使得数据展示既清晰又有层次感。在实际应用中，我们可能需要根据业务需求定制Treegrid的外观，包括改变其默认的图标。本文将详细讲解如何更改Easyui Treegrid的默认图标。
Easyui Treegrid的默认图标通常是表示文件或文件夹的图形。如果希望自定义图标，可以在JSON数据中添加`iconCls`属性。例如，在提供的内容中，我们看到一个JSON对象：
```json
{
"total": 7,
"rows": [
{
"id": 1,
"name": "All Tasks",
"begin": "3/4/2010",
"end": "3/20/2010",
"progress": 60,
"iconCls": "icon-ok" // 这里指定了自定义图标类名
},
...
],
"footer": [
{
"name": "Total Persons:",
"persons": 7,
"iconCls": "icon-sum" // 同样可以为表尾行设置图标
}
]
}
```
`iconCls`字段的值应对应一个CSS类名，这个类名需要在CSS文件中定义，以指定图标样式。比如，`icon-ok`可能是代表任务完成的图标，而`icon-sum`可能是用于汇总的图标。
接下来，我们需要创建或修改`icon.css`文件，定义这些自定义类的样式。通常，这涉及到设置`background-image`属性，引用图标图片。例如：
```css
.icon-ok {
background-image: url('path/to/your/icon-ok.png') !important;
width: 16px;
height: 16px;
}
.icon-sum {
background-image: url('path/to/your/icon-sum.png') !important;
width: 16px;
height: 16px;
}
```
确保图标图片路径正确，并且图片尺寸适应CSS中定义的宽度和高度。
此外，需要注意页面中CSS文件的引入顺序。`easyui.css`应该在`icon.css`之前引入，因为如果`icon.css`在前，其样式可能会被`easyui.css`中的默认样式覆盖，导致图标无法显示。正确的引入顺序应该是：
```html
<link rel="stylesheet" href="path/to/easyui.css">
<link rel="stylesheet" href="path/to/icon.css">
```
除了基本的图标替换，内容中还提及了jQuery EasyUI Treegrid的增删改查操作。这部分代码展示了如何实现数据的动态管理：
- `deleteRow`函数用于删除选中的行，通过`treegrid('remove')`方法执行删除操作，并重新加载页脚信息。
- `edit`函数则用于开始编辑选中的行，通过`treegrid('beginEdit')`启动编辑模式。
这些函数可以通过按钮或其他交互元素触发，实现对Treegrid数据的实时操作。
自定义Easyui Treegrid的图标涉及到修改JSON数据以包含`iconCls`，编写对应的CSS样式，以及注意CSS文件的引入顺序。同时，配合JavaScript代码，可以实现Treegrid的数据操作功能，增强用户体验。理解并掌握这些知识点，有助于在实际项目中灵活运用Easyui Treegrid。
