组件API接口构成

编辑
文档创建者:文档助手1 (67727 )     浏览次数:4312次     编辑次数:10次     最近更新:caixiaolan 于 2016-12-06     

目录:

1. 描述编辑

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

2. 组件API接口构成编辑

FineReport数据决策系统中自定义主题包API接口由5大部件组成:框架布局目录树组件多tab组件Navigation组件Gallery组件
2.1 总配置
在自定义修改这5大部件配置之前,首先我们需要对FS.Theme配置进行扩展,即直接在theme.js脚本中添加如下代码:
(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接口进行主题自定义的时候,可能需要使用到系统中的目录树节点以及管理系统各设置节点,进行重新设计,则可以通过下面的接口获取到各个节点。
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,其开放的接口如下:
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

附件列表


主题: 决策系统
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?