MWF.xDesktop.requireApp("Template", "MDomItem", null, false);
var MGrid = new Class({
Extends: MWF.widget.Common,
Implements: [Options, Events],
options: {
style: "default",
isNew: false,
isEdited: false,
showNotEmptyFlag : true,
verifyType : "batch", //batch一起校验,或alert弹出
//batch,所有item的错误都校验,每个item所有错误一起校验,错误显示在Item的字段后或指定区域;
//batchSingle, 所有item的错误都校验,每个item只校验一个错误,错误显示在Item的字段后或指定区域;
//alert,验证时遇到一个不成功的Item用app.notice()弹出消息后中断,
//single,验证时遇到一个不成功的Item在字段后面或指定区域显示错误信息后中断
itemTemplate : null,
objectId : "",
hasSequence : true,
hasOperation : false,
isCreateTh : true,
containerIsTable : false,
isCreateTrOnNull : true,
minTrCount : 0,
maxTrCount : 0,
tableAttributes : null,
thAttributes : null,
tdAttributes : null,
tableClass : "formTable",
thClass : "formTableTitle",
tdClass : "formTableValue",
thAlign : "center",
tdAlign : "left",
sequenceClass : "formTableSequence",
addActionTdClass : "formTableAddTd",
removeActionTdClass : "formTableRemoveTd",
lp : {
remove : "",
add : ""
}
},
initialize: function (container, data, options, app, css) {
this.setOptions(options);
this.path = "/x_component_Template/$MGrid/";
this.cssPath = "/x_component_Template/$MGrid/" + this.options.style + "/css.wcss";
this._loadCss();
if (css) {
this.css = Object.merge(this.css, css)
}
this.app = app;
this.container = $(container);
this.data = data;
this.isSourceDataEmpty = false;
if (!this.data || this.data == "") {
this.isSourceDataEmpty = true;
this.data = [{}];
}
this.itemTemplate = this.options.itemTemplate;
this.items = null;
this.th = null;
this.trIndex = 0;
this.trList = [];
this.trObjs = null;
this.trObjs_removed = null;
this.trObjs_new = null;
this.thTemplate = null; //属性 lable button_add
this.trTemplate = null; //属性 item sequence button_remove lable
this.valSeparator = /,|;|\^\^|\|/g; //如果是多值对象,作为用户选择的多个值的分隔符
},
load: function () {
this.fireEvent("queryLoad");
//如果itemTemplate没有name赋值Key
for (var it in this.itemTemplate) {
if (!this.itemTemplate[it]["name"]) {
this.itemTemplate[it]["name"] = it;
}
this.itemTemplate[it]["key"] = it;
}
//如果itemTemplate没有name和Key不一致,那么根据name赋值itemTemplate
var json = {};
for (var it in this.itemTemplate) {
if (it != this.itemTemplate[it]["name"]) {
json[this.itemTemplate[it]["name"]] = this.itemTemplate[it]
}
}
for (var it in json) {
this.itemTemplate[it] = json[it];
}
this.createTable( this.itemTemplate );
this.createHead( this.itemTemplate );
this.trObjs = {};
this.trObjs_removed = {};
this.trObjs_new = {};
this.trList = [];
(this.options.isEdited || this.options.isNew) ? this.loadEdit() : this.loadRead();
this.fireEvent("postLoad", [this]);
},
setTrTemplate: function( template ){
if( typeOf( template ) == "string"){
this.trTemplate = this.string2DOM( template )[0];
}else{
this.trTemplate = template;
}
},
setThTemplate : function( template ){
if( typeOf( template ) == "string"){
this.thTemplate = this.string2DOM( template )[0]
}else{
this.thTemplate = template;
}
},
loadEdit:function(){
if( !this.isSourceDataEmpty ){
if( typeOf( this.data ) != "array" ){
this.data = [ this.data ]
}
for( var i=0; i"), obj.selectValue, obj.selectText );
val = vals.join(",");
}else{
val = val.replace(/\n/g,"
").replace( this.valSeparator,"," )
}
el.set("html", val );
}.bind(this));
sequenceContainers.set("text", this.trIndex );
},
createTr_read_noTemplate : function( itemData ){
var tr = new Element("tr" , { "data-id" : "_"+this.trIndex });
if( this.options.hasSequence ){
var td = new Element("td", { align : "center", text : this.trIndex }).inject( tr );
if( this.options.sequenceClass && this.css[this.options.sequenceClass] )td.setStyles(this.css[this.options.sequenceClass]);
}
var attr = {};
if( this.options.tdAlign )attr.align = this.options.tdAlign;
var idx = 1;
for (var it in itemData ){
var tdAttributes = {};
if(this.options.tdAttributes && this.options.tdAttributes["_"+idx] ){
tdAttributes = this.options.tdAttributes["_"+idx];
}
var obj = itemData[it];
var val = obj.value || "";
if( obj.selectValue && obj.selectText ){
var vals = this.replaceText( val.replace(/\n/g,"
"), obj.selectValue, obj.selectText );
val = vals.join(",");
}else{
val = val.replace(/\n/g,"
").replace( this.valSeparator,"," )
}
var td = new Element("td", tdAttributes).inject( tr );
td.set( "text", val );
if( this.options.tdAlign )td.set( "align" , this.options.tdAlign);
if( this.options.tdClass && this.css[this.options.tdClass] )td.setStyles(this.css[this.options.tdClass]);
idx ++;
}
tr.inject( this.table );
},
createHead : function( itemData ){
if( !this.options.isCreateTh )return;
if( this.thTemplate ){
this.createHead_byTemplate( itemData );
}else{
this.createHead_noTemplate( itemData );
}
},
createHead_byTemplate : function( itemData ){
var th = this.tableHead = this.thTemplate;
var labelContainers = th.getElements("[lable]");
labelContainers.each(function(el) {
var obj = itemData[el.get("lable")];
if (!obj)return;
if(obj.text)el.set("text", obj.text);
});
if( this.options.hasOperation && this.options.isEdited ){
var add_button = th.getElement("[button_add]");
this.createAddButton( add_button );
}
th.inject( this.table );
},
createHead_noTemplate : function( itemData ){
var tr = this.tableHead = new Element("tr");
var align = this.options.thAlign == "" ? {} : { align : this.options.thAlign };
var styles = (this.options.thClass && this.css[this.options.thClass]) ? this.css[this.options.thClass] : {};
if( this.options.hasSequence ){
var th = new Element("th", { text : "序号" }).inject( tr );
th.set( align );
th.setStyles( styles );
}
var idx = 1;
for (var it in this.itemTemplate){
var thAttr = {};
if(this.options.thAttributes && this.options.thAttributes["_"+idx] ){
thAttr = this.options.thAttributes["_"+idx];
}
var th = new Element("th").inject(tr);
if( this.options.showNotEmptyFlag && this.itemTemplate[it].notEmpty ){
new Element( "span" , { styles : { color : "red", text : "*" } }).inject( th )
}
th.set( align );
th.setStyles( styles );
if(this.itemTemplate[it].text)th.set("text", this.itemTemplate[it].text );
idx++;
}
if( this.options.hasOperation && this.options.isEdited ){
var th = new Element("th", { align : "center", styles : { width : "24px", styles : {"text-align" : "center" }} } ).inject(tr);
if( this.options.addActionTdClass && this.css[this.options.addActionTdClass] )th.setStyles(this.css[this.options.addActionTdClass]);
this.createAddButton( th );
}
tr.inject( this.table );
this.fireEvent("postCreateHead", [tr] );
},
createAddButton : function( container ){
var button = new Element("div", { title : "添加" }).inject( container );
if( this.options.lp.add )button.set("text",this.options.lp.add );
if( this.css.actionAdd )button.setStyles( this.css.actionAdd );
button.addEvent("click", function( e ){
this.fireEvent("queryAddTr");
this.createTr( this.itemTemplate, true );
this.fireEvent("postAddTr");
}.bind(this));
if( this.css.actionAdd && this.css.actionAdd_over){
button.addEvents({
"mouseover" : function( e ){ this.node.setStyles( this.obj.css.actionAdd_over ) }.bind({ node : button, obj : this }),
"mouseout" : function( e ){ this.node.setStyles( this.obj.css.actionAdd ) }.bind({ node : button, obj : this })
})
}
return button;
},
addTrs : function( count ){
if( 100 < count )count = 100;
for( var i=0 ; i', '', 1] ||
str.test('^', '',2] ||
str.test('^
', '', 2] ||
str.test('^ | ', '
', 3] ||
str.test('^', '', 1] ||
str.test('^', '', 1] ||
str.test('^', '', 1] ||
str.test('^', '', 1] ||
['', '', 0];
if( container ){
var el = new Element('div', {html: wrapper[0] + str + wrapper[1]}).getChildren();
while(wrapper[2]--) el = el[0].getChildren();
el.inject( container );
if( callback )callback( container );
return el;
}else{
var div = new Element('div', {html: wrapper[0] + str + wrapper[1]});
div.setStyle("display","none").inject( $(document.body) );
if( callback )callback( div );
var el = div.getChildren();
while(wrapper[2]--) el = el[0].getChildren();
div.dispose();
return el;
}
}
});
var MGridTr = new Class({
Implements: [Options, Events],
options: {
objectId : "",
isEdited : true,
id : "",
index : 0,
indexText : "0",
hasSequence : true,
hasOperation : true,
align : "left",
isNew : true,
className : "",
tdAttributes : null
},
initialize: function (container,options,itemData, parent, template, sourceData) {
this.setOptions(options);
this.container = container;
this.mElement = null;
this.items = {};
this.itemData = itemData;
this.parent = parent;
this.template = template;
this.sourceData = sourceData;
this.css = this.parent.css || {};
this.app = this.parent.app;
},
load:function(){
if( this.options.isEdited ){
this.create_Edit();
}else{
this.create_Read();
}
},
create_Read : function(){
var tr = this.mElement = new Element("tr", { "data-id" : this.options.id }).inject(this.container);
var attr = {};
if( this.options.align )attr.align = this.options.align;
var styles = {};
if( this.options.className && this.css[this.options.className] )styles = this.css[this.options.className];
if( this.options.hasSequence ){
var td = this.sequenceTd = new Element("td", { align : "center", text : ( this.options.indexText || this.options.index) }).inject( tr );
if( this.parent.options.sequenceClass && this.css[this.parent.options.sequenceClass] )td.setStyles(this.css[this.parent.options.sequenceClass]);
}
var idx = 1;
for (var it in this.itemData ){
var tdAttr = this.options.tdAttributes && this.options.tdAttributes["_"+idx] ? this.options.tdAttributes["_"+idx] : {};
var td = new Element("td", { "text" : this.itemData[it].value }).inject( tr );
td.set( attr );
td.set( tdAttr );
td.setStyle( styles );
idx++;
}
},
create_Edit : function(e, el){
if( this.template ){
this.create_Edit_byTemplate( e, el );
}else{
this.create_Edit_noTemplate( e, el );
}
},
setSequenceText : function( text ){
if(this.sequenceTd)this.sequenceTd.set("text",text);
},
create_Edit_byTemplate : function(){
this.mElement = this.template;
this.mElement.set("data-id", this.options.id );
if( this.options.hasSequence ){
this.sequenceTd = this.mElement.getElement( "[sequence]" );
if(this.sequenceTd)this.sequenceTd.set( "text" , ( this.options.indexText || this.options.index) );
}
this.mElement.getElements("[lable]").each(function( el ) {
var itData = this.itemData[el.get("lable")];
if (!itData)return;
if(itData.text)el.set("text", itData.text);
}.bind(this));
this.mElement.getElements("[item]").each(function( el ) {
var itData = this.itemData[el.get("item")];
if (!itData)return;
this.createItem( el, itData );
}.bind(this));
if( this.options.hasOperation && this.options.isEdited ){
if( this.parent.options.minTrCount && this.options.index > this.parent.options.minTrCount ){
var removeContainer = this.mElement.getElement("[button_remove]");
this.parent.createRemoveButton( this, removeContainer );
}
}
this.mElement.setStyle("display","");
this.mElement.inject( this.container );
},
create_Edit_noTemplate : function(){
this.mElement = new Element("tr", { "data-id" : this.options.id });
var attr = {};
if( this.options.align )attr.align = this.options.align;
var styles = {};
if( this.options.className && this.css[this.options.className] )styles = this.css[this.options.className];
if( this.options.hasSequence ){
var td = this.sequenceTd = new Element("td", { align : "center", text : ( this.options.indexText || this.options.index) }).inject( this.mElement );
if( this.parent.options.sequenceClass && this.css[this.parent.options.sequenceClass] )td.setStyles(this.css[this.parent.options.sequenceClass]);
}
var idx = 1;
for (var it in this.itemData){
var tdAttr = this.options.tdAttributes && this.options.tdAttributes["_"+idx] ? this.options.tdAttributes["_"+idx] : {};
var td = new Element("td").inject( this.mElement );
td.set(attr);
td.set( tdAttr );
td.setStyles( styles );
var itData = this.itemData[it];
this.createItem( td, itData );
idx++;
}
if( this.options.hasOperation && this.options.isEdited ){
if( this.parent.options.minTrCount && this.options.index > this.parent.options.minTrCount ) {
var t = new Element("td", {align: "center", style: {width: "30px"}}).inject(this.mElement);
var className = this.parent.options.removeActionTdClass;
if( className && this.css[className] )t.setStyles(this.css[className]);
this.parent.createRemoveButton(this, t);
}else{
var t = new Element("td").inject(this.mElement);
var className = this.parent.options.removeActionTdClass;
if( className && this.css[className] )t.setStyles(this.css[className]);
}
}
this.mElement.inject( this.container );
},
createItem : function( container, itData ){
//if( itData.disable )return;
itData.objectId = itData.name;
var item = new MDomItem(container, itData, this, this.app, this.css );
if( this.parent.options.verifyType == "batchSingle" ){
item.options.warningType = "single";
}else{
item.options.warningType = this.parent.options.verifyType;
}
item.options.name = itData.name + "_" + this.options.index;
item.index = this.options.index;
item.parent = this;
item.load();
this.items[itData.objectId] = item;
},
//remove : function(){
// this.mElement.destroy();
//},
destroy : function(){
Object.each(this.items, function(item){
item.destroy();
}.bind(this));
this.mElement.destroy();
MWF.release(this);
},
enableItem: function( itemName ){
if( itemName && this.items[itemName] ){
var item = this.items[itemName];
if( item.options.disable ){
item.enable();
}
}
},
disableItem: function( itemName ){
if( itemName && this.items[itemName] ){
var item = this.items[itemName];
if( !item.options.disable ){
item.disable();
}
}
},
getPrevSilbing : function(){
var idx = this.parent.trList.indexOf( this );
if( idx > 0 ){
return this.parent.trList[ idx -1 ];
}else{
return null;
}
},
getNextSilbing : function(){
var idx = this.parent.trList.indexOf( this );
if( idx!=-1 && idx < this.parent.trList.length - 1 ){
return this.parent.trList[ idx + 1 ];
}else{
return null;
}
},
verify : function(isShowWarming) {
var flag = true;
for (var it in this.items ) {
if (!this.items[it].verify(isShowWarming)) {
if (this.parent.options.verifyType == "batch" || this.parent.options.verifyType == "batchSingle") {
flag = false;
} else {
return false;
}
}
}
return flag;
},
getItemsKeyValue : function(separator , onlyModified ) {
//separator 多值合并分隔符
var key_value = {};
for (var it in this.items ) {
var item = this.items[it];
var value = onlyModified ? item.getModifiedValue() : item.getValue();
if( value != null ){
if (typeOf(value) === "array") {
key_value[item.options.objectId] = (typeOf(separator) == "string" ? value.join(separator) : value );
} else {
key_value[item.options.objectId] = value;
}
}
}
return key_value;
},
getResult : function(verify, separator, isShowWarming, onlyModified, keepAllData ) {
if ( !verify || this.verify(isShowWarming)) {
if( keepAllData && this.sourceData ){
var result = this.sourceData;
var map = this.getItemsKeyValue(separator, onlyModified);
for( var key in map ){
result[key] = map[key];
}
return result;
}else{
return this.getItemsKeyValue(separator, onlyModified);
}
} else {
return false;
}
}
});