-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I have a dynamic tree that has folders and documents using ZK 7.0.3. I have figured out how to manage the icon for the folders, however, I do not see a way to get an icon for the items that represent a document. ZK 6 supported this feature. Here is the style I have that works for folders:
<style>
.z-tree-close, .z-tree-open {
background-image: url(${c:encodeURL('~./zul/img/tree/folder-toggle.gif')});
background-size: cover;
width: 100%;
}
.z-tree-close {
background-position: 0 -18px;
}
.z-tree-open {
background-position: 0 0;
}
</style>
Is it possible with ZK 7?
ZK 7 now uses fontawesome and no longer the image based icons as in ZK 6.5 for tree icons, that's why the old style customizations no longer work.
to add or customize the icon you can follow this example on zk fiddle
i have no childrens too
I found a solution after lots of trial and error and decided to post to help others. There is no specific class applied to a tree detail node (document). My above example works fine for containers (folders). Here is what I came up with for the detail items:
span[class*="z-tree-spacer"]:nth-last-child(2) {
background-image: url('../../images/entity.gif');
background-repeat: no-repeat;
}
This uses an image and you could easily switch the css to use font awesome. Lots of examples around on how to add font awesome icons in a css.
just updated the fiddle too http://zkfiddle.org/sample/209073d/2-tree-icon-customization
cor3000 ( 2014-11-24 04:25:20 +0800 )editnicely done :)
Asked: 2014-11-10 14:56:00 +0800
Seen: 40 times
Last updated: Nov 27 '14