easyUI tree自定义展开，收缩图标
easyUI tree自定义展开，收缩图标．easyUI tree数据节点有iconCls配置可以给节点配置自定义图标，iconCls自定义图标后，对于有子节点的节点，展开和收缩状态都显示的是同一个图标，要想这个节点展开，收缩状态显示不同的图标，需要修改源代码来实现。
本示例居于jquery-easyui-1.4.4修改，效果如下所示，其他版本的修改应该差不多，找不到下面提到的关键字自己看dom结构来定位或者通过浏览器开发工具的事件窗口定位点击事件位置。
easyUI tree展开状态自定义图标
easyUI tree收缩状态自定义图标
easyUI tree自定义展开，收缩图标实现办法如下，用编辑工具打开jquery.easyui.min.js
１）修改图标span节点增加自定义iconcls属性记录住配置的自定义图标属性值。搜索“tree-icon tree-folder”，共有4处，分别是加载服务器数据和html代码生成的
//第一处，大概在2450行，增加iconcls
if(item.state=="closed"){
cc.push("<span class=\"tree-hit tree-collapsed\"></span>");
cc.push("<span class=\"tree-icon tree-folder " + (item.iconCls ? item.iconCls : "") + "\" iconcls='" + (item.iconCls ? item.iconCls : "") + "'></span>");/////////
}else{
if(item.children&&item.children.length){
cc.push("<span class=\"tree-hit tree-expanded\"></span>");
cc.push("<span class=\"tree-icon tree-folder tree-folder-open " + (item.iconCls ? item.iconCls : "") + "\" iconcls='" + (item.iconCls ? item.iconCls : "") + "'></span>");///////////
}else{
cc.push("<span class=\"tree-indent\"></span>");
cc.push("<span class=\"tree-icon tree-file " + (item.iconCls ? item.iconCls : "") + "'></span>");
_1c8=true;
}
//第二处，大概在11906行，增加iconcls
if(row.state=="closed"){
cc.push("<span class=\"tree-hit tree-collapsed\"></span>");
cc.push("<span class=\"tree-icon tree-folder " + (row.iconCls ? row.iconCls : "") + "\" iconcls='" + (row.iconCls ? row.iconCls : "") + "'></span>");/////
}else{
if(row.children&&row.children.length){
cc.push("<span class=\"tree-hit tree-expanded\"></span>");
cc.push("<span class=\"tree-icon tree-folder tree-folder-open " + (row.iconCls ? row.iconCls : "") + "\" iconcls='" + (row.iconCls ? row.iconCls : "") + "'></span>");////
}else{
cc.push("<span class=\"tree-indent\"></span>");
cc.push("<span class=\"tree-icon tree-file " + (row.iconCls ? row.iconCls : "") + "\" iconcls='" + (row.iconCls ? row.iconCls : "") + "'></span>");
}
2）给点击事件添加自定义图标样式的展开样式。注意代码位置，因为还有treegrid继承自tree，也会有移除tree-folder-open的代码
搜索“removeClass("tree-folder-open")”，此处是移除收缩时的图标
var iconcls;
if (iconcls = hit.next().attr('iconcls')) hit.next().removeClass(iconcls + "-open");
hit.next().removeClass("tree-folder-open");//此行大概在1867行，添加上面2行，用于移除自定义展开图标的样式
搜索“addClass("tree-folder-open")”，添加自定义图标样式
hit.next().addClass("tree-folder-open");//大概1807行，展开事件，增加下面2行自定义图标的open样式
var iconcls;
if (iconcls = hit.next().attr('iconcls')) hit.next().addClass(iconcls + "-open");
示例居于asyui/jquery-easyui-1.4.4/demo/tree/icons.html修改。easyUI tree自定义展开，收缩图标样式，注意展开的样式规律为收缩图标的名称后接-open
<style>
.myicon{background-image:url(11.png);background-position:0 0}
.myicon-open{background-image:url(22.png);}
</style>
<ul class="easyui-tree" data-options="url:'tree_data2.json',method:'get',animate:true"></ul>
tree_data2.json增加iconCls配置
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed","iconCls":"myicon",///....
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyUI tree自定义展开，收缩图标