【zTree】修改节点图标

【需求】

                 

        如图所示：在一个页面里，左右两棵树，要求右侧的树正常用“文件夹”和“纸张”图标显示树的父子节点，左侧的树由于只有子节点，用其他样式图标来替换“纸张”样式图标。

        

【实现】

       思路一：

       由于该项目前端使用easu-ui，则修改easy-ui中的tree的css样式即可（微博中看到的说牛一点的人都是直接修改框架然后自己用的），通过查询jquery-easyui的源码，“jquery-easyui-1.2.4.rar\jquery-easyui-1.2.4\themes\default\easyui.css”文件中，关于tree的样式是这样的：

.tree{
	font-size:12px;
	margin:0;
	padding:0;
	list-style-type:none;
}
.tree li{
	white-space:nowrap;
}
.tree li ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
.tree-hit{
	cursor:pointer;
}
.tree-expanded{
	display:inline-block;
	width:16px;
	height:18px;
	vertical-align:middle;
	background:url('images/tree_arrows.gif') no-repeat -18px 0px;
}
.tree-expanded-hover{
	background:url('images/tree_arrows.gif') no-repeat -50px 0px;
}
.tree-collapsed{
	display:inline-block;
	width:16px;
	height:18px;
	vertical-align:middle;
	background:url('images/tree_arrows.gif') no-repeat 0px 0px;
}
.tree-collapsed-hover{
	background:url('images/tree_arrows.gif') no-repeat -32px 0px;
}
.tree-folder{
	display:inline-block;
	background:url('images/tree_folder.gif') no-repeat;
	width:16px;
	height:18px;
	vertical-align:middle;
}
.tree-folder-open{
	background:url('images/tree_folder_open.gif') no-repeat;
}
.tree-file{
	display:inline-block;
	background:url('images/tree_file.gif') no-repeat;
	width:16px;
	height:18px;
	vertical-align:middle;
}
.tree-loading{
	background:url('images/tree_loading.gif') no-repeat;
}
.tree-title{
	display:inline-block;
	text-decoration:none;
	vertical-align:middle;
	padding:1px 2px 1px 2px;
	white-space:nowrap;
}

.tree-node-hover{
	background:#fafafa;
}
.tree-node-selected{
	background:#FBEC88;
}
.tree-checkbox{
	display:inline-block;
	width:16px;
	height:18px;
	vertical-align:middle;
}
.tree-node-append .tree-title{
	border:1px dotted red;
}
.tree-editor{
	border:1px solid #ccc;
	font-size:12px;
	line-height:16px;
	width:80px;
	position:absolute;
	top:0;
}

        在jsp页面当中覆盖“.tree-file”的css样式即可(将tree-file样式下的图片换为tree-folder的图片路径)，代码如下：

        然后惊呆我了，竟然页面没有动静，吃鲸啊，怎么办？难倒不是easyui控制的css样式吗？

      思路二：

      由于思路一走不通，发现在WEB-INF文件夹下，有针对zTree自己封装的css样式的文件夹"zTreeStyle"，则想着对这个文件夹中的样式进行修改。

       zTreeStyle中的代码样式如下：

.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}

        zTreeStyle将所有图标集中到一张图片，然后通过坐标来确定具体的节点图标，如图：

                             
          那么如何确定文件夹的坐标以及文件夹图标在css中的名称？一个小的技巧，跑起来服务器上的程序，通过firebug查看该图片的样式，最终确定所选文件夹的样式为：

.ztree li span.button.ico_docu {
	    background-position: -110px 0;
	    margin-right: 2px;
	    vertical-align: top;
}

        之后在jsp中覆盖叶子节点的样式如下：

          之后，奇迹出现了，无论是父节点还是子节点，都成了文件夹，再次吃鲸！！！（问题在于一个jsp页面中有两棵树，现在仅仅对于一棵树进行修改），so，只要在样式前通过id选择器进行细化即可，代码如下：

#tree.ztree li span.button.ico_docu {}

      至此，一个页面中两颗tree中的子节点显示不同样式即实现：

         

           这次尝试修改了easyui源码，包括查询CSS的API文档，对于前台样式的理解收获非常大，多动手真实王道。