Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4494

Tree's DOM structure shall provide enough information to decorate lines with CSS

XMLWordPrintable

    • Icon: New Feature New Feature
    • Resolution: Done
    • Icon: Major Major
    • 10.0.0
    • 9.0.0
    • Components
    • Security Level: Jimmy
    • ZK 9.5.0 S1

      Requirement Description

      Original:

      under the current design, there is no line between a parent node and its children. But connected lines can make the parent-children structure more readable like:

      But when trying to adding lines among nodes, ZK tree lacks enough information to rendering lines with CSS only because every row is a z-treerow. For example, no way to differentiate the last child of each parent node since the last child required a different line style.

      workaround

      From this workaround ( tree-line.js and tree-line2.css ), I have to render some specific CSS class to identify each tree row like z-treerow-child, z-treerow-last-child, so that I can render different styles of the line for them.

        1. content-wrap.jpg
          content-wrap.jpg
          10 kB
        2. image-2020-07-14-12-06-15-948.png
          image-2020-07-14-12-06-15-948.png
          55 kB
        3. screenshot-1.png
          screenshot-1.png
          6 kB
        4. screenshot-2.png
          screenshot-2.png
          8 kB
        5. treeLine.jpg
          treeLine.jpg
          19 kB
        6. tree-line.js
          0.7 kB
        7. tree-line2.css
          1 kB
        8. tree-without-lines.jpg
          tree-without-lines.jpg
          20 kB
        9. zk-4494-custom-example.zip
          9 kB
        10. zk-4494-custom-example-cssflex.zip
          9 kB

            rebeccalai rebeccalai
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours Original Estimate - 4 hours
                4h
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 4 hours
                1d 4h