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