组件API接口构成

目录:

1. 描述

下面我们主要讲解API接口定义交互布局,介绍FineReport开放的接口以及使用方法。

2. 组件API接口构成

FineReport数据决策系统中自定义主题包API接口由5大部件组成:框架布局目录树组件多tab组件Navigation组件Gallery组件
2.1 总配置
在自定义修改这5大部件配置之前,首先我们需要对FS.Theme配置进行扩展,即直接在theme.js脚本中添加如下代码:
  1. (function ($) {  
  2.     FS.THEME = $.extend(true, FS.THEME, {  
  3.         /**需要扩展的配置属性**/  
  4.     });  
  5. })(jQuery);  
如果需要对五大部件都进行自定义扩展,那么其代码为:
  1. (function ($) {  
  2.     FS.THEME = $.extend(true, FS.THEME, {  
  3.         /**需要扩展的配置属性**/  
  4.         {  
  5.     //框架布局配置属性  
  6.     config4frame: {},  
  7.     //目录树组件配置属性  
  8.     config4MenuTree: {},  
  9.     //多tab组件配置属性  
  10.     config4tabPane: {},  
  11.    //Navigation配置属性  
  12.     config4navigation: {},  
  13.   //Gallery配置属性  
  14.     config4Gallery: {}  
  15. }  
  16.     });  
  17. })(jQuery);  
2.2 框架布局配置属性
框架布局配置属性开放的API接口如下:
  1. config4frame = {  
  2.     resizable: false,  //是否可以拖拽分割线调整左右区域的大小  
  3.     //上区域  
  4.     north: {  
  5.         height: 80 //上方导航栏高度设置(不设置默认60px)  
  6.         visible: true //是否可见  
  7.     },  
  8.     //下区域  
  9.     south: {  
  10.         visible: false //是否可见  
  11.     },  
  12.     //左区域  
  13.     west: {  
  14.         width: 220 //宽度  
  15.     },  
  16.     //右区域  
  17.     east: {}  
  18. }  
2.3 目录树组件配置属性
可对左侧的目录树进行交互的修改,所有开放的API接口代码如下:
  1. config4MenuTree = {  
  2.         region: 'west',  //默认所在区域 onBeforeInit: null, //初始化前事件,参数:[element]  
  3.         onAfterInit: null//初始化后事件,参数:[element]  
  4.         onDataFilter: null//节点数据过滤事件,参数:[node, childNodes]  
  5.         onBeforeNodeClick: null//函数,节点点击前事件,参数: [node, $node, $li]  
  6.         onNodeClick: null//函数,节点点击事件,参数: [node, $node, $li]  
  7.         onAfterNodeClick: null//函数,节点点击后事件,参数: [node, $node, $li]  
  8.         onBeforeNodeCreate: null//函数,节点创建前事件,参数:[node, $node, $li]  
  9.         onNodeCreate: null//函数,节点创建事件,参数:[node, $node, $li]  
  10.         onAfterNodeCreate: null//函数,节点创建后事件,参数:[node, $node, $li]  
  11.         onBeforeNodeExpand: null//函数,节点展开前事件,参数:[node, $node, $li]  
  12.         onNodeExpand: null//函数,节点展开事件,参数:[node, $node, $li]  
  13.         onAfterNodeExpand: null//函数,节点展开后事件,参数:[node, $node, $li]  
  14.         onBeforeNodeCollapse: null//函数,节点收起前事件,参数:[node, $node, $li]  
  15.         onNodeCollapse: null//函数,节点收起事件,参数:[node, $node, $li]  
  16.         onAfterNodeCollapse: null//函数,节点收起后事件,参数:[node, $node, $li]  
  17.         onBeforeDisplayNodes: null//函数,节点展示前事件,参数:[node, $node, $li]  
  18.         onDisplayNodes: null//函数,节点展示事件,参数:[node, $node, $li]  
  19.         onAfterDisplayNodes: null //函数,节点展示后事件,参数:[node, $node, $li]  
  20.     }  
函数里面的参数含义如下:
node:节点对象,其构成结构如下:
  1. node = {  
  2.         text: '日报'//entry名  
  3.         id: '213',   //entry id  
  4.         isexpand: false//是否展开  
  5.         hasChildren: true,  //是否具有子节点  
  6.         ChildNodes: [],  //子节点数组  
  7.         isModule: false//是否是标签页节点  
  8.         level: 1 //树深度,从0计数  
  9.     }  
$node:节点的DOM对象;
$li:节点所处的父层DOM对象。
1)节点请求接口
在使用组件API接口进行主题自定义的时候,可能需要使用到系统中的目录树节点以及管理系统各设置节点,进行重新设计,则可以通过下面的接口获取到各个节点。
2)管理系统节点
获取管理系统各节点的URL为:FR.servletURL + "?op=fs_main&cmd=getmoduleitems",参数为{id: -1};
3)目录树节点
获取目录树节点的URL为:FR.servletURL + "?op=fs_main&cmd=module_getrootreports",参数为{id: 1}。
节点请求接口的使用请查看自定义主题包示例
2.4 多tab组件配置属性
多tab组件就是点击目录树节点后在主体页面多个tab,其开放的接口如下:
  1. config4tabPane = {  
  2.         region: 'east'//默认所在区域  
  3.         style: 'alpha',  //内置样式,包括alpha和bravo两种选择  
  4.         tabWidth: 150,  //单个tab标签的最大宽度  
  5.         isCollapsible: true,  //是否可以收起  
  6.         hasHomepageBtn: false,  //是否有主页按钮  
  7.         onCreateTab: null,  //函数,创建Tab标签时的操作,可修改标签样式(全局),参数:[$tab, entry]  
  8.         onSelectTab: null,  //函数,选中每个Tab页面时的操作,可修改内容(全局),参数:[$tab, $content, entry]  
  9.         onCloseTab: null,  //函数,关闭每个Tab页面时的操作(全局),参数:[$tab, $content, entry]  
  10.         afterLoadTab: null,  //函数,加载每个Tab页面时的操作(全局),参数:[$tab, $content, entry]  
  11.   
  12.     }  
该接口的使用示例请查看demo3.zip
除了开放多tab组件属性的配置API之外,FR还另外开放了一个添加多tab组件的方法FS.tabPane.addItem(item),如果tab已经存在,则直接选中;若不存在,则添加并选中,其中item是新增的tab对象,其数据格式为JSON格式,如下:
  1. item {JSON}  
  2.          item = {  
  3.              text: 'newTab'//必须, tab标签名  
  4.              id: '213'//entry id  
  5.              src: 'http://www.finereport.com', //可选,正文内容为链接,iframe嵌入  
  6.              onCreate: null,  //函数,创建Tab标签时的操作,可修改标签样式,参数:[$tab, entry]  
  7.              onSelect: null,  //函数,选中每个Tab页面时的操作,可修改内容,参数:[$tab, $content, entry]  
  8.              onClose: null,  //函数,关闭每个Tab页面时的操作,参数:[$tab, $content, entry]  
  9.              afterLoad: null,  //函数,加载每个Tab页面时的操作,参数:[$tab, $content, entry]  
  10.          }  
2.5 Navigation配置属性
  1. config4navigation = {  
  2.     onBeforeInit: null,  //初始化前事件  
  3.     onAfterInit: null,   //初始化后事件  
  4.     naviComponents: null //自定义导航栏组件, 可以往里面push自定义组件, 自定义render和onClick事件;  
  5. }  
2.6 Gallery配置属性

  1. config4Gallery: {  
  2.     region: null   //默认所在区域  
  3. }   
该接口的使用示例请查看demo5.zip

附件列表


主题: 决策系统
标签: 已验证

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(微信ID:frbiaoge)