组件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）