jquery easyui tree组件的数据来自后台动态获取,展示到前端时text带星号的替换指定的图标
时间: 2024-03-21 21:38:21 浏览: 59
easyui tree
您可以在后台动态获取数据之后,在服务器端对text字段进行处理,将需要替换为指定图标的文本字段替换为指定的HTML代码,比如将文本字段中的星号替换为一个span标签,然后在span标签中设置一个指定的class,同时设置背景图片为需要的图标。
具体实现可以参考以下示例代码:
```javascript
// 后台获取的数据
var data = [
{
id: 1,
text: "节点1",
children: [
{
id: 11,
text: "节点1.1"
},
{
id: 12,
text: "节点1.2"
}
]
},
{
id: 2,
text: "节点2",
children: [
{
id: 21,
text: "节点2.1*"
},
{
id: 22,
text: "节点2.2"
}
]
}
];
// 处理数据,将text中的星号替换为指定的图标
for (var i = 0; i < data.length; i++) {
var node = data[i];
if (node.text.indexOf("*") >= 0) {
node.text = node.text.replace("*", "<span class='icon-star'></span>");
}
if (node.children) {
for (var j = 0; j < node.children.length; j++) {
var childNode = node.children[j];
if (childNode.text.indexOf("*") >= 0) {
childNode.text = childNode.text.replace("*", "<span class='icon-star'></span>");
}
}
}
}
// 渲染tree组件
$('#tree').tree({
data: data
});
```
在上面的代码中,我们首先获取后台返回的数据,然后遍历数据,将text中的星号替换为指定的HTML代码,最后使用EasyUI中的tree组件渲染数据。在HTML中,我们需要定义一个.icon-star的CSS类,用来设置指定的图标样式。
```css
.icon-star {
display: inline-block;
width: 16px;
height: 16px;
background: url('star.png') no-repeat center center;
}
```
在上面的代码中,我们定义了一个.icon-star的CSS类,设置了指定的图标样式,其中star.png是指定的图标文件。您可以根据实际需求修改CSS样式和图标文件路径。
阅读全文