CSS 实现下拉树目录

  • 文档创建者:Kevin-s
  • 编辑次数:10次
  • 最近更新:Leo.Tsai 于 2019-11-19
  • 1. 描述

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

    Snag_5596d2e.png

    2. 思路

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

    3. 示例

    3.1 数据准备

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

    Snag_5618294.png

    3.2 报表设计

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

    Snag_5649542.png

    2)设置 B4 单元格的左父格为 B3,B5 单元格的左父格为 B4。

    Snag_5673eb7.png

    3.3 引入 CSS 文件

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

    2)在FineReport_10.0webappswebrootscriptscss路径下添加一个下拉树目录.css文件下拉树目录.css,代码如下:

    .x-treenode-expand {
        background: transparent url('/webroot/scripts/css/5.jpg') no-repeat scroll left center;
        padding-left: 40px; 
    }
    .x-treenode-unexpand {
        background: transparent url('/webroot/scripts/css/4.jpg') no-repeat scroll left center;
        padding-left: 40px;
    }
    .x-text {
        color: #FFFFFF;
    }

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

    Snag_570eb95.png

    4. 效果预览

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

    1.GIF

    注:不支持移动端。

    5. 已完成模板

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

    点击下载模板:下拉树目录.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览