Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi ZK team,
Is there anyway to color ZK tree with grey color just like in Listbox?
I think I saw it in the previous version of ZK framework before but cannot figure out where is it with ZK version 5.0.7.
Thank you in advance.
Hi, juminrubin:
As code below is a workaround by CSS3:
<zk>
<style>
.z-treerow:nth-child(even) {background: #CCC}
</style>
<tree id="tree" width="400px" rows="8">
<treecols sizable="true">
<treecol label="Name" />
<treecol label="Description" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1" />
<treecell label="Item 1 description" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2" />
<treecell label="Item 2 description" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1.1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.1.2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.2.1" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3" />
</treechildren>
</tree></zk>
Ben
To extend a little on Ben's solution, here is styling to simulate the Classic Blue theme. I added hover and selected background colors for the even rows:
.z-treerow:nth-child(even){background: #E6F8FF;}
tr.z-treerow-over:nth-child(even),tr.z-treerow-seld:nth-child(even) {
background: #dae7f6;
}
Thank you Benbai and Richard.
Hi slimez,
it can be done by use jquery to get all treerow and change their background after the tree created,
please refer to the simple sample below:
<zk>
<script type="text/javascript">
function changeColor() {
var trs = jq('$tree').find('.z-treerow');
for (var i = 0;i < trs.length;i ++) {
if (i % 2 == 0)
jq(trs[i]).css('background-color', '#029BCB')
}
}
</script>
<tree id="tree" width="400px" rows="8">
<attribute name="onCreate">
Clients.evalJavaScript("changeColor();");
</attribute>
<treecols sizable="true">
<treecol label="Name" />
<treecol label="Description" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1" />
<treecell label="Item 1 description" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2" />
<treecell label="Item 2 description" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1.1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.1.2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.2.1" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3" />
</treechildren>
</tree></zk>
Asked: 2011-06-28 09:01:28 +0800
Seen: 683 times
Last updated: Sep 21 '11
