(function ($) {
|
DataObject = Object.subClass({
|
init: function(data) {
|
this.record = data || {};
|
this.old = {};
|
this.changed = false;
|
|
Object.call(this, {});
|
},
|
|
setValue: function(prop, value) {
|
this.record[prop] = value;
|
|
if (this.old[prop] != this.record[prop]) {
|
this.changed = true;
|
}
|
|
if (this.onDataChange) {
|
this.onDataChange();
|
}
|
},
|
|
getValue: function(prop) {
|
return this.record[prop];
|
},
|
|
valueChanged: function(prop) {
|
return this.old[prop] != this.record[prop];
|
},
|
|
commit: function() {
|
this.old = $.extend({}, this.record);
|
this.changed = false;
|
}
|
});
|
|
Card = $.fm.Card = Control.subClass({
|
template: [
|
'<table class="datacard">',
|
'</table>'
|
],
|
template_title: [
|
'<tr>',
|
'<td id="title_body" class="datacard_group">',
|
'<div class="datacard_title"><img class="datacard_title_img" src="../../../image/detail.png"><label id="lbl_title"></label></div>',
|
'</td>',
|
'</tr>'
|
],
|
template_line: '<tr></tr>',
|
template_line_validate: '<tr><td id="cell" class="datacard_group"><div></div></td></tr>',
|
template_key: '<th class="datacard_cell datacard_key"></th>',
|
template_value: [
|
'<td class="datacard_cell datacard_value">',
|
'<div style="position: relative; width: 100%; height: 100%">',
|
'<div id="value" class="datacard_value_editor"></div>',
|
'<div id="validator" class="Validform_checktip datacard_value_validator"></div>',
|
'</div>',
|
'</td>'
|
],
|
template_validate: '<td><label class="Validform_checktip"></label></td>',
|
template_editor: '<input>',
|
template_select: '<select></select>',
|
template_select_option: '<option></option>',
|
|
init: function(options) {
|
this.linkElement = null;
|
this.editClasss = ["input", "textarea"];
|
this.editable = false;
|
this.columns = [];
|
this.editors = {};
|
this.tiptype = 2;
|
this.columnCount = 1;
|
this.cellCount = 0;
|
this.columnPosition = 0;
|
this.currentLine = null;
|
this.dataObject = new DataObject();
|
|
Control.call(this, options);
|
|
this.createElements();
|
if (this.linkElement) {
|
this.collectElements();
|
}
|
|
if (this.url) {
|
var me = this;
|
Server.getData(this.url, function(data) {
|
Loading.hide();
|
|
if (me.onGetData) {
|
data = me.onGetData(data);
|
}
|
me.setData(data);
|
});
|
}
|
else if (this.data) {
|
this.setData(this.data);
|
}
|
},
|
|
createElements: function() {
|
var me = this;
|
|
this.canvas.addClass("datacard");
|
var body = this.body = $(this.template.join(""));
|
|
this.columnCount > 1 ? (this.cellCount = this.columnCount * 2) : (this.cellCount = 3);
|
|
if (this.columnCount > 1) {
|
var validateLine = $(this.template_line_validate);
|
$("#cell", validateLine).attr("colspan", this.cellCount);
|
this.body.append(validateLine);
|
}
|
|
var tableLine = null;
|
for (var i = 0; i < this.columns.length; i++) {
|
var column = this.columns[i];
|
column.index = i;
|
column.span = column.span || 1;
|
tableLine = this.createOneColumn(tableLine, column);
|
}
|
|
if (this.columnPosition > 0 && this.columnPosition < this.columnCount) {
|
for (var i = this.columnPosition; i <= this.columnCount; i++) {
|
var column = {span: 1};
|
tableLine = this.createOneColumn(tableLine, column);
|
}
|
}
|
if(body.Validform) {
|
body.Validform({
|
tiptype: this.tiptype
|
});
|
}
|
|
this.canvas.append(body);
|
},
|
|
createOneColumn: function(tableLine, column) {
|
var me = this;
|
|
//1. create title
|
if (column.group) {
|
var title = $(this.template_title.join(""));
|
$("#lbl_title", title).html(column.group);
|
$("#title_body", title).attr("colspan", this.cellCount);
|
|
this.body.append(title);
|
this.columnPosition = 0;
|
}
|
|
//2. create row
|
if ((this.columnPosition == 0) || (this.columnPosition >= this.columnCount)) {
|
tableLine = this.currentLine = $(this.template_line);
|
tableLine.cells = [];
|
|
this.body.append(tableLine);
|
this.columnPosition = 0;
|
}
|
|
//2. create column
|
var cell = {};
|
tableLine.cells.push(cell);
|
|
//2.1
|
cell.key = $(this.template_key);
|
if (column.caption) {
|
cell.key.html(column.caption);
|
}
|
tableLine.append(cell.key);
|
|
//2.2
|
var content = $(this.template_value.join(""));
|
cell.value = $("#value", content);
|
cell.validator = $("#validator", content);
|
cell.validator.click(function() {
|
var el = $(this);
|
var message = $(".Validform_checktip", el);
|
if(message.html() != null && message.html() != "") {
|
alert(message.html());
|
}
|
});
|
|
if (column.span > 1) {
|
content.attr("colspan", column.span * 2 - 1);
|
}
|
this.columnPosition = this.columnPosition + column.span;
|
|
if (column.field) {
|
var editor = ControlCreator.create(column, this);
|
editor.onValueChange = function() {
|
if (me.onValueChange) {
|
me.onValueChange.call(me);
|
}
|
}
|
|
this.editors[column.field] = editor;
|
}
|
|
editor.appendTo(cell.value);
|
tableLine.append(content);
|
|
return tableLine;
|
},
|
|
collectElements: function() {
|
var linkElement = this.getEl(this.linkElement);
|
if (!linkElement) return;
|
|
for (var no in this.editClasss) {
|
var editClass = this.editClasss[no];
|
var valueEl = $(editClass, linkElement);
|
this.linkTo(valueEl, this.editors);
|
}
|
|
var valueEl = $("select", linkElement);
|
this.linkTo(valueEl, this.editors);
|
|
var valueEl = $("label", linkElement);
|
this.linkTo(valueEl, this.editors);
|
|
var valueEl = $("div", linkElement);
|
this.linkTo(valueEl, this.editors);
|
|
var valueEl = $("img", linkElement);
|
this.linkTo(valueEl, this.editors);
|
},
|
|
linkTo: function(valueEl, link) {
|
for (var i = 0; i < valueEl.length; i++) {
|
var item = $(valueEl.get(i));
|
|
var fieldname = item.attr("field");
|
if (!fieldname) { fieldname = item.attr("name")}
|
|
if (fieldname) {
|
fieldname = fieldname.toLowerCase();
|
link[fieldname] = item;
|
}
|
}
|
},
|
|
setData: function(line) {
|
var dataObject = this.dataObject;
|
|
dataObject.record = line;
|
dataObject.old = $.extend({}, line);
|
dataObject.changed = false;
|
|
// console.log(JSON.stringify(line));
|
|
for (var prop in line) {
|
var editor = this.editors[prop];
|
|
if (editor) {
|
editor.setValue ? editor.setValue(line[prop]) : editor.val(line[prop]);
|
}
|
}
|
},
|
|
setValue: function(field, value) {
|
var dataObject = this.dataObject;
|
|
var oldValue = dataObject.getValue(field);
|
if (oldValue == value) {
|
return;
|
}
|
|
dataObject.setValue(field, value);
|
|
var editor = this.editors[field];
|
if (editor) {
|
editor.setValue ? editor.setValue(value) : editor.val(value);
|
}
|
|
if (this.onValueChange) {
|
this.onValueChange();
|
}
|
},
|
|
getData: function() {
|
var record = this.dataObject.record, old = this.dataObject.old;
|
|
for (var prop in this.editors) {
|
var editor = this.editors[prop];
|
record[prop] = editor.getValue ? editor.getValue() : editor.val();
|
}
|
|
for (var prop in record) {
|
if (old[prop] != record[prop]) {
|
this.dataObject.changed = true;
|
break;
|
}
|
}
|
|
return this.dataObject;
|
},
|
|
commit: function() {
|
this.dataObject.commit();
|
},
|
|
getEditByField: function(field) {
|
return this.editors[field];
|
},
|
|
setReadOnly: function(prop, value) {
|
if (typeof prop == "string") {
|
var editor = this.editors[prop];
|
editor.setReadOnly(value);
|
}
|
else {
|
value = prop;
|
|
for (var prop in this.editors) {
|
var editor = this.editors[prop];
|
editor.setReadOnly(value);
|
}
|
}
|
},
|
|
notify: function(event) {
|
var column = this.columns[event.senderKey];
|
if (!column) {
|
return;
|
}
|
|
var reciver = column[event.name];
|
if (reciver) {
|
reciver(event.newValue, event.record, column, this);
|
}
|
},
|
|
empty: function() {
|
this.canvas.empty();
|
}
|
|
});
|
|
})(jQuery);
|
