CSS 实现下拉树目录

1. 描述

CSS 实现下拉树目录的效果如下图所示：

2. 思路

通过树节点按钮控件以及引用 CSS 更改样式，可以实现下拉树目录。

3. 示例
3.1 数据准备

新建如下图所示的内置数据集。

3.2 报表设计

1）将内置数据集的 main，sub，sub2 字段，分别拖拽到 B3，B4，B5 单元格。给 B3，B4 单元格添加树节点按钮控件。

2）设置 B4 单元格的左父格为 B3，B5 单元格的左父格为 B4。

3.3 引入 CSS 文件

1）将下路树按钮的图片压缩包Tree image.rar解压后放置到%FR_HOME%\webroot\scripts\css路径下。

2）在FineReport_10.0\webapps\webroot\scripts\css路径下添加一个下拉树目录.css文件下拉树目录.css，代码如下：

1. .x-treenode-expand {
   
2.     background: transparent url('/webroot/scripts/css/5.jpg') no-repeat scroll left center;
   
3.     padding-left: 40px;
   
4. }
   
5. .x-treenode-unexpand {
   
6.     background: transparent url('/webroot/scripts/css/4.jpg') no-repeat scroll left center;
   
7.     padding-left: 40px;
   
8. }
   
9. .x-text {
   
10.     color: #FFFFFF;
    
11. }

复制代码

3）设计器菜单栏选择模板>模板Web属性>引用Css，引入新添加的 CSS 文件。

4. 效果预览

保存报表，预览按钮选择数据分析，查看报表，效果如下图所示：

注：不支持移动端。

5. 已完成模板

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\下拉树目录.cpt

点击下载模板：下拉树目录.cpt 下载见底部附件

非常好 ，吸取一下经验

正好要用到 学习下

把图标隐藏就更完美了

怎么实现的阶梯空格呢