;(function ($) {
/**
* 报表块组件，是组成表单的一种组件
* @class FR.Elementcase
* @extends FR.BaseEditor
*/
FR.Elementcase = FR.extend(FR.BaseEditor, {
_init: function () {
FR.Elementcase.superclass._init.apply(this, arguments);
this.$toolbar = $("<div class='x-toolbar' style='height:21px'></div>");
this.$inner = $("<div class='reportContent'></div>");
//frozen hidden, else auto
this.$inner.css('overflow', 'auto');
/**
* @property {Number} 总页数
*/
this.totalPage = -1;
/**
* @property {Number} 当前页索引
*/
this.currentPage = 1;
var self = this;
this.initPane();
this.gotoPage(1);
this._init4Style();
this._init4Margin();
},
/**
* 初始化报表块样式，包括背景，边框，圆角
* @private
*/
_init4Style: function () {
this._initBackGround();
var border = this.options.border;
if (border) {
this.element.css('border-style', border.type);
this.element.css('border-color', border.color);
this.element.css('border-width', border.width);
}
},
_initBackGround: function () {
//设置控件背景
if (!this.options.widgetBackground) {
return;
}
var alpha = this.options.widgetOpacity;
if(!alpha){
FR.setBackground(this.element, this.options.widgetBackground, this.element.height());
return;
}
//因为有透明度, 如果直接设置opacity属性, 会被子层div继承, 因此平级放一个背景div
this.$background = $("<div class='widgetBackground'></div>");
//IE
this.$background.css('filter', 'alpha(opacity=' + alpha * 100 +')');
//Chrome ff
this.$background.css('opacity', alpha);
FR.setBackground(this.$background, this.options.widgetBackground, this.element.height());
this.$background.prependTo(this.element);
},
/**
* 初始化报表块的内边距
* @private
*/
_init4Margin: function () {
// 考虑显示工具栏
var report ;
for (var i=0; i < this.element.children().length; i++) {
var child = $(this.element.children()[i]);
if (child.attr('class') == 'reportContent') {
report = child;
}
}
if (!report) {
return;
}
if (this.options.marginTop) {
report.css('marginTop', this.options.marginTop);
this.marginHeight = (this.marginHeight || 0) + parseInt(this.options.marginTop);
}
if (this.options.marginLeft) {
report.css('marginLeft', this.options.marginLeft);
this.marginWidth = (this.marginWidth || 0) + parseInt(this.options.marginLeft);
}
if (this.options.marginBottom) {
report.css('marginBottom', this.options.marginBottom);
this.marginHeight = (this.marginHeight || 0) + parseInt(this.options.marginBottom);
}
if (this.options.marginRight) {
report.css('marginRight', this.options.marginRight);
this.marginWidth = (this.marginWidth || 0) + parseInt(this.options.marginRight);
}
},
encodePara : function(para){
if(!para){
return '';
}
//不确定过来的是一个json对象还是一个字符串, 因为可以被自定义调用
if(typeof para === 'string'){
para = FR.jsonDecode(para);
}
$.each(para, function (pName, pValue) {
if (typeof pValue === 'string') {
//如果参数写出abc"efg, 转化为abc\"efg;
para[pName] = encodeURIComponent(FR.cjkDecode(pValue.replaceAll('"', '\\"')));
}
});
return para;
},
/**
* 跳转到指定页（可以用于刷新当前报表块）
* @param {Number} pn 要跳转的页，从1开始
* @param {JSON} para 跳转页面是携带的参数
* @param {Boolean} noCache 不是用缓存，强制取新的数据
*/
gotoPage : function(pn, para, noCache) {
var self = this;
FR.ajax({
url: FR.servletURL,
type: 'POST',
data: {
op: 'fr_form',
cmd: 'load_report_content',
sessionID: this.options.form.sessionID,
widgetName: this.options.widgetName,
__parameters__: FR.encodePara(para),
noCache : noCache || '',
pageIndex: pn,
_: new Date().getTime(),
__boxModel__: $.support.boxModel
},
beforeSend: function () {
self.$inner.__loading_elementcase__(true);
},
async: true,
complete: function (res, status) {
if (status == 'success') {
var items = FR.jsonDecode(res.responseText);
if(items.length === 0){
self.$inner.html(res.responseText);
return;
}
self.totalPage = items['totalPage'] ? items['totalPage'] : 1;
if(self.options.showToolbar){
self.numberLabel.setValue(' /' + self.totalPage);
self.inputField.setValue(pn);
}
self.$inner.html(items['htmlTag']);
//neil: 图表
self.$inner.asComponent({type : "fr_form", selector : 'td[widget]'});
self.currentPage = pn;
self.changeColWidth();
self.changeHeight();
//边框丢了
$('.x-table', self.$inner).css('overflow','visible');
var overflow = $(".frozen-page", self.$inner).length > 0 ? 'hidden' : 'auto';
self.$inner.__loading_elementcase__(false, overflow);
}
}
});
},
isFit : function () {
var form = this.options.form;
return form.options && form.options.__FIT__;
},
changeHeight : function () {
var $frozenPage = $(".frozen-page", this.$inner);
if($frozenPage.length > 0){
var $pageblock = $('.page-block', this.$inner);
var $west = $('.frozen-west', $frozenPage);
var $north = $('.frozen-north', $frozenPage);
var $center = $('.frozen-center', $frozenPage);
var toolBarHeight = $('.x-toolbar').height();
// 报表块内边距为正文div，背景为报表块区域的
var pageHeight = this.options.height - toolBarHeight - (this.marginHeight || 0);
$center.height(pageHeight - $north.height());
$west.height(pageHeight - $north.height());
$pageblock.height(pageHeight + 'px');
$center.scroll(function () {
$north.scrollLeft($center.scrollLeft());
$west.scrollTop($center.scrollTop());
}.createDelegate(this));
}
if(this.$background){
this.$background.css('height', this.options.height);
}
},
changeColWidth : function () {
var $frozenPage = $(".frozen-page", this.$inner);
var $pageblock = $('.page-block', this.$inner);
if($frozenPage.length > 0){
this.doForzen($frozenPage, $pageblock);
}else{
var widgetName = this.options.widgetName;
var array = $('.' + widgetName + 'col');
var table = $('.' + widgetName + 'table');
//如果Table高度比控件大, 说明会出现纵向滚动条, 因此要-20
var width = table.height() > this.options.height ? this.options.width - 20 : this.options.width - 2;
var config = {
array : array,
table : table,
width : width - (this.marginWidth || 0)
}
if(!this.isFit()) {
this.changeTableW(config);
}
$pageblock.width(table.width() + 'px');
}
if(this.$background){
this.$background.css('width', this.options.width);
}
},
doForzen : function ($frozenPage, $pageblock) {
//屏蔽掉自身的滚动条, 用冻结div的
this.$inner.css('overflow', 'hidden');
var oldTotal = $frozenPage.width();
var $corner = $('.frozen-corner', $frozenPage);
var $west = $('.frozen-west', $frozenPage);
var $north = $('.frozen-north', $frozenPage);
var $center = $('.frozen-center', $frozenPage);
var allTable = {
cornerTable : $('.x-table', $corner),
westTable : $('.x-table', $west),
northTable : $('.x-table', $north),
centerTable : $('.x-table', $center)
}
if(!this.isFit()) {
this.changeFrozenTable(allTable, oldTotal);
}
var westTableWidth = $('.x-table', $west).width();
var newWidth = this.options.width - westTableWidth - (this.marginWidth || 0);
$corner.width(westTableWidth);
$west.width(westTableWidth);
$center.width(newWidth);
$north.width(newWidth);
},
changeFrozenTable : function(allTable, oldTotal){
var cornerTable = allTable.cornerTable;
var westTable = allTable.westTable;
var northTable = allTable.northTable;
var centerTable = allTable.centerTable;
//只算一边, 另一边再算会出现误差, 直接减出来
var leftWidth = (westTable.width() / oldTotal) * this.options.width;
var scrollWidth = 20;
var rightWidth = this.options.width - leftWidth - scrollWidth - (this.marginWidth || 0);
var cornerCols = $('col', cornerTable);
var westCols = $('col', westTable);
var northCols = $('col', northTable);
var centerCols = $('col', centerTable);
var startColumn = this.getCornerStartColumn(centerCols, northCols);
var cornerConfig = {
array : cornerCols,
table : cornerTable,
width : leftWidth,
start : 0
}
var westConfig = {
array : westCols,
table : westTable,
width : leftWidth,
start : 0
}
var northConfig = {
array : northCols,
table : northTable,
width : rightWidth,
start : startColumn
}
var centerConfig = {
array : centerCols,
table : centerTable,
width : rightWidth,
start : startColumn
}
this.changeTableW(cornerConfig);
this.changeTableW(westConfig);
this.changeTableW(northConfig);
this.changeTableW(centerConfig);
},
getCornerStartColumn : function(centerCols, northCols){
if(centerCols.length > 0){
//取第一列的col值, 因为前面可能有隐藏列,取length不准
return parseInt($(centerCols[0]).attr('col'));
}
return Math.max(centerCols.length, northCols.length);
},
changeTableW : function(config) {
var array = config.array;
var table = config.table;
var totalWidth = config.width;
if(array.length === 0 || table.length === 0){
return;
}
var oldWidth = table.width();
var scale = totalWidth / oldWidth;
var delta = 0;
for(var i = 0; i < array.length; i++){
var currentCol = $(array[i]);
var oldColWidth = currentCol.width();
var calRes = this.calNewWidth(currentCol, delta, scale);
var newWidth = calRes.newWidth;
delta = calRes.delta;
currentCol.width(newWidth + 'px');
this.calCellFrozenTableWidth(i, config.start, table, newWidth, oldColWidth, scale);
}
table.width(totalWidth + 'px')
},
calCellFrozenTableWidth : function (i, start, table, newWidth, oldColWidth, scale){
//冻结的话, 需要把每一列的冻结格子的table都拉宽, 不然居中居左无效.
if(parseInt(start) >= 0){
var colClsName = 'table.col'+(i + parseInt(start));
var $currentCellFrozenTable = $(colClsName, table);
var len = $currentCellFrozenTable.length;
if(len === 0){
return;
}
if($($currentCellFrozenTable[i]).width() === 0){
//隐藏列跳过
this.calCellFrozenTableWidth(i, ++start, table, newWidth, oldColWidth, scale);
return;
}
for(var i = 0; i < len; i++){
var _tempWidth = newWidth;
//当前格子是合并单元格, 直接拉伸处理
if($($currentCellFrozenTable[i]).width() > oldColWidth){
_tempWidth = ( $($currentCellFrozenTable[i]).width() + 5 ) * scale;
}
//左右padding+边框
$($currentCellFrozenTable[i]).width((_tempWidth - 5) + 'px');
}
}
},
calNewWidth : function (currentCol, delta, scale) {
var currentWidth = currentCol.width();
var minWidth = parseInt(currentCol.css('min-width'));
//缩放后的大小
var scaleWidth = currentWidth * scale;
//缩放后, 并减去负债后的大小
var deltaWidth = scaleWidth - delta;
var newWidth = 0;
if(minWidth <= deltaWidth){
//当前格子还得起, 那么就把债务清空
newWidth = deltaWidth;
delta = 0;
}else{
//如果当前格子本身不欠债, 但还不了债, 那么就把债务顺延, 并减轻部分债务
if(minWidth <= scaleWidth){
delta -= (scaleWidth - minWidth)
}else{
//不仅还不起, 本身还欠, 那么把债务累加, 传递给下个格子
delta = minWidth - scaleWidth;
}
newWidth = minWidth;
}
var result = {
newWidth : newWidth,
delta : delta
}
return result;
},
initToolbar : function () {
var self = this;
var prevBtn = new FR.Button({
icon: "css:x-emb-formpre",
width: 25,
height:20,
render:false,
renderEl:$('<div/>').appendTo($('<div style="float:left;"></div>').appendTo(self.$toolbar)),
handler:function () {
if(self.currentPage - 1 > 0){
self.gotoPage(self.currentPage - 1);
self.currentPage--;
}
}
});
self.inputField = new FR.NumberEditor({
renderEl:$('<div/>').appendTo($('<div style="float:left;padding-left:2px;"></div>').appendTo(self.$toolbar)),
width:30,
height:20,
allowDecimals: true,
allowNegative: true,
style:"text-align:center"
});
self.inputField.on(FR.Events.AFTEREDIT, function (e) {
if(e.keyCode == FR.keyCode.ENTER){
self.gotoPage(this.getValue());
}
});
self.numberLabel = new FR.Label({
renderEl:$('<div/>').appendTo($('<div style="float:left;padding-left:2px;"></div>').appendTo(self.$toolbar)),
width : 38,
height : 20
});
var nextBtn = new FR.Button({
icon: "css:x-emb-formnext",
width:25,
height:20,
render:false,
renderEl:$('<div/>').appendTo($('<div style="float:left;"></div>').appendTo(self.$toolbar)),
handler:function () {
if(self.currentPage + 1 <= self.totalPage){
self.gotoPage(self.currentPage + 1);
self.currentPage++;
}
}
});
},
initPane : function(){
var self = this;
var items = [];
if(self.options.showToolbar){
self.initToolbar();
items.push({
region: 'north',
el: self.$toolbar
});
}
items.push({
region: 'center',
el: self.$inner
});
var borderLayout = new FR.BorderLayout({
items: items,
renderEl: self.element
});
borderLayout.doLayout();
$(window).resize(function() {
borderLayout.doLayout();
});
},
doResize : function(give){
if (!FR.Browser.isIE8Before() && this.options.border) {
this.element.parent().css('box-shadow', this.options.border.borderStyle);
}
var newWidth = give.width;
if(give.width && give.width != this.options.width){
this.options.width = give.width;
this.changeColWidth();
}
if(give.height && give.height != this.options.height){
this.options.height = give.height;
this.changeHeight();
}
}
});
$.shortcut("elementcase", FR.Elementcase);
})(jQuery);