Java报表软件--Java报表软件内置JS使用之十一

The Neurotic Fishbowl

FineReport——报表技术领跑者发表于 2010/9/28 16:14:07

用户在实际项目中常会使用Java报表软件，为了更符合使用者的审美观或者让报表和总体框架协调，可能需要修改一些页面显示的样式表(CSS)，如更换控件的图标或者改变填报表单控件的显示样式等。下面以FineReport报表软件为例，简单介绍下自定义控件图标。如下以下拉树控件为例说明如何改变控件的图标。 1．下拉树模板制作 1.1 新建报表 1.2 定义参数在菜单栏中选择报表|报表参数，定义报表参数tree。 1.3 参数界面设置，如下图所示 500)this.width=500'> 1.4 控件设置，如下图所示类型选择下拉树，层次有两层，定义如下图 500)this.width=500'> 500)this.width=500'> 1.5 分页预览分页预览可以看到默认的控件图标如下 500)this.width=500'> 2. 引用CSS更换控件图标 2.1 收集图标收集好需要使用的图标，推荐大小为16×16，假设想让树叶的图标为leaf.gif。 2.2 保存图标在WebReport目录下(即和WEB-INF平行的地方)新建一个文件夹，文件名为custom，将第一步的图标放入该文件夹内。 2.3 生成CSS样式在custom文件夹内新建一个css文件，如叫custom_tree.css，内容如下： .bbit-tree-node-leaf{background:url("leaf.gif");} 说明：该语句是用来置换树叶的样式。 2.4 引用CSS 打开使用下拉树控件的报表，点击菜单报表|报表Web属性|引用css，在控件自定义样式表界面点插入按钮后写上custom_tree.css的相对路径： custom/custom_tree.css 确定后保存报表。 500)this.width=500'> 2.5 分页预览点击设计器中的分页预览，可看到更换图标后的下拉树效果 500)this.width=500'> 3. 控件相关CSS Ÿ 下拉树控件 .bbit-tree-node-expanded.bbit-tree-node-icon //节点展开的样式 .bbit-tree-node-leaf.bbit-tree-node-icon //树叶的样式 .bbit-tree-node-collapsed.bbit-tree-node-icon //闭合的样式 .bbit-tree-node-loading.bbit-tree-node-icon //正在加载的样式文章转自：http://finereport.blog.chinabyte.com/2010/09/28/115/

阅读全文(1201) | 回复(0) | 编辑 | 精华

发表评论：