jquery easyui tree组件的数据来自后台动态获取,展示到前端时text后面带上指定的图标
时间: 2024-03-21 08:38:52 浏览: 107
easyui tree
好的,关于您的问题,您可以在后台返回的数据中为每个节点添加一个`iconCls`字段,用于指定该节点应该显示的图标。例如:
```json
[
{
"id": 1,
"text": "节点1",
"iconCls": "icon-folder",
"children": [
{
"id": 2,
"text": "节点1.1",
"iconCls": "icon-file"
},
{
"id": 3,
"text": "节点1.2",
"iconCls": "icon-file"
}
]
},
{
"id": 4,
"text": "节点2",
"iconCls": "icon-folder",
"children": [
{
"id": 5,
"text": "节点2.1",
"iconCls": "icon-file"
},
{
"id": 6,
"text": "节点2.2",
"iconCls": "icon-file"
}
]
}
]
```
在上面的示例中,每个节点都包含一个`iconCls`字段,用于指定该节点应该显示的图标。`iconCls`的值是一个CSS类名,您需要在前端的CSS文件中定义这些类名对应的图标样式。
然后,在前端使用jQuery EasyUI Tree组件时,在初始化时指定`data`选项即可:
```javascript
$('#tree').tree({
data: [
{
id: 1,
text: '节点1',
iconCls: 'icon-folder',
children: [
{
id: 2,
text: '节点1.1',
iconCls: 'icon-file'
},
{
id: 3,
text: '节点1.2',
iconCls: 'icon-file'
}
]
},
{
id: 4,
text: '节点2',
iconCls: 'icon-folder',
children: [
{
id: 5,
text: '节点2.1',
iconCls: 'icon-file'
},
{
id: 6,
text: '节点2.2',
iconCls: 'icon-file'
}
]
}
]
});
```
这样就可以根据后台返回的数据,动态生成带有图标的树形菜单了。
阅读全文