easyUI tree 自定义图标

文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115

近期由于项目中需要使用easyui tree树形列表，并在系统中动态配置节点的图标，根据官方demo，配置图标只能使用iconCls树形来对每个节点进行图标的设置，这使得在数据库存储中需要存储icon.css中的类名（类似icon-save）或者自定义的类名，同时，这需要提前在系统中对不同的图标url设置好不同的类名，如果图片不在系统中已知，则无法改变图标。同时，由于本系统中需求比较特殊：各个功能在系统中进行配置，每一个功能是一个节点，每个节点需要可配置图标，而且要求数据库中存储的是图标的文件路径，数据库中结构如下：

图标路径存储在WebPath字段中，要求根据其路径生成图标。对此，初步想法是测试
1、直接将该url赋值给iconCls字段，因为查阅资料可以发现extjs等部分控件可以将url直接赋值给iconCls字段，对此进行测试：
在Dreamweaver 中添加如下代码，直接初始化一个tree，并添加一个img确保图标路径正确

<h2>Editable Tree</h2><p>Click the node to begin edit, press enter key to stop edit or esc key to cancel edit.</p><div style="margin:20px 0;"></div><div class="easyui-panel" style="padding:5px"><ul id="tt" class="easyui-tree" data-options="url: 'tree_data1.json',method: 'get',animate: true,onClick: function(node){$(this).tree('beginEdit',node.target);}"></ul></div><img src="01.png"/>

tree_data1.json中数据如下：

[{"id":1,"text":"Folder1",**"iconCls":"01.png",**"children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]
},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]
}]

设置一个节点的iconCls，如上代码中加粗部分，查看显示效果，结果如下图：

发现修改的第一个节点Folder1图标还是默认的，说明并没有效果，F12查看此时的DOM节点，如下图：

发现类名为tree-icon的span节点上只是多了一个 01.png的类名，说明iconCls的配置只是将配置的字符以类名直接添加到span上，显然不会有任何效果。

2、经过上面的测试，发现url直接赋值的形式无法解决，但是根据上面的DOM结构可以看出，设置的图标就是将类名为tree-icon的span元素的background属性设置为指定的图片，而且默认的样式都是采用外部连接方式进行设置的。这样，根据CSS的优先级，只需要通过内联方式设置background样式将background属性覆盖即可。结合API和对各个事件、方法的测试，选定formatter属性对数据进行一定的处理，在调试过程中发现formatter属性对应的方法传递node参数，而且node中有一个属性“domId”即为最终DOM加载完成后树节点的Id,则可以通过该id找到子节点中类名为tree-icon的span元素，对它的background进行设置，代码如下

$.ajax({type: "POST",url: "/Service/LSPRTAPI.asmx/GetMenuData",contentType: "application/json; charset=utf-8",data:'{"parentNo":"'+parentNo+'"}',dataType: 'json',success: function (data) {var icon = [];var paradata = eval('(' + data.d + ')');$('#tree' + parentNo).tree({data: paradata,onSelect: function (node) {if (node==null || node.Url == null || node.Url.length<=0) {return;}LoadUrl(node.Url, node.text);},formatter: function (node) {icon.push({ "domId": node.domId, "webPath": node.Webpath });return node.text;}});//根据url修改图标，使用内联样式覆盖外部链接$.each(icon, function (index, val) {$('#' + val.domId + ' .tree-icon').css("background", "url(" + val.webPath + ") no-repeat center center");});}

根据调试得到返回的JSON数据如下：

[{Parentno: "122",id: "123",text: "出让方模块",Fk_App: "LSPRT",Url: "",Webpath: "",children: [{Parentno: "123",id: "130",text: "出让用户管理",Fk_App: "LSPRT",Url: "admin\/BidTransferUser.aspx?ustate=0",Webpath: "img\/no.png"},{Parentno: "123",id: "131",text: "出让信息审核",Fk_App: "LSPRT",Url: "admin\/BidTransferAudit.aspx?ustate=0",Webpath: "img\/no.png"},{Parentno: "123",id: "132",text: "出让挂牌设置",Fk_App: "LSPRT",Url: "admin\/BidTransferBoard.aspx?ustate=1",Webpath: "img\/01.png"}]},{Parentno: "122",id: "134",text: "受让方模块",Fk_App: "LSPRT",Url: "",Webpath: "",children: [{Parentno: "134",id: "2116",text: "受让用户管理",Fk_App: "LSPRT",Url: "admin\/BidAssigneeUser.aspx?ustate=0",Webpath: "img\/01.png"},{Parentno: "134",id: "2117",text: "受让信息审核",Fk_App: "LSPRT",Url: "admin\/BidAssigneeAudit.aspx?ustate=0",Webpath: "img\/01.png"},{Parentno: "134",id: "2118",text: "取消受让审核",Fk_App: "LSPRT",Url: "admin\/BidAssigneeCancel.aspx?ustate=1",Webpath: "img\/01.png"}]},{Parentno: "122",id: "2119",text: "组织交易",Fk_App: "LSPRT",Url: "admin\/BiddingList01.aspx",Webpath: "img\/01.png"},{Parentno: "122",id: "2120",text: "鉴证书模块",Fk_App: "LSPRT",Url: "",Webpath: "",children: [{Parentno: "2120",id: "2121",text: "鉴证书管理",Fk_App: "LSPRT",Url: "ab\/abList01.aspx",Webpath: "img\/01.png"},{Parentno: "2120",id: "2122",text: "鉴证书变更管理",Fk_App: "LSPRT",Url: "ab\/abReplaceList01.aspx",Webpath: "img\/01.png"}]}
]

最后效果如图：

这里有几点需要注意：
1、在使用formatter属性时，tree是还没有生成DOM节点，所以这里只是将domId和Webpath进行存储，等树加载完成后，再获取DOM节点进行CSS属性设置
2、tree的onSuccessLoad事件触发时，是数据加载完成，并不是tree的DOM节点已经生成
3、测试时发现，图标最好是16*16大小，太大可能会显示不正常

转载于:https://www.cnblogs.com/huaixiaonian/p/9116544.html

easyUI tree 自定义图标相关推荐

easyui 添加自定义图标
最近用easyui发现图标挺少的,其实可以另外添加一个css样式,不过我偷懒,直接在easyui的css里面添加了. 下面是目录: icon.css是easyui的默认样式文件,ext_icons文件 ...
easyui tree去掉文件夹icon图标
文章目录 easyui tree去掉文件夹节点图标效果图 js代码 html easyui tree去掉文件夹节点图标效果图 js代码 html代码效果图 js代码 /************* ...
antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
使用EasyUI Tree异步加载JSON数据生成树
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...
适用于zTree 、EasyUI tree、EasyUI treegrid
#region System.Text.StringBuilder b_appline = new System.Text.StringBuilder(); Syst ...
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统（52）-美化EasyUI皮肤和图标
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标系列目录我很久以前就想更新系统的皮肤功能,Easyui 自带的 ...
webix.tree 修改图标
今天用工作的时候改变了easyui的tree的图标,回家试了下webix tree的图标修改 .文档里面给出了个下面的demo. webix.ui({view:"tree",typ ...
Jquery easyui tree的使用
这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: [html] view plain copy print ? <ul ...
easyUI tree 异步加载数据
easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载. 先看一下实现的效果: 整个过程采用的是简单三层架构,无论采用哪种模式,只要 ...

easyUI tree 自定义图标

easyUI tree 自定义图标相关推荐

最新文章

热门文章