MGrid.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860
  1. MWF.xDesktop.requireApp("Template", "MDomItem", null, false);
  2. var MGrid = new Class({
  3. Extends: MWF.widget.Common,
  4. Implements: [Options, Events],
  5. options: {
  6. style: "default",
  7. isNew: false,
  8. isEdited: false,
  9. showNotEmptyFlag : true,
  10. verifyType : "batch", //batch一起校验,或alert弹出
  11. //batch,所有item的错误都校验,每个item所有错误一起校验,错误显示在Item的字段后或指定区域;
  12. //batchSingle, 所有item的错误都校验,每个item只校验一个错误,错误显示在Item的字段后或指定区域;
  13. //alert,验证时遇到一个不成功的Item用app.notice()弹出消息后中断,
  14. //single,验证时遇到一个不成功的Item在字段后面或指定区域显示错误信息后中断
  15. itemTemplate : null,
  16. objectId : "",
  17. hasSequence : true,
  18. hasOperation : false,
  19. isCreateTh : true,
  20. containerIsTable : false,
  21. isCreateTrOnNull : true,
  22. minTrCount : 0,
  23. maxTrCount : 0,
  24. tableAttributes : null,
  25. thAttributes : null,
  26. tdAttributes : null,
  27. tableClass : "formTable",
  28. thClass : "formTableTitle",
  29. tdClass : "formTableValue",
  30. thAlign : "center",
  31. tdAlign : "left",
  32. sequenceClass : "formTableSequence",
  33. addActionTdClass : "formTableAddTd",
  34. removeActionTdClass : "formTableRemoveTd",
  35. lp : {
  36. remove : "",
  37. add : ""
  38. }
  39. },
  40. initialize: function (container, data, options, app, css) {
  41. this.setOptions(options);
  42. this.path = "/x_component_Template/$MGrid/";
  43. this.cssPath = "/x_component_Template/$MGrid/" + this.options.style + "/css.wcss";
  44. this._loadCss();
  45. if (css) {
  46. this.css = Object.merge(this.css, css)
  47. }
  48. this.app = app;
  49. this.container = $(container);
  50. this.data = data;
  51. this.isSourceDataEmpty = false;
  52. if (!this.data || this.data == "") {
  53. this.isSourceDataEmpty = true;
  54. this.data = [{}];
  55. }
  56. this.itemTemplate = this.options.itemTemplate;
  57. this.items = null;
  58. this.th = null;
  59. this.trIndex = 0;
  60. this.trList = [];
  61. this.trObjs = null;
  62. this.trObjs_removed = null;
  63. this.trObjs_new = null;
  64. this.thTemplate = null; //属性 lable button_add
  65. this.trTemplate = null; //属性 item sequence button_remove lable
  66. this.valSeparator = /,|;|\^\^|\|/g; //如果是多值对象,作为用户选择的多个值的分隔符
  67. },
  68. load: function () {
  69. this.fireEvent("queryLoad");
  70. //如果itemTemplate没有name赋值Key
  71. for (var it in this.itemTemplate) {
  72. if (!this.itemTemplate[it]["name"]) {
  73. this.itemTemplate[it]["name"] = it;
  74. }
  75. this.itemTemplate[it]["key"] = it;
  76. }
  77. //如果itemTemplate没有name和Key不一致,那么根据name赋值itemTemplate
  78. var json = {};
  79. for (var it in this.itemTemplate) {
  80. if (it != this.itemTemplate[it]["name"]) {
  81. json[this.itemTemplate[it]["name"]] = this.itemTemplate[it]
  82. }
  83. }
  84. for (var it in json) {
  85. this.itemTemplate[it] = json[it];
  86. }
  87. this.createTable( this.itemTemplate );
  88. this.createHead( this.itemTemplate );
  89. this.trObjs = {};
  90. this.trObjs_removed = {};
  91. this.trObjs_new = {};
  92. this.trList = [];
  93. (this.options.isEdited || this.options.isNew) ? this.loadEdit() : this.loadRead();
  94. this.fireEvent("postLoad", [this]);
  95. },
  96. setTrTemplate: function( template ){
  97. if( typeOf( template ) == "string"){
  98. this.trTemplate = this.string2DOM( template )[0];
  99. }else{
  100. this.trTemplate = template;
  101. }
  102. },
  103. setThTemplate : function( template ){
  104. if( typeOf( template ) == "string"){
  105. this.thTemplate = this.string2DOM( template )[0]
  106. }else{
  107. this.thTemplate = template;
  108. }
  109. },
  110. loadEdit:function(){
  111. if( !this.isSourceDataEmpty ){
  112. if( typeOf( this.data ) != "array" ){
  113. this.data = [ this.data ]
  114. }
  115. for( var i=0; i<this.data.length; i++ ){
  116. var d = this.data[i];
  117. var items = this.itemTemplate;
  118. for (var it in d ){
  119. if ( items[ it ] ){
  120. items[ it ].value = d[it];
  121. }
  122. }
  123. this.createTr( items, false, null, d );
  124. }
  125. for( var it in this.itemTemplate ){
  126. this.itemTemplate[it].value = "";
  127. }
  128. }else if( this.options.isCreateTrOnNull ){
  129. this.createTr( this.itemTemplate, true );
  130. }
  131. },
  132. loadRead : function(){
  133. if( !this.isSourceDataEmpty ){
  134. if( typeOf( this.data ) != "array" ){
  135. this.data = [ this.data ]
  136. }
  137. for( var i=0; i<this.data.length; i++ ){
  138. var d = this.data[i];
  139. var items = this.itemTemplate;
  140. for (var it in d ){
  141. if ( items[ it ] ){
  142. items[ it ].value = d[it];
  143. }
  144. }
  145. //this.createTr( items, false );
  146. this.createTr_read( items );
  147. }
  148. }else if( this.options.isCreateTrOnNull ){
  149. this.createTr_read( this.itemTemplate );
  150. }
  151. },
  152. createTable : function( itemData ){
  153. if( this.options.containerIsTable ){
  154. this.table = this.container;
  155. var labelContainers = this.table.getElements("[lable]");
  156. labelContainers.each(function( el ) {
  157. var obj = itemData[el.get("lable")];
  158. if (!obj)return;
  159. if(obj.text)el.set("text",obj.text);
  160. });
  161. this.fireEvent( "postCreateTable", [this] );
  162. }else{
  163. var styles = {};
  164. if( this.options.tableClass && this.css[this.options.tableClass] )styles = this.css[this.options.tableClass];
  165. var tableAttr = this.options.tableAttributes || {};
  166. this.table = new Element( "table", {
  167. styles : styles
  168. }).inject(this.container);
  169. this.table.set( tableAttr );
  170. this.fireEvent( "postCreateTable", [this] );
  171. }
  172. },
  173. createTr_read : function( itemData ){
  174. var self = this;
  175. this.trIndex ++;
  176. if( this.trTemplate ){
  177. this.createTr_read_byTemplate( itemData );
  178. }else{
  179. this.createTr_read_noTemplate( itemData );
  180. }
  181. },
  182. createTr_read_byTemplate : function( itemData ){
  183. var tr = Object.clone( this.trTemplate );
  184. tr.set( "data-id", "_"+ this.trIndex );
  185. var labelContainers = tr.getElements("[lable]");
  186. var itemContainers = tr.getElements("[item]");
  187. var sequenceContainers = tr.getElements( "[sequence]" );
  188. labelContainers.each(function( el ) {
  189. var obj = itemData[el.get("lable")];
  190. if (!obj)return;
  191. if(obj.text)el.set("text", obj.text);
  192. });
  193. itemContainers.each(function( el ) {
  194. var obj = itemData[el.get("item")];
  195. if (!obj)return;
  196. var val = obj.value ? obj.value : "";
  197. if( obj.selectValue && obj.selectText ){
  198. var vals = this.replaceText( val.replace(/\n/g,"<br/>"), obj.selectValue, obj.selectText );
  199. val = vals.join(",");
  200. }else{
  201. val = val.replace(/\n/g,"<br/>").replace( this.valSeparator,"," )
  202. }
  203. el.set("html", val );
  204. }.bind(this));
  205. sequenceContainers.set("text", this.trIndex );
  206. },
  207. createTr_read_noTemplate : function( itemData ){
  208. var tr = new Element("tr" , { "data-id" : "_"+this.trIndex });
  209. if( this.options.hasSequence ){
  210. var td = new Element("td", { align : "center", text : this.trIndex }).inject( tr );
  211. if( this.options.sequenceClass && this.css[this.options.sequenceClass] )td.setStyles(this.css[this.options.sequenceClass]);
  212. }
  213. var attr = {};
  214. if( this.options.tdAlign )attr.align = this.options.tdAlign;
  215. var idx = 1;
  216. for (var it in itemData ){
  217. var tdAttributes = {};
  218. if(this.options.tdAttributes && this.options.tdAttributes["_"+idx] ){
  219. tdAttributes = this.options.tdAttributes["_"+idx];
  220. }
  221. var obj = itemData[it];
  222. var val = obj.value || "";
  223. if( obj.selectValue && obj.selectText ){
  224. var vals = this.replaceText( val.replace(/\n/g,"<br/>"), obj.selectValue, obj.selectText );
  225. val = vals.join(",");
  226. }else{
  227. val = val.replace(/\n/g,"<br/>").replace( this.valSeparator,"," )
  228. }
  229. var td = new Element("td", tdAttributes).inject( tr );
  230. td.set( "text", val );
  231. if( this.options.tdAlign )td.set( "align" , this.options.tdAlign);
  232. if( this.options.tdClass && this.css[this.options.tdClass] )td.setStyles(this.css[this.options.tdClass]);
  233. idx ++;
  234. }
  235. tr.inject( this.table );
  236. },
  237. createHead : function( itemData ){
  238. if( !this.options.isCreateTh )return;
  239. if( this.thTemplate ){
  240. this.createHead_byTemplate( itemData );
  241. }else{
  242. this.createHead_noTemplate( itemData );
  243. }
  244. },
  245. createHead_byTemplate : function( itemData ){
  246. var th = this.tableHead = this.thTemplate;
  247. var labelContainers = th.getElements("[lable]");
  248. labelContainers.each(function(el) {
  249. var obj = itemData[el.get("lable")];
  250. if (!obj)return;
  251. if(obj.text)el.set("text", obj.text);
  252. });
  253. if( this.options.hasOperation && this.options.isEdited ){
  254. var add_button = th.getElement("[button_add]");
  255. this.createAddButton( add_button );
  256. }
  257. th.inject( this.table );
  258. },
  259. createHead_noTemplate : function( itemData ){
  260. var tr = this.tableHead = new Element("tr");
  261. var align = this.options.thAlign == "" ? {} : { align : this.options.thAlign };
  262. var styles = (this.options.thClass && this.css[this.options.thClass]) ? this.css[this.options.thClass] : {};
  263. if( this.options.hasSequence ){
  264. var th = new Element("th", { text : "序号" }).inject( tr );
  265. th.set( align );
  266. th.setStyles( styles );
  267. }
  268. var idx = 1;
  269. for (var it in this.itemTemplate){
  270. var thAttr = {};
  271. if(this.options.thAttributes && this.options.thAttributes["_"+idx] ){
  272. thAttr = this.options.thAttributes["_"+idx];
  273. }
  274. var th = new Element("th").inject(tr);
  275. if( this.options.showNotEmptyFlag && this.itemTemplate[it].notEmpty ){
  276. new Element( "span" , { styles : { color : "red", text : "*" } }).inject( th )
  277. }
  278. th.set( align );
  279. th.setStyles( styles );
  280. if(this.itemTemplate[it].text)th.set("text", this.itemTemplate[it].text );
  281. idx++;
  282. }
  283. if( this.options.hasOperation && this.options.isEdited ){
  284. var th = new Element("th", { align : "center", styles : { width : "24px", styles : {"text-align" : "center" }} } ).inject(tr);
  285. if( this.options.addActionTdClass && this.css[this.options.addActionTdClass] )th.setStyles(this.css[this.options.addActionTdClass]);
  286. this.createAddButton( th );
  287. }
  288. tr.inject( this.table );
  289. this.fireEvent("postCreateHead", [tr] );
  290. },
  291. createAddButton : function( container ){
  292. var button = new Element("div", { title : "添加" }).inject( container );
  293. if( this.options.lp.add )button.set("text",this.options.lp.add );
  294. if( this.css.actionAdd )button.setStyles( this.css.actionAdd );
  295. button.addEvent("click", function( e ){
  296. this.fireEvent("queryAddTr");
  297. this.createTr( this.itemTemplate, true );
  298. this.fireEvent("postAddTr");
  299. }.bind(this));
  300. if( this.css.actionAdd && this.css.actionAdd_over){
  301. button.addEvents({
  302. "mouseover" : function( e ){ this.node.setStyles( this.obj.css.actionAdd_over ) }.bind({ node : button, obj : this }),
  303. "mouseout" : function( e ){ this.node.setStyles( this.obj.css.actionAdd ) }.bind({ node : button, obj : this })
  304. })
  305. }
  306. return button;
  307. },
  308. addTrs : function( count ){
  309. if( 100 < count )count = 100;
  310. for( var i=0 ; i<count; i++ ){
  311. this.createTr( this.itemTemplate, true );
  312. }
  313. },
  314. appendTr : function( d, isNew, unid, sourceData ){
  315. var items = this.itemTemplate;
  316. for (var it in d ){
  317. if ( items[ it ] ){
  318. items[ it ].value = d[it];
  319. }
  320. }
  321. this.createTr( items, isNew, unid, sourceData );
  322. for( var it in this.itemTemplate ){
  323. this.itemTemplate[it].value = "";
  324. }
  325. },
  326. getTrCounts : function(){
  327. return this.trList.length;
  328. },
  329. createTr : function( itemData, isNew, unid, sourceData ){
  330. if( this.options.maxTrCount ){
  331. if( this.getTrCounts() < this.options.maxTrCount ){
  332. this._createTr( itemData, isNew, unid, sourceData )
  333. }else{
  334. this.app.notice("最多只能添加"+this.options.maxTrCount+"项目","error");
  335. }
  336. }else{
  337. this._createTr( itemData, isNew, unid, sourceData )
  338. }
  339. },
  340. _createTr : function( itemData, isNew, unid, sourceData ){
  341. this.fireEvent("queryCreateTr", [this]);
  342. var d;
  343. if( isNew ){
  344. this.fireEvent("newData", [this, function( data ){
  345. d = data;
  346. }.bind(this) ]);
  347. if( d ){
  348. //itemData, isNew, unid, sourceData
  349. itemData = Object.clone( this.itemTemplate );
  350. for (var it in d ){
  351. if ( itemData[ it ] ){
  352. itemData[ it ].value = d[it];
  353. }
  354. }
  355. isNew = false;
  356. sourceData = d;
  357. }
  358. }
  359. this.trIndex ++;
  360. var trOptions = {
  361. objectId : unid ? unid : "_"+this.trIndex,
  362. isEdited : this.options.isEdited,
  363. id : "_"+this.trIndex,
  364. index : this.trIndex,
  365. indexText : (this.maxIndexText ? this.maxIndexText++ : this.trIndex),
  366. hasSequence : this.options.hasSequence,
  367. hasOperation : this.options.hasOperation,
  368. align : this.options.tdAlign,
  369. isNew : isNew,
  370. className : this.options.tdClass,
  371. tdAttributes : this.options.tdAttributes
  372. };
  373. var template = null;
  374. if( this.trTemplate ){
  375. template = this.trTemplate.clone();
  376. }
  377. var trObj = new MGridTr(this.table, trOptions, itemData, this, template, sourceData );
  378. trObj.load();
  379. this.trObjs[ trOptions.objectId ] = trObj;
  380. this.trList.push( trObj );
  381. if( isNew ){
  382. this.trObjs_new[ trOptions.objectId ] = trObj;
  383. }
  384. this.fireEvent("postCreateTr",[this, trObj]);
  385. },
  386. replaceTr : function( oldTrObjOr_Index, data, isNew, unid, sourceData ){
  387. if( typeof oldTrObjOr_Index == "string" ){ //如果传入的是 _index
  388. var oldTrObj = this.trObjs[ oldTrObjOr_Index ];
  389. }else{
  390. var oldTrobj = oldTrObjOr_Index;
  391. }
  392. var itemData = this.itemTemplate;
  393. for (var it in data ){
  394. if ( itemData[ it ] ){
  395. itemData[ it ].value = data[it];
  396. }
  397. }
  398. var trIndex = oldTrObj.options.index;
  399. var trOptions = {
  400. objectId : unid ? unid : "_"+trIndex,
  401. isEdited : this.options.isEdited,
  402. id : "_"+trIndex,
  403. index : trIndex,
  404. indexText : trIndex,
  405. hasSequence : this.options.hasSequence,
  406. hasOperation : this.options.hasOperation,
  407. align : this.options.tdAlign,
  408. isNew : isNew,
  409. className : this.options.tdClass,
  410. tdAttributes : this.options.tdAttributes
  411. };
  412. var template = null;
  413. if( this.trTemplate ){
  414. template = this.trTemplate.clone();
  415. }
  416. var trObj = new MGridTr(this.table, trOptions, itemData, this, template, sourceData );
  417. trObj.load();
  418. //oldTrObj.mElement.replaceWith( trObj.mElement );
  419. trObj.mElement.inject( oldTrObj.mElement, "before" );
  420. var idx = this.trList.indexOf( oldTrObj );
  421. this.trList[idx] = trObj;
  422. this.trObjs[ trOptions.objectId ] = trObj;
  423. if( oldTrObj.options.isNew ){
  424. this.trObjs_new[ oldTrObj.options.objectId ] = null;
  425. }else{
  426. this.trObjs_removed[ oldTrObj.options.objectId ] = oldTrObj;
  427. }
  428. if( isNew ){
  429. this.trObjs_new[ trOptions.objectId ] = trObj;
  430. }
  431. oldTrObj.mElement.destroy();
  432. for( var it in this.itemTemplate ){
  433. this.itemTemplate[it].value = "";
  434. }
  435. },
  436. createRemoveButton : function( trObj, container ){
  437. var button = new Element("div", { title : "删除" }).inject( container );
  438. if( this.options.lp.remove )button.set("text",this.options.lp.remove );
  439. if( this.css.actionRemove )button.setStyles( this.css.actionRemove );
  440. button.addEvents( {
  441. "click": function( e ){ this.removeTr( e, e.target, trObj ); }.bind(this)
  442. });
  443. if( this.css.actionRemove && this.css.actionRemove_over){
  444. button.addEvents({
  445. "mouseover" : function( e ){ this.node.setStyles( this.obj.css.actionRemove_over ) }.bind({ node : button, obj : this }),
  446. "mouseout" : function( e ){ this.node.setStyles( this.obj.css.actionRemove ) }.bind({ node : button, obj : this })
  447. })
  448. }
  449. return button
  450. },
  451. removeTr : function(e, el, trObj ){
  452. this.fireEvent("queryRemoveTr", [e, el, trObj]);
  453. var s = trObj.options;
  454. var id = s.objectId;
  455. if( ! s.isNew ){
  456. this.trObjs_removed[ id ] = this.trObjs[ id ];
  457. }
  458. this.trList.erase( trObj );
  459. this.trObjs[ id ] = null;
  460. //delete this.trObjs[ id ];
  461. if( this.trObjs_new[ id ] ){
  462. this.trObjs_new[ id ]= null;
  463. //delete this.trObjs_new[ id ];
  464. }
  465. //this.fireEvent("queryRemoveTr", [e, el.getParent("tr")]);
  466. trObj.destroy();
  467. this.adjustSequenceText();
  468. this.fireEvent("postRemoveTr", [e, el, trObj ]);
  469. },
  470. replaceText : function( value, selectValue, selectText ){
  471. var vals = typeOf( value ) == "array" ? value : value.split( this.valSeparator );
  472. var selectValues = typeOf( selectValue ) == "array" ? selectValue : selectValue.split( this.valSeparator );
  473. var selectTexts = typeOf( selectText ) == "array" ? selectText : selectText.split(this.valSeparator);
  474. for( var i=0 ;i<vals.length; i++ ){
  475. for( var j= 0; j<selectValues.length; j++){
  476. if( vals[i] == selectValues[j] ){
  477. vals[i] = selectTexts[j]
  478. }
  479. }
  480. }
  481. return vals;
  482. },
  483. getResult : function( verify, separator, isAlert, onlyModified, keepAllData ){
  484. var result = [];
  485. var trObjs = this.trObjs;
  486. var flag = true;
  487. for( var tr in trObjs ){
  488. if( tr && trObjs[tr] ){
  489. var data = trObjs[tr].getResult( verify, separator, isAlert, onlyModified , keepAllData );
  490. if( !data ){
  491. if( this.options.verifyType == "batch" ){
  492. flag= false;
  493. }else{
  494. return false;
  495. }
  496. }else{
  497. result.push( data )
  498. }
  499. }
  500. }
  501. if( flag ){
  502. return result;
  503. }else{
  504. return false ;
  505. }
  506. },
  507. enableItem : function( itemName ){
  508. for( var tr in this.trObjs ){
  509. if( tr && this.trObjs[tr] ){
  510. this.trObjs[tr].enableItem( itemName );
  511. }
  512. }
  513. },
  514. disableItem : function( itemName ){
  515. for( var tr in this.trObjs ){
  516. if( tr && this.trObjs[tr] ){
  517. this.trObjs[tr].disableItem( itemName );
  518. }
  519. }
  520. },
  521. adjustSequenceText : function(){
  522. var array = [];
  523. for( var tr in this.trObjs ){
  524. if( tr && this.trObjs[tr] ){
  525. array.push( this.trObjs[tr] )
  526. }
  527. }
  528. array.sort( function( a, b ){
  529. return a.options.index - b.options.index
  530. });
  531. array.each( function( o, index ){
  532. o.setSequenceText(index + 1 );
  533. this.maxIndexText = index + 2;
  534. }.bind(this))
  535. },
  536. string2DOM: function( str, container, callback ){
  537. var wrapper = str.test('^<the|^<tf|^<tb|^<colg|^<ca') && ['<table>', '</table>', 1] ||
  538. str.test('^<col') && ['<table><colgroup>', '</colgroup><tbody></tbody></table>',2] ||
  539. str.test('^<tr') && ['<table><tbody>', '</tbody></table>', 2] ||
  540. str.test('^<th|^<td') && ['<table><tbody><tr>', '</tr></tbody></table>', 3] ||
  541. str.test('^<li') && ['<ul>', '</ul>', 1] ||
  542. str.test('^<dt|^<dd') && ['<dl>', '</dl>', 1] ||
  543. str.test('^<le') && ['<fieldset>', '</fieldset>', 1] ||
  544. str.test('^<opt') && ['<select multiple="multiple">', '</select>', 1] ||
  545. ['', '', 0];
  546. if( container ){
  547. var el = new Element('div', {html: wrapper[0] + str + wrapper[1]}).getChildren();
  548. while(wrapper[2]--) el = el[0].getChildren();
  549. el.inject( container );
  550. if( callback )callback( container );
  551. return el;
  552. }else{
  553. var div = new Element('div', {html: wrapper[0] + str + wrapper[1]});
  554. div.setStyle("display","none").inject( $(document.body) );
  555. if( callback )callback( div );
  556. var el = div.getChildren();
  557. while(wrapper[2]--) el = el[0].getChildren();
  558. div.dispose();
  559. return el;
  560. }
  561. }
  562. });
  563. var MGridTr = new Class({
  564. Implements: [Options, Events],
  565. options: {
  566. objectId : "",
  567. isEdited : true,
  568. id : "",
  569. index : 0,
  570. indexText : "0",
  571. hasSequence : true,
  572. hasOperation : true,
  573. align : "left",
  574. isNew : true,
  575. className : "",
  576. tdAttributes : null
  577. },
  578. initialize: function (container,options,itemData, parent, template, sourceData) {
  579. this.setOptions(options);
  580. this.container = container;
  581. this.mElement = null;
  582. this.items = {};
  583. this.itemData = itemData;
  584. this.parent = parent;
  585. this.template = template;
  586. this.sourceData = sourceData;
  587. this.css = this.parent.css || {};
  588. this.app = this.parent.app;
  589. },
  590. load:function(){
  591. if( this.options.isEdited ){
  592. this.create_Edit();
  593. }else{
  594. this.create_Read();
  595. }
  596. },
  597. create_Read : function(){
  598. var tr = this.mElement = new Element("tr", { "data-id" : this.options.id }).inject(this.container);
  599. var attr = {};
  600. if( this.options.align )attr.align = this.options.align;
  601. var styles = {};
  602. if( this.options.className && this.css[this.options.className] )styles = this.css[this.options.className];
  603. if( this.options.hasSequence ){
  604. var td = this.sequenceTd = new Element("td", { align : "center", text : ( this.options.indexText || this.options.index) }).inject( tr );
  605. if( this.parent.options.sequenceClass && this.css[this.parent.options.sequenceClass] )td.setStyles(this.css[this.parent.options.sequenceClass]);
  606. }
  607. var idx = 1;
  608. for (var it in this.itemData ){
  609. var tdAttr = this.options.tdAttributes && this.options.tdAttributes["_"+idx] ? this.options.tdAttributes["_"+idx] : {};
  610. var td = new Element("td", { "text" : this.itemData[it].value }).inject( tr );
  611. td.set( attr );
  612. td.set( tdAttr );
  613. td.setStyle( styles );
  614. idx++;
  615. }
  616. },
  617. create_Edit : function(e, el){
  618. if( this.template ){
  619. this.create_Edit_byTemplate( e, el );
  620. }else{
  621. this.create_Edit_noTemplate( e, el );
  622. }
  623. },
  624. setSequenceText : function( text ){
  625. if(this.sequenceTd)this.sequenceTd.set("text",text);
  626. },
  627. create_Edit_byTemplate : function(){
  628. this.mElement = this.template;
  629. this.mElement.set("data-id", this.options.id );
  630. if( this.options.hasSequence ){
  631. this.sequenceTd = this.mElement.getElement( "[sequence]" );
  632. if(this.sequenceTd)this.sequenceTd.set( "text" , ( this.options.indexText || this.options.index) );
  633. }
  634. this.mElement.getElements("[lable]").each(function( el ) {
  635. var itData = this.itemData[el.get("lable")];
  636. if (!itData)return;
  637. if(itData.text)el.set("text", itData.text);
  638. }.bind(this));
  639. this.mElement.getElements("[item]").each(function( el ) {
  640. var itData = this.itemData[el.get("item")];
  641. if (!itData)return;
  642. this.createItem( el, itData );
  643. }.bind(this));
  644. if( this.options.hasOperation && this.options.isEdited ){
  645. if( this.parent.options.minTrCount && this.options.index > this.parent.options.minTrCount ){
  646. var removeContainer = this.mElement.getElement("[button_remove]");
  647. this.parent.createRemoveButton( this, removeContainer );
  648. }
  649. }
  650. this.mElement.setStyle("display","");
  651. this.mElement.inject( this.container );
  652. },
  653. create_Edit_noTemplate : function(){
  654. this.mElement = new Element("tr", { "data-id" : this.options.id });
  655. var attr = {};
  656. if( this.options.align )attr.align = this.options.align;
  657. var styles = {};
  658. if( this.options.className && this.css[this.options.className] )styles = this.css[this.options.className];
  659. if( this.options.hasSequence ){
  660. var td = this.sequenceTd = new Element("td", { align : "center", text : ( this.options.indexText || this.options.index) }).inject( this.mElement );
  661. if( this.parent.options.sequenceClass && this.css[this.parent.options.sequenceClass] )td.setStyles(this.css[this.parent.options.sequenceClass]);
  662. }
  663. var idx = 1;
  664. for (var it in this.itemData){
  665. var tdAttr = this.options.tdAttributes && this.options.tdAttributes["_"+idx] ? this.options.tdAttributes["_"+idx] : {};
  666. var td = new Element("td").inject( this.mElement );
  667. td.set(attr);
  668. td.set( tdAttr );
  669. td.setStyles( styles );
  670. var itData = this.itemData[it];
  671. this.createItem( td, itData );
  672. idx++;
  673. }
  674. if( this.options.hasOperation && this.options.isEdited ){
  675. if( this.parent.options.minTrCount && this.options.index > this.parent.options.minTrCount ) {
  676. var t = new Element("td", {align: "center", style: {width: "30px"}}).inject(this.mElement);
  677. var className = this.parent.options.removeActionTdClass;
  678. if( className && this.css[className] )t.setStyles(this.css[className]);
  679. this.parent.createRemoveButton(this, t);
  680. }else{
  681. var t = new Element("td").inject(this.mElement);
  682. var className = this.parent.options.removeActionTdClass;
  683. if( className && this.css[className] )t.setStyles(this.css[className]);
  684. }
  685. }
  686. this.mElement.inject( this.container );
  687. },
  688. createItem : function( container, itData ){
  689. //if( itData.disable )return;
  690. itData.objectId = itData.name;
  691. var item = new MDomItem(container, itData, this, this.app, this.css );
  692. if( this.parent.options.verifyType == "batchSingle" ){
  693. item.options.warningType = "single";
  694. }else{
  695. item.options.warningType = this.parent.options.verifyType;
  696. }
  697. item.options.name = itData.name + "_" + this.options.index;
  698. item.index = this.options.index;
  699. item.parent = this;
  700. item.load();
  701. this.items[itData.objectId] = item;
  702. },
  703. //remove : function(){
  704. // this.mElement.destroy();
  705. //},
  706. destroy : function(){
  707. Object.each(this.items, function(item){
  708. item.destroy();
  709. }.bind(this));
  710. this.mElement.destroy();
  711. MWF.release(this);
  712. },
  713. enableItem: function( itemName ){
  714. if( itemName && this.items[itemName] ){
  715. var item = this.items[itemName];
  716. if( item.options.disable ){
  717. item.enable();
  718. }
  719. }
  720. },
  721. disableItem: function( itemName ){
  722. if( itemName && this.items[itemName] ){
  723. var item = this.items[itemName];
  724. if( !item.options.disable ){
  725. item.disable();
  726. }
  727. }
  728. },
  729. getPrevSilbing : function(){
  730. var idx = this.parent.trList.indexOf( this );
  731. if( idx > 0 ){
  732. return this.parent.trList[ idx -1 ];
  733. }else{
  734. return null;
  735. }
  736. },
  737. getNextSilbing : function(){
  738. var idx = this.parent.trList.indexOf( this );
  739. if( idx!=-1 && idx < this.parent.trList.length - 1 ){
  740. return this.parent.trList[ idx + 1 ];
  741. }else{
  742. return null;
  743. }
  744. },
  745. verify : function(isShowWarming) {
  746. var flag = true;
  747. for (var it in this.items ) {
  748. if (!this.items[it].verify(isShowWarming)) {
  749. if (this.parent.options.verifyType == "batch" || this.parent.options.verifyType == "batchSingle") {
  750. flag = false;
  751. } else {
  752. return false;
  753. }
  754. }
  755. }
  756. return flag;
  757. },
  758. getItemsKeyValue : function(separator , onlyModified ) {
  759. //separator 多值合并分隔符
  760. var key_value = {};
  761. for (var it in this.items ) {
  762. var item = this.items[it];
  763. var value = onlyModified ? item.getModifiedValue() : item.getValue();
  764. if( value != null ){
  765. if (typeOf(value) === "array") {
  766. key_value[item.options.objectId] = (typeOf(separator) == "string" ? value.join(separator) : value );
  767. } else {
  768. key_value[item.options.objectId] = value;
  769. }
  770. }
  771. }
  772. return key_value;
  773. },
  774. getResult : function(verify, separator, isShowWarming, onlyModified, keepAllData ) {
  775. if ( !verify || this.verify(isShowWarming)) {
  776. if( keepAllData && this.sourceData ){
  777. var result = this.sourceData;
  778. var map = this.getItemsKeyValue(separator, onlyModified);
  779. for( var key in map ){
  780. result[key] = map[key];
  781. }
  782. return result;
  783. }else{
  784. return this.getItemsKeyValue(separator, onlyModified);
  785. }
  786. } else {
  787. return false;
  788. }
  789. }
  790. });