CSS 实现下拉树目录

我是社区第485122位番薯,欢迎点我头像关注我哦~
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 下载见底部附件



编辑于 2020-11-20 16:20  

编辑于 2020-11-20 16:21  

发表于 2021-3-5 12:50:54
非常好 ,吸取一下经验
发表于 2021-4-3 13:29:13
正好要用到 学习下
发表于 2021-9-2 09:22:52
把图标隐藏就更完美了
发表于 2022-7-14 15:56:31
怎么实现的阶梯空格呢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

4回帖数 5关注人数 7855浏览人数
最后回复于:2022-7-14 15:56

返回顶部 返回列表