FineReport——决策系统组件API

FineReport数据决策系统中自定义主题包API接口由5大部件组成：框架布局、目录树组件、多tab组件、Navigation组件和Gallery组件。

首先，对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);

框架布局配置属性：

config4frame = {
    resizable: false,  //是否可以拖拽分割线调整左右区域的大小
    //上区域
    north: {
        visible: true //是否可见
    },
    //下区域
    south: {
        visible: false //是否可见
    },
    //左区域
    west: {
        width: 220 //宽度
    },
    //右区域
    east: {}
}

目录树组件配置属性方法：

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：节点的DOM对象；

$li：节点所处的父层DOM对象。

管理系统节点

获取管理系统各节点的URL为：FR.servletURL + "?op=fs_main&cmd=getmoduleitems"，参数为{id: -1}；

目录树节点

获取目录树节点的URL为：FR.servletURL + "?op=fs_main&cmd=module_getrootreports"，参数为{id: 1}。

多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]

    }

Navigation配置属性：

config4navigation = {
        onBeforeInit: null,  //初始化前事件
        onAfterInit: null   //初始化后事件
    }

Gallery配置属性：

config4Gallery: {
    region: null   //默认所在区域
}

系统配色

更改style.cc文件如下：

高亮色:

.fui-bsb{
  background-color: @color;
}
.fui-bsc{
  color: @color;
}
.fui-bsd{
  border-color: @color;
}

图标外框色：

.fui-fhc{
  color: @color;
}
.fui-fht{
  text-shadow: 0 0 3px @color;
}

底栏色：

.fui-seb{
  background-color: @color;
}

文字色：

.fui-fbc{
  color: @color;
}
.fui-fbt{
  text-shadow: 0 0 1px @color;

自定义主题包实例

theme.js：

(function ($) {
    FS.THEME = $.extend(true, FS.THEME, {
        config4navigation: {
            onAfterInit: function () {
                //移除搜索框
                var self = this;
                $('#fs-frame-search').remove();
                var $reg = $('#fs-frame-reg');
                if ($reg.length > 0) {
                    $reg.remove();
                }
                //获取目录树节点重新绘制顶部导航栏
                $.ajax({
                    url: FR.servletURL + "?op=fs_main&cmd=module_getrootreports",
                    type: 'POST',
                    data: {id: -1},
                    success: function (res, status) {
                        var nodes = $.parseJSON(res);
                        //目录树节点获取成功之后，获取管理系统各个节点
                        $.ajax({
                            url: FR.servletURL + "?op=fs_main&cmd=getmoduleitems",
                            type: 'POST',
                            async: false,
                            data: {id: 1},
                            success: function(res){
                                nodes.push($.parseJSON(res));
                            }
                        });
                        var $ul = $('<ul class="node-navi"/>').appendTo($('#fs-frame-header'));
                        $.each(nodes, function (index, root) {
                            var $node = $('<li class="node-navi-li"/>').appendTo($ul);
                            $('<div/>').text(root.text)
                                .appendTo($node)
                                .click(function () {
                                    if($node.hasClass('node-select')){
                                        return;
                                    }
                                    $ul.find('.node-select').removeClass('node-select');
                                    $node.addClass('node-select');
                                    var $dropdown = $(this).data('DATA');
                                    if (!$dropdown) {
                                        $dropdown = $('<div class="node-pane"/>').appendTo($node);
                                        $(this).data('DATA', $dropdown);
                                        var $pane = $('<div class="node-pane-inner"/>')
                                            .css({
                                                'max-height': document.body.clientHeight - 90
                                            }).appendTo($dropdown);
                                        if (root.hasChildren && root.ChildNodes) {
                                            var $other = $('<div class="node-wrapper"/>').appendTo($pane);
                                            $.each(root.ChildNodes, function (index, child) {
                                                if (child.hasChildren) {
                                                    var $w = $('<div class="node-wrapper"/>').appendTo($pane);
                                                    $('<div class="node-title"/>').text(child.text).appendTo($w);
                                                    var childs = [];
                                                    _collectAllChildNodes(child, childs);
                                                    $.each(childs, function (i, n) {
                                                        _createItem(n, $dropdown, $node).appendTo($w);
                                                    });
                                                } else {
                                                    _createItem(child, $dropdown, $node).appendTo($other);
                                                }
                                            });
                                        } else {
                                            return;
                                        }
                                    }
                                    $dropdown.fadeIn('fast');
                                    $(document).bind('mouseover.nodepane', function (e) {
                                        var $t = $(e.target);
                                        if ($t.closest('.node-pane').length <= 0) {
                                            $node.removeClass('node-select');
                                            $dropdown.fadeOut('fast');
                                            $(document).unbind('mouseover.nodepane');
                                        }
                                    });
                                }
                            );
                        });
                    }
                });
            }
        },
        config4frame: {
            west: {
                width: 0
            }
        }
    });
    var _createItem = function (node, $pane, $node) {
        return $('<a href="#"/>').text(node.text)
            .click(function () {
                FS.tabPane.addItem(node);
                $node.removeClass('node-select');
                $pane.hide();
                $(document).unbind('mousedown.nodepane');
            });
    };
    var _collectAllChildNodes = function (node, childs) {
        var self = this;
        if (!node.ChildNodes) {
            return;
        }
        $.each(node.ChildNodes, function (index, child) {
            if (child.hasChildren) {
                _collectAllChildNodes(child, childs);
            } else {
                childs.push(child);
            }
        });
    };
})(jQuery);

style.css:

.node-navi{
    position: relative;
    float: right;
    right: 30px;
    list-style: none;
    height: 60px;
    top:;
}

.node-navi li{
    position: relative;
    float: left;
    left:;
    display: block;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 14px;
    padding: 0 15px;
    cursor: pointer;
}

.node-navi li:hover{
    color: #6fd3ff;
}

.node-pane{
    position: absolute;
    top: 60px;
    left:;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    z-Index:;
}
.node-pane-inner{
    position: relative;
    _height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(41, 90, 148);
    background: rgba(41, 90, 148, 0.85);
    *width:200px;
}
.node-select{
    background: #295a94;
}

.node-pane a, .node-title{
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    min-width: 160px;
    _width:180px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: white;
    padding: 3px 5px 3px 12px;
    cursor: pointer;
}

.node-pane a:hover{
    background: rgb(41, 90, 148);
}
.node-title{
    padding: 5px 5px 5px 4px;
    cursor: default;
    color: #6fd3ff;
    font-weight: bold;
}