mwf.xdesktop.requireapp("process.xform", "$module", null, false);
/** @class datatablemobile 数据表格组件（移动端）。表格形式的多行数据编辑组件。
* @o2cn 数据表格移动端
* @example
* //可以在脚本中获取该组件
* //方法1：
* var datatable = this.form.get("name"); //获取组件
* //方法2
* var datatable = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.datatablepc
* @o2category formcomponents
* @since v6.2
* @o2range {process|cms|portal}
* @hideconstructor
*/
mwf.xapplication.process.xform.datatablemobile = new class(
/** @lends mwf.xapplication.process.xform.datatablepc# */
{
implements: [events],
extends: mwf.xapplication.process.xform.datatablepc,
loaddatatable: function(){
this.loading = true;
this._loadstyles();
this._loadtitletr();
this._loadtemplate();
this._createtemplatetable();
this._loadtotaltr();
this.fireevent("load");
this._loaddatatable(function(){
this._loadimportexportaction();
this.fieldmoduleloaded = true;
this.loading = false;
this.fireevent("postload");
}.bind(this));
},
_removeel: function(){
if( this.templatenode )this.templatenode.destroy();
if( this.totaldiv ){
this.totaldiv.destroy();
this.totaldiv = null;
}
},
_loadtitletr: function(){
this.titletr = this.table.getelement("tr");
var ths = this.titletr.getelements("th");
if (this.json.border){
ths.setstyles({
"border-bottom": this.json.border,
"border-right": this.json.border
});
}
if (this.json.titlestyles)ths.setstyles(this.json.titlestyles);
//datatable$title module
ths.each(function(th, index){
var json = this.form._getdomjson(th);
// th.store("datatable", this);
th.addclass("mwf_origional");
if (json){
// var module = this.form._loadmodule(json, th);
// this.form.modules.push(module);
// if( json.isshow === false )th.hide(); //隐藏列
if((json.total === "number") || (json.total === "count"))this.totalflag = true;
}
}.bind(this));
},
_loadtemplate: function(){
this.templatejson = {};
var trs = this.table.getelements("tr");
this.templatetr = trs[trs.length-1];
var tds = this.templatetr.getelements("td");
if (this.json.border) {
tds.setstyles({
"border-bottom": this.json.border,
"border-right": this.json.border,
"background": "transparent"
});
}
if (this.json.contentstyles)tds.setstyles(this.json.contentstyles);
//datatable$data module
var idx = 0;
tds.each(function(td, index){
var json = this.form._getdomjson(td);
// td.store("datatable", this);
td.addclass("mwf_origional");
if (json){
// var module = this.form._loadmodule(json, td);
// this.form.modules.push(module);
if( json.celltype === "sequence" )td.addclass("mwf_sequence"); //序号列
if( json.isshow === false ){
td.hide(); //隐藏列
}else{
if ((idx%2)===0 && this.json.zebracolor){
td.setstyle("background-color", this.json.zebracolor);
}else if(this.json.backgroundcolor){
td.setstyle("background-color", this.json.backgroundcolor);
}
idx ;
}
}
}.bind(this));
// var modulenodes = this.form._getmodulenodes(this.templatetr);
// modulenodes.each(function (node) {
// if (node.get("mwftype") !== "form") {
// var json = this.form._getdomjson(node);
// this.templatejson[json.id] = json ;
// }
// }.bind(this));
this.templatetr.hide();
},
_createtemplatetable: function(){
this.templatenode = new element("div").inject(this.node);
var titlediv = new element("div", {"styles": this.json.itemtitlestyles}).inject(this.templatenode);
titlediv.setstyle("overflow", "hidden");
new element("div.sequencediv", {
"styles": {"float": "left"},
"text": mwf.xapplication.process.xform.lp.item
}).inject(titlediv);
new element("div.mwf_sequence", { "styles": {"float": "left"} }).inject(titlediv);
new element("div.mwf_editaction", { "styles": this.form.css.mobiledatagridactionnode }).inject(titlediv);
var table = new element("table").inject(this.templatenode);
if (this.json.border) {
table.setstyles({
"border-top": this.json.border,
"border-left": this.json.border
});
}
table.setstyles(this.json.tablestyles);
table.set(this.json.properties);
var ths = this.titletr.getelements("th");
var tds = this.templatetr.getelements("td");
ths.each(function(th, index){
var newtr = new element("tr").inject(table);
var thjson = this.form._getdomjson(th);
var newth = th.clone().inject(newtr);
newth.set("html", th.get("html"));
newth.set("mwfid",th.get("id"));
if( thjson.isshow === false )newtr.hide();
var modulejson;
var td = tds[index];
var newtd = td.clone().inject(newtr);
newtd.set("html", td.get("html"));
newtd.set("mwfid",td.get("id"));
}.bind(this));
this.templatehtml = this.templatenode.get("html");
this.table.hide();
this.templatenode.hide();
},
_loadtotaltr: function(){
if( !this.totalflag )return;
this.totaldiv = new element("div.mwf_totaltr", {"styles": {"overflow": "hidden", "margin-bottom": "10px"}}).inject(this.node);
if( this.isshowsectionkey() && !(this.json.totalrowbysection || [] ).contains("module")){
this.totaldiv.hide()
}
if( this.isshowsectionby() && !(this.json.totalrowby || [] ).contains("module") ){
this.totaldiv.hide()
}
var titlediv = new element("div", {"styles": this.json.itemtitlestyles}).inject(this.totaldiv);
titlediv.setstyle("overflow", "hidden");
new element("div.sequencediv", {
"styles": {"float": "left"},
"text": mwf.xapplication.process.xform.lp.amount
}).inject(titlediv);
this.totaltable = new element("table").inject(this.totaldiv);
if (this.json.border) {
this.totaltable.setstyles({
"border-top": this.json.border,
"border-left": this.json.border
});
}
this.totaltable.setstyles(this.json.tablestyles);
this.totaltable.set(this.json.properties);
var ths = this.titletr.getelements("th");
var idx = 0;
//datatable$title module
ths.each(function(th, index){
var tr = new element("tr").inject(this.totaltable);
var json = this.form._getdomjson(th);
if (json){
if ((json.total === "number") || (json.total === "count")){
var datath = new element("th").inject(tr);
datath.set("text", th.get("text"));
if (this.json.border){
ths.setstyles({
"border-bottom": this.json.border,
"border-right": this.json.border
});
}
datath.setstyles(this.json.titlestyles);
var datatd = new element("td").inject(tr);
if (this.json.border) {
datatd.setstyles({
"border-bottom": this.json.border,
"border-right": this.json.border,
"background": "transparent"
});
}
datatd.setstyles(this.json.amountstyles);
if( json.isshow === false ){
tr.hide(); //隐藏列
}else{
if ((idx%2)===0 && this.json.zebracolor){
datatd.setstyle("background-color", this.json.zebracolor);
}else if(this.json.backgroundcolor){
datatd.setstyle("background-color", this.json.backgroundcolor);
}
idx ;
}
this.totalcolumns.push({
"th" : datath,
"td" : datatd,
"index": index,
"type": json.total
})
}
}
}.bind(this));
var tds = this.templatetr.getelements("td");
//datatable$data module
tds.each(function(td, index){
var json = this.form._getdomjson(td);
if (json){
//总计列
var tcolumn = this.totalcolumns.find(function(a){ return a.index === index });
if(tcolumn){
var modulenodes = this.form._getmodulenodes(td); //获取总计列内的填写组件
if( modulenodes.length > 0 ){
tcolumn.modulejson = this.form._getdomjson(modulenodes[0]);
if(tcolumn.type === "number")this.totalnumbermoduleids.push( tcolumn.modulejson.id );
}
}
}
}.bind(this));
},
_gettotaltr: function(){
return this.totaldiv;
},
_createlinenode: function(beforenode){
var div;
if( beforenode ) {
div = new element("div").inject(beforenode, "after");
}else if( this.totaldiv ){
div = new element("div").inject(this.totaldiv, "before");
}else{
div = new element("div").inject(this.node);
}
return div;
},
_checkaddaction: function(){
if( this.data.data && this.data.data.length > 0 ){
if(this.addaction)this.addaction.hide();
return;
}
if( !this.editable || !this.addable ){
if(this.addaction)this.addaction.hide();
return;
}
if( !this.addaction ){
this._createaddaction();
}else{
this.addaction.show();
}
},
_createaddaction: function(){
if( !this.addaction ){
this.addaction = new element("div", {"styles": this.form.css.gridmobileactionnode}).inject(this.node, "top");
this.addaction.set("text", mwf.xapplication.process.xform.lp.addline);
this.addaction.addevent("click", function(e){
this._addline();
}.bind(this));
}
},
_loadstyles: function(){
if( this.json.recoverystyles ){
this.node.setstyles(this.json.recoverystyles);
}
// if (this.json.border) {
// this.table.setstyles({
// "border-top": this.json.border,
// "border-left": this.json.border
// });
// }
// this.node.setstyles(this.json.styles);
// this.table.setstyles(this.json.tablestyles);
// this.table.set(this.json.properties);
},
_loadsectionline_editsection: function(container, data, index, isedited, isnew){
var sectionline = new mwf.xapplication.process.xform.datatablemobile.sectionline(container, this, data, {
index : index,
indextext : (index 1).tostring(),
isnew: isnew,
isedited: typeof(isedited) === "boolean" ? isedited : this.editable,
iseditable: this.editable && this.issectionlineeditable(data),
isdeleteable: this.deleteable && this.issectionlineeditable(data),
isaddable: this.addable && this.issectionlineeditable(data)
});
// this.fireevent("beforeloadline", [line]);
sectionline.load();
// this.fireevent("afterloadline", [line]);
return sectionline;
},
_loadsectionline: function(container, data, index, isedited, isnew){
var sectionline = new mwf.xapplication.process.xform.datatablemobile.sectionline(container, this, data, {
index : index,
indextext : (index 1).tostring(),
isnew: isnew,
isedited: typeof(isedited) === "boolean" ? isedited : this.editable,
iseditable: this.editable,
isdeleteable: this.deleteable,
isaddable: this.addable,
ismergeread: this.ismergeread
});
// this.fireevent("beforeloadline", [line]);
sectionline.load();
// this.fireevent("afterloadline", [line]);
return sectionline;
},
_loadline: function(container, data, index, isedited, isnew){
var line = new mwf.xapplication.process.xform.datatablemobile.line(container, this, data, {
index : index,
indextext : (index 1).tostring(),
isnew: isnew,
isedited: typeof(isedited) === "boolean" ? isedited : this.editable,
iseditable: this.editable,
isdeleteable: this.deleteable,
isaddable: this.addable,
ismergeread: this.ismergeread
});
this.fireevent("beforeloadline", [line]);
line.load();
this.fireevent("afterloadline", [line]);
return line;
},
_loadimportexportaction: function(){
this.impexpnode = this.node.getelement("div.impexpnode");
if( this.impexpnode )this.impexpnode.destroy();
}
});
mwf.xapplication.process.xform.datatablemobile$title = new class({
extends: mwf.app$module,
_loaduserinterface: function(){
if(this.json.recoverystyles){
this.node.setstyles(this.json.recoverystyles);
}
if (this.json.prefixicon || this.json.suffixicon){
var text = this.node.get("text");
this.node.empty();
var lineheight = this.node.getstyle("line-height") || "28px";
this.wrapnode = new element("div", {
"styles": {
"display": "flex",
"align-items": "center"
// "justify-content": "center"
}
}).inject(this.node);
if (this.json.prefixicon){
this.prefixnode = new element("div", {"styles": {
"width": "20px",
"min-width": "20px",
"height": lineheight,
"background": " center center no-repeat"
}}).inject(this.wrapnode);
}
this.textnode = new element("div", {"styles": {
"line-height": lineheight,
"vertical-align": "top",
"padding": "1px"
}, "text": text}).inject(this.wrapnode);
if (this.json.suffixicon){
this.suffixnode = new element("div", {"styles": {
"width": "20px",
"min-width": "20px",
"height": lineheight,
"background": " center center no-repeat"
}}).inject(this.wrapnode);
}
}
}
});
mwf.xapplication.process.xform.datatablemobile$data = new class({
extends: mwf.app$module
});
mwf.xapplication.process.xform.datatablemobile.sectionline = new class({
extends: mwf.xapplication.process.xform.datatablepc.sectionline,
_loadline: function(container, data, index, isedited, isnew){
var line = new mwf.xapplication.process.xform.datatablemobile.line(container, this.datatable, data, {
indexinsectionline : index,
indexinsectionlinetext : (index 1).tostring(),
index: this.datatable.linelist.length,
indextext : (this.datatable.linelist.length 1).tostring(),
isnew: isnew,
isedited: typeof(isedited) === "boolean" ? isedited : this.options.isedited,
iseditable: this.options.iseditable,
isdeleteable: this.options.isdeleteable,
isaddable: this.options.isaddable,
ismergeread: this.options.ismergeread,
sectionkey: this.sectionkey
}, this);
this.datatable.fireevent("beforeloadline", [line]);
line.load();
this.datatable.fireevent("afterloadline", [line]);
return line;
},
_createlinenode: function( beforenode ){
var div;
if( beforenode ){
div = new element("div").inject(beforenode, "after");
}else if( this.totaldiv ){
div = new element("div").inject(this.totaldiv, "before");
}else{
div = this.datatable._createlinenode();
// tr = new element("tr").inject(this.tbody || this.table);
}
return div;
},
loadsectionkeynode: function () {
debugger;
var stylename = this.datatable.isshowsectionkey() ? "sectionkeystyles" : "sectionbystyles";
var sectionkeystyles = this.datatable._parsestyles( this.datatable.json[stylename] || {} );
var keynode = new element("div.mwf_sectionkey", {
styles : sectionkeystyles
}).inject( this.sectionkeynode );
this.keynode = keynode;
var separator;
if( this.datatable.isshowsectionkey() ){
separator = this.datatable.json.keycontentseparator;
}else{
separator = this.datatable.json.keycontentseparatorsectionby;
}
this.datatable.getsectionkeywithmerge( this.data, function (key) {
if( o2.typeof(key) === "string" ){
keynode.set("text", key (separator || ""));
}else{
promise.resolve(key).then(function (k) {
keynode.set("text", k (separator || ""));
}.bind(this))
}
}.bind(this));
},
clearsubmodules: function(){
if( this.isunchangedall )return;
var map = this.unchangedlinemap || {};
var hasunchangedline = object.keys(map).length > 0;
if( !hasunchangedline ){
if( this.sectionkeynode ){
this.sectionkeynode.destroy();
this.sectionkeynode = null;
}
}
var lines = [];
object.values(map).each(function (d) {
lines = lines.concat(d);
});
for (var i=0; i 0 ){
tcolumn.modulejson = this.form._getdomjson(modulenodes[0]);
if(tcolumn.type === "number")this.totalnumbermoduleids.push( tcolumn.modulejson.id );
}
}
}
}.bind(this));
},
_gettotaltr: function(){
return this.totaldiv;
},
getlasttr: function () {
if( this.totaldiv )return this.totaldiv;
if( this.linelist.length )return this.linelist.getlast().node;
return this.sectionkeynode;
}
});
mwf.xapplication.process.xform.datatablemobile.line = new class({
extends: mwf.xapplication.process.xform.datatablepc.line,
load: function(){
if( !this.datatable.multieditmode && this.options.isedited )this.datatable.currenteditedline = this;
this.node.addclass("mwf_datatable");
this.node.setstyles( object.merge({"margin-bottom": "10px"}, this.datatable.json.styles||{} )); //"overflow": "hidden",
this.loadmodules();
this.loadsequence();
this.createactions();
// this.loadzebrastyle();
// this.loadeditedstyle();
if( !this.datatable.multieditmode )this.originaldata = object.clone(this.data);
// if(this.options.isnew && this.options.isedited){
// debugger;
// this.data = this.getdata();
// if( !this.datatable.multieditmode )this.originaldata = object.clone(this.data);
// this.options.isnew = false;
// }
},
createactions: function () {
//不允许编辑，直接返回
if(!this.options.iseditable)return;
var editactiontd = this.node.getelement(".mwf_editaction");
//this.moveactiontd = this.node.getelement(".moveaction");
if(this.datatable.multieditmode){ //多行编辑模式
if(this.options.isdeleteable)this.createdelaction(editactiontd);
if(this.options.isaddable)this.createaddaction(editactiontd);
}else{ //单行编辑模式
if(this.options.isdeleteable)this.createdelaction(editactiontd);
if(this.options.iseditable)this.createeditaction(editactiontd);
if(this.options.isaddable)this.createaddaction(editactiontd);
this.createcanceleditaction(editactiontd);
this.createcompleteaction(editactiontd);
this.checkactiondisplay();
}
},
checkactiondisplay: function(){
if( this.options.isedited ){
if( this.addlineaction )this.addlineaction.hide();
if( this.editlineaction )this.editlineaction.hide();
if( this.dellineaction )this.dellineaction.hide();
if( this.completelineaction )this.completelineaction.show();
if( this.cancellineeditaction )this.cancellineeditaction.show();
}else{
if( this.addlineaction )this.addlineaction.show();
if( this.editlineaction )this.editlineaction.show();
if( this.dellineaction )this.dellineaction.show();
if( this.completelineaction )this.completelineaction.hide();
if( this.cancellineeditaction )this.cancellineeditaction.hide();
}
},
createeditaction: function(td){
this.editlineaction = new element("div", {
"styles": this.form.css.mobiledatagrideditactionnode,
"text": mwf.xapplication.process.xform.lp.edit,
"events": {
"click": function(ev){
if( !this.options.isedited ){
this.datatable._changeeditedline(this)
}
ev.stoppropagation();
}.bind(this)
}
}).inject(td);
},
createaddaction: function(td){
this.addlineaction = new element("div", {
"styles": this.form.css.mobiledatagridaddactionnode,
"text": mwf.xapplication.process.xform.lp.add,
"events": {
"click": function(ev){
this.datatable._insertline( ev, this );
ev.stoppropagation();
}.bind(this)
}
}).inject(td);
},
createcompleteaction: function(td){
this.completelineaction = new element("div", {
"styles": this.form.css.mobiledatagridcompleteactionnode,
"text": mwf.xapplication.process.xform.lp.completededit,
"events": {
"click": function(ev){
this.datatable._completelineedit(ev, true);
ev.stoppropagation();
}.bind(this)
}
}).inject(td);
},
createcanceleditaction: function(td){
this.cancellineeditaction = new element("div", {
"styles": this.form.css.mobiledatagriddelactionnode,
"text": mwf.xapplication.process.xform.lp.canceledit,
"events": {
"click": function(ev){
this.datatable._cancellineedit(ev, this);
ev.stoppropagation();
}.bind(this)
}
}).inject(td);
},
createdelaction: function(td){
this.dellineaction = new element("div", {
"styles": this.form.css.mobiledatagridcancelactionnode,
"text": mwf.xapplication.process.xform.lp["delete"],
"events": {
"click": function(ev){
this.datatable._deleteline( ev, this );
// if( this.datatable.currenteditedline === this )this.datatable.currenteditedline = null;
ev.stoppropagation();
}.bind(this)
}
}).inject(td);
this.dellineaction.show()
}
}); source