0

Tree alternate background color for only the visible treerows

asked 2015-07-01 14:05:27 +0800

eclipse1 gravatar image eclipse1
21 4

updated 2015-07-01 14:06:52 +0800

Hello,

I need to have a tree where each visible treerow has a different background color. I tried using a css selector to define a color for only the treerows that are the odd children of a tree. It changed the color, but the problem is if i collapse the treerows, the visible treerows start to have the same background color, because the other ones are still on the html page, but with style="display: none".

Is there anyway to have this behavior of alternate colors only for the visible treerows?

This is an example of what i tried - You can also see on this fiddle zkfiddle.org/sample/7prdsq/5-Tree-Rows-Alternate-Colors:

<zk>
  <style>
        .z-treerow:nth-child(odd) {
              background: #DEE7F4;
        }
  </style>
    <window id="uploadVideo"
            apply="org.zkoss.bind.BindComposer">
        <tree>
                    <treecols>
                          <treecol label="Description" sort="auto" />
                          <treecol label="Origin" sort="auto"  />
                        </treecols>
                        <treechildren>
                          <treeitem>
                            <treerow>
                              <treecell label="Category 1" iconSclass="z-icon-question-circle" />
                              <treecell label="" />
                            </treerow>
                            <treechildren>
                              <treeitem>
                                <treerow>
                                  <treecell label="Example Description 1" iconSclass="z-icon-question-circle" />
                                  <treecell label="Example Origin 1" />
                                </treerow>
                              </treeitem>
                            </treechildren>
                          </treeitem>
                          <treeitem>
                            <treerow>
                              <treecell label="Category 2" iconSclass="z-icon-question-circle" />
                              <treecell label="" />
                            </treerow>
                            <treechildren>
                              <treeitem>
                                <treerow>
                                  <treecell label="Example Description 2" iconSclass="z-icon-exclamation-circle" />
                                  <treecell label="Example Origin 2"/>
                                </treerow>
                              </treeitem>
                              <treeitem>
                                <treerow>
                                  <treecell label="Example Description 3" iconSclass="z-icon-exclamation-circle" />
                                  <treecell label="Example Origin 3"/>
                                </treerow>
                              </treeitem>
                            </treechildren>
                          </treeitem>
                          <treeitem>
                            <treerow>
                              <treecell label="Category 3" iconSclass="z-icon-question-circle" />
                              <treecell label="" />
                            </treerow>
                            <treechildren>
                              <treeitem>
                                <treerow>
                                  <treecell label="Example Description 4" iconSclass="z-icon-question-circle"/>
                                  <treecell label="Example Origin 4" />
                                </treerow>
                              </treeitem>
                              <treeitem>
                                <treerow>
                                  <treecell label="Example Description 5" iconSclass="z-icon-question-circle" />
                                  <treecell label="Example Origin 5" />
                                </treerow>
                              </treeitem>
                            </treechildren>
                          </treeitem>
                        </treechildren>
        </tree>
    </window>
</zk>
delete flag offensive retag edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-07-01 14:05:27 +0800

Seen: 26 times

Last updated: Jul 01 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More