easyUI tree自定义展开,收缩图标

  easyUI tree自定义展开,收缩图标.easyUI tree数据节点有iconCls配置可以给节点配置自定义图标,iconCls自定义图标后,对于有子节点的节点,展开和收缩状态都显示的是同一个图标,要想这个节点展开,收缩状态显示不同的图标,需要修改源代码来实现。

  本示例居于jquery-easyui-1.4.4修改,效果如下所示,其他版本的修改应该差不多,找不到下面提到的关键字自己看dom结构来定位或者通过浏览器开发工具的事件窗口定位点击事件位置。

easyUI tree自定义展开,收缩图标
easyUI tree展开状态自定义图标

easyUI tree自定义展开,收缩图标
easyUI tree收缩状态自定义图标

easyUI tree自定义展开,收缩图标实现办法如下,用编辑工具打开jquery.easyui.min.js

1)修改图标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自定义展开,收缩图标

评论(0)Web开发网
阅读(539)喜欢(0)不喜欢(2)easyui开发技巧