Sheet = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
container: null
|
});
|
|
this.columns = {};
|
this.selectedColum;
|
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
return $(Sheet_Template.container.join(""));
|
},
|
|
createContent: function() {
|
this.body = $("#sheet_body", this.container);
|
|
var columnOptions = this.config.columns;
|
|
//1. create indicator column
|
this.createIndicatorColumn();
|
|
//2. create index column
|
this.createIndexColumn();
|
|
//2. create columns
|
var max = columnOptions.length;
|
for (var i = 0; i < max; i++) {
|
var columnOption = columnOptions[i];
|
this.createDataColumn(columnOption);
|
}
|
},
|
|
clearColumns: function() {
|
for (var name in this.columns) {
|
var column = this.columns[name];
|
column.el.remove();
|
}
|
|
this.columns = {};
|
},
|
|
loadColumns: function(columnOptions) {
|
//1. clear
|
this.clearColumns();
|
|
//2. create columns
|
var max = columnOptions.length;
|
for (var i = 0; i < max; i++) {
|
var columnOption = columnOptions[i];
|
this.createDataColumn(columnOption);
|
}
|
},
|
|
createIndicatorColumn: function() {
|
//1. column
|
var column = $(Sheet_Template.indicatorColumn.join(""));
|
|
//2. root indicator
|
var indicator = $(Sheet_Template.top.join(""));
|
column.append(indicator);
|
|
//3. left indicator
|
var lineNum = this.config.lineNum;
|
for (var i = 0; i < lineNum; i++) {
|
var indicator = $(Sheet_Template.indicator.join(""));
|
column.append(indicator);
|
}
|
|
//4. append to container
|
this.container.append(column);
|
},
|
|
createIndexColumn: function() {
|
//1. column
|
var column = {
|
cells: []
|
};
|
var el = $(Sheet_Template.indexColumn.join(""));
|
|
//1. indicator
|
var indicator = $(Sheet_Template.top.join(""));
|
el.append(indicator);
|
|
//2. title
|
var title = el.title = $(Sheet_Template.title.join(""));
|
title.html("序号");
|
el.append(title);
|
|
//4. cell
|
var lineNum = this.config.lineNum; var cells = column.cells;
|
|
for (var i = 1; i <= lineNum; i++) {
|
var cell = $(Sheet_Template.cell.join(""));
|
cell.html(i);
|
cell.addClass("align-center");
|
|
cells.push({
|
parent: column,
|
el: cell
|
});
|
|
el.append(cell);
|
}
|
|
this.container.append(el);
|
},
|
|
createDataColumn: function(columnOption) {
|
//1. column
|
var column = {
|
option: columnOption,
|
cells: []
|
};
|
|
var el = column.el = $(Sheet_Template.dataColumn.join(""));
|
this.columns[columnOption.code] = column;
|
|
column.formatter = this.getColumnFormatter(columnOption.formatter);
|
|
var alignClass = this.getColumnAlignClass(columnOption.align);
|
el.addClass(alignClass);
|
|
var widthClass = this.getColumnWidthClass(columnOption.width);
|
el.addClass(widthClass);
|
|
var me = this;
|
var onClick = function() {
|
me.selectColum(column);
|
if (me.config.onColumnSelected) {
|
me.config.onColumnSelected.call(me, column);
|
}
|
};
|
|
//2. top indicator
|
var indicator = $(Sheet_Template.top.join(""));
|
el.append(indicator);
|
indicator.click(onClick);
|
|
//3. title
|
var title = el.title = $(Sheet_Template.title.join(""));
|
title.html(columnOption.name);
|
el.append(title);
|
title.click(onClick);
|
|
//4. cell
|
var lineNum = this.config.lineNum; var cells = column.cells;
|
|
for (var i = 0; i < lineNum; i++) {
|
var cell = $(Sheet_Template.cell.join(""));
|
|
cells.push({
|
parent: column,
|
el: cell
|
});
|
|
el.append(cell);
|
}
|
|
//5. append to container
|
this.body.append(el);
|
},
|
|
loadData: function(dataList) {
|
//1. clear
|
this.clearCells();
|
|
//2. load
|
if (!dataList || !dataList.length) {
|
return;
|
}
|
|
var first = dataList[0]; var max = dataList.length;
|
|
for (var prop in first) {
|
var column = this.columns[prop];
|
|
if (!column) {
|
continue;
|
}
|
|
var formatter = column.formatter;
|
|
for (var i = 0; i < max; i++) {
|
var line = dataList[i];
|
var value = line[prop];
|
var cell = column.cells[i];
|
cell.el.html(formatter(value));
|
}
|
}
|
},
|
|
clearCells: function() {
|
for (var prop in this.columns) {
|
var column = this.columns[prop];
|
var cells = column.cells;
|
|
if (!cells || !cells.length) {
|
return;
|
}
|
|
var max = cells.length;
|
for (var i = 0; i < cells; i++) {
|
cells[i].empty();
|
}
|
}
|
},
|
|
selectColum: function(column) {
|
if (!column || column == this.selectedColumn) {
|
return;
|
}
|
|
if (this.selectedColumn) {
|
this.selectedColumn.el.title.removeClass("title-selected");
|
this.selectedColumn.el.title.addClass("title-unselected");
|
}
|
|
column.el.title.removeClass("title-unselected");
|
column.el.title.addClass("title-selected");
|
|
this.selectedColumn = column;
|
},
|
|
textFormatter: function(value) {
|
return value;
|
},
|
|
moneyFormatter: function(value) {
|
if (!value || isNaN(value)) {
|
return "￥0";
|
}
|
|
var num = typeof value == 'string' ? parseFloat(value) : value;
|
num = num.toFixed(0);
|
num = '￥' + num;
|
|
return num;
|
},
|
|
percentFormatter: function(value) {
|
if (value) {
|
var num = typeof value == 'string' ? parseFloat(value) : value;
|
num = num.toFixed(0);
|
return num + '%';
|
}
|
return "0%";
|
},
|
|
getColumnFormatter: function(formatter) {
|
if (!formatter) {
|
return this.textFormatter;
|
}
|
else if ("money" == formatter) {
|
return this.moneyFormatter;
|
}
|
else if ("percent" == formatter) {
|
return this.percentFormatter;
|
}
|
else {
|
return this.textFormatter;
|
}
|
},
|
|
getColumnAlignClass: function(align) {
|
if ("left" == align) {
|
return "column-left";
|
}
|
else if ("right" == align) {
|
return "column-right";
|
}
|
else {
|
return "column-center";
|
}
|
},
|
|
getColumnWidthClass: function(width) {
|
width = "" + width;
|
|
if ("0.6" == width) {
|
return "column-width-06";
|
}
|
else if ("1" == width) {
|
return "column-width-10";
|
}
|
else if ("1.5" == width) {
|
return "column-width-15";
|
}
|
else if ("2.5" == width) {
|
return "column-width-25";
|
}
|
else {
|
return "column-width-10";
|
}
|
}
|
});
|
|
|
//*************************************
|
Sheet_Template = {};
|
|
Sheet_Template.container = [
|
'<div class="sheet">',
|
'<div class="sheet-body">',
|
'<div id="sheet_body" class="sheet-body-inner"></div>',
|
'</div>',
|
'</div>'
|
];
|
|
Sheet_Template.indicatorColumn = [
|
'<div class="column-indicator">',
|
'</div>'
|
];
|
|
Sheet_Template.indexColumn = [
|
'<div class="column-index">',
|
'</div>'
|
];
|
|
Sheet_Template.dataColumn = [
|
'<div class="column-data">',
|
'</div>'
|
];
|
|
Sheet_Template.indicator = [
|
'<div class="cell-indicator">',
|
'</div>'
|
];
|
|
Sheet_Template.top = [
|
'<div class="cell-top">',
|
'</div>'
|
];
|
|
Sheet_Template.title = [
|
'<div class="cell-title title-unselected">',
|
'</div>'
|
];
|
|
Sheet_Template.cell = [
|
'<div class="cell-data">',
|
'</div>'
|
];
|
