Easyui Treegrid改变默认图标的方法

关于Easyui Treegrid自定义图标的方法

通常情况下，Easyui Treegrid的图标默认为文件夹与文件的形式。如果你想要改变这些默认图标，可以通过在json文本中加入iconCls属性来实现。

例如，在你的json数据中，可以为每一行定义一个唯一的iconCls，如"icon-ok"、"icon-design"等。这些类名需要对应到你在icon.css中定义的样式。

以下是样例数据：

```json

{

"total": 7,

"rows": [

{"id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok"},

{"id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed", "iconCls": "icon-design"},

// 其他行数据...

],

"footer": [

{"name": "Total Persons:", "persons": 7, "iconCls": "icon-sum"}

]

}

```

接下来，你需要在icon.css中定义这些类名对应的图标样式。比如：

```css

.icon-ok {

background-image: url('path/to/your/icon-ok.png');

}

.icon-design {

background-image: url('path/to/your/icon-design.png');

}

// 其他类名样式...

```

请确保将图标文件放置在正确的路径下，并在CSS中正确引用。

完成以上步骤后，treegrid应该会显示你自定义的图标了。如果仍然显示默认图标，请检查页面中引入icon.css和easyui.css的顺序，确保easyui.css在前，icon.css在后，以避免样式被覆盖。

jQuery EasyUI TreeGrid：增删改查操作指南

在数字化时代，数据展示与处理成为众多网站的核心功能之一。对于结构化数据的展示与管理，TreeGrid无疑是一种高效的方式。今天，我们将以狼蚁网站为例，详细介绍如何使用jQuery EasyUI的TreeGrid来实现数据的增删改查操作。

让我们了解一下如何格式化进度显示。在JavaScript中，我们可以定义一个名为`formatProgress`的函数，根据给定的值动态生成一个带有边框和背景色的进度条。这种视觉效果将使得数据展示更为生动和直观。

接下来，我们将如何删除行数据。在删除操作前，我们首先会检查是否有选中的行，如果有，则获取其ID并调用`treegrid`的`remove`方法来删除该行。删除完成后，我们还需要重新加载页脚数据，以反映新的数据状态。点击删除按钮时，操作按钮的样式会发生改变，表示当前处于不可操作状态。

编辑数据也是TreeGrid的一个重要功能。通过调用`treegrid`的`beginEdit`方法，我们可以开始编辑指定行的数据。与删除操作类似，编辑时也会获取选中行的ID并对其进行标记。操作按钮的样式也会发生变化。

对于新增数据，我们需要先展开指定的父级节点（如果有的话），然后定义一个新的数据对象并加入到TreeGrid中。新数据的ID是动态的，由当前子节点的数量决定。添加完成后，我们会进入编辑状态以便进一步修改新添加的数据。同样地，操作按钮的样式也会随之变化。

保存和取消编辑也是重要的操作。在保存时，我们会结束编辑状态并计算所有行的总人数（假设每行有一个人数字段）。然后更新页脚数据以反映总人数。取消编辑时则会直接结束编辑状态。无论是保存还是取消编辑，操作按钮的样式都会恢复成可点击的状态。

在页面的下方，我们看到了两个操作按钮：保存和取消。这两个按钮分别对应保存和取消编辑的操作，并且使用了EasyUI的样式库来呈现特定的视觉效果。通过JavaScript代码实现了与这些操作的关联。

使用jQuery EasyUI的TreeGrid可以轻松地实现数据的增删改查操作。无论是对于后台管理还是前台展示，它都是一个强大而实用的工具。狼蚁网站通过运用这一技术，为用户提供了一个直观、高效的数据交互体验。希望你能更好地理解和运用这一技术。