grid.subgrid.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /*jshint eqeqeq:false */
  2. /*global jQuery, define */
  3. (function( factory ) {
  4. "use strict";
  5. if ( typeof define === "function" && define.amd ) {
  6. // AMD. Register as an anonymous module.
  7. define([
  8. "jquery",
  9. "js/grid.base"
  10. ], factory );
  11. } else {
  12. // Browser globals
  13. factory( jQuery );
  14. }
  15. }(function( $ ) {
  16. "use strict";
  17. //module begin
  18. $.jgrid.extend({
  19. setSubGrid : function () {
  20. return this.each(function (){
  21. var $t = this, cm, i,
  22. classes = $.jgrid.styleUI[($t.p.styleUI || 'jQueryUI')].subgrid,
  23. suboptions = {
  24. plusicon : classes.icon_plus,
  25. minusicon : classes.icon_minus,
  26. openicon: classes.icon_open,
  27. expandOnLoad: false,
  28. selectOnExpand : false,
  29. selectOnCollapse : false,
  30. reloadOnExpand : true
  31. };
  32. $t.p.subGridOptions = $.extend(suboptions, $t.p.subGridOptions || {});
  33. $t.p.colNames.unshift("");
  34. $t.p.colModel.unshift({name:'subgrid',width: $.jgrid.cell_width ? $t.p.subGridWidth+$t.p.cellLayout : $t.p.subGridWidth,sortable: false,resizable:false,hidedlg:true,search:false,fixed:true});
  35. cm = $t.p.subGridModel;
  36. if(cm[0]) {
  37. cm[0].align = $.extend([],cm[0].align || []);
  38. for(i=0;i<cm[0].name.length;i++) { cm[0].align[i] = cm[0].align[i] || 'left';}
  39. }
  40. });
  41. },
  42. addSubGridCell :function (pos,iRow) {
  43. var prp='', ic, sid, icb ;
  44. this.each(function(){
  45. prp = this.formatCol(pos,iRow);
  46. sid= this.p.id;
  47. ic = this.p.subGridOptions.plusicon;
  48. icb = $.jgrid.styleUI[(this.p.styleUI || 'jQueryUI')].common;
  49. });
  50. return "<td role=\"gridcell\" aria-describedby=\""+sid+"_subgrid\" class=\"ui-sgcollapsed sgcollapsed\" "+prp+"><a style='cursor:pointer;' class='ui-sghref'><span class='" + icb.icon_base +" "+ic+"'></span></a></td>";
  51. },
  52. addSubGrid : function( pos, sind ) {
  53. return this.each(function(){
  54. var ts = this;
  55. if (!ts.grid ) { return; }
  56. var base = $.jgrid.styleUI[(ts.p.styleUI || 'jQueryUI')].base,
  57. common = $.jgrid.styleUI[(ts.p.styleUI || 'jQueryUI')].common;
  58. //-------------------------
  59. var subGridCell = function(trdiv,cell,pos)
  60. {
  61. var tddiv = $("<td align='"+ts.p.subGridModel[0].align[pos]+"'></td>").html(cell);
  62. $(trdiv).append(tddiv);
  63. };
  64. var subGridXml = function(sjxml, sbid){
  65. var tddiv, i, sgmap,
  66. dummy = $("<table class='" + base.rowTable + " ui-common-table'><tbody></tbody></table>"),
  67. trdiv = $("<tr></tr>");
  68. for (i = 0; i<ts.p.subGridModel[0].name.length; i++) {
  69. tddiv = $("<th class='" + base.headerBox+" ui-th-subgrid ui-th-column ui-th-"+ts.p.direction+"'></th>");
  70. $(tddiv).html(ts.p.subGridModel[0].name[i]);
  71. $(tddiv).width( ts.p.subGridModel[0].width[i]);
  72. $(trdiv).append(tddiv);
  73. }
  74. $(dummy).append(trdiv);
  75. if (sjxml){
  76. sgmap = ts.p.xmlReader.subgrid;
  77. $(sgmap.root+" "+sgmap.row, sjxml).each( function(){
  78. trdiv = $("<tr class='" + common.content+" ui-subtblcell'></tr>");
  79. if(sgmap.repeatitems === true) {
  80. $(sgmap.cell,this).each( function(i) {
  81. subGridCell(trdiv, $(this).text() || '&#160;',i);
  82. });
  83. } else {
  84. var f = ts.p.subGridModel[0].mapping || ts.p.subGridModel[0].name;
  85. if (f) {
  86. for (i=0;i<f.length;i++) {
  87. subGridCell(trdiv, $.jgrid.getXmlData(this, f[i]) || '&#160;',i);
  88. }
  89. }
  90. }
  91. $(dummy).append(trdiv);
  92. });
  93. }
  94. var pID = $("table:first",ts.grid.bDiv).attr("id")+"_";
  95. $("#"+$.jgrid.jqID(pID+sbid)).append(dummy);
  96. ts.grid.hDiv.loading = false;
  97. $("#load_"+$.jgrid.jqID(ts.p.id)).hide();
  98. return false;
  99. };
  100. var subGridJson = function(sjxml, sbid){
  101. var tddiv,result,i,cur, sgmap,j,
  102. dummy = $("<table class='" + base.rowTable + " ui-common-table'><tbody></tbody></table>"),
  103. trdiv = $("<tr></tr>");
  104. for (i = 0; i<ts.p.subGridModel[0].name.length; i++) {
  105. tddiv = $("<th class='" + base.headerBox + " ui-th-subgrid ui-th-column ui-th-"+ts.p.direction+"'></th>");
  106. $(tddiv).html(ts.p.subGridModel[0].name[i]);
  107. $(tddiv).width( ts.p.subGridModel[0].width[i]);
  108. $(trdiv).append(tddiv);
  109. }
  110. $(dummy).append(trdiv);
  111. if (sjxml){
  112. sgmap = ts.p.jsonReader.subgrid;
  113. result = $.jgrid.getAccessor(sjxml, sgmap.root);
  114. if ( result !== undefined ) {
  115. for (i=0;i<result.length;i++) {
  116. cur = result[i];
  117. trdiv = $("<tr class='" + common.content+" ui-subtblcell'></tr>");
  118. if(sgmap.repeatitems === true) {
  119. if(sgmap.cell) { cur=cur[sgmap.cell]; }
  120. for (j=0;j<cur.length;j++) {
  121. subGridCell(trdiv, cur[j] || '&#160;',j);
  122. }
  123. } else {
  124. var f = ts.p.subGridModel[0].mapping || ts.p.subGridModel[0].name;
  125. if(f.length) {
  126. for (j=0;j<f.length;j++) {
  127. subGridCell(trdiv, $.jgrid.getAccessor(cur, f[j] ) || '&#160;',j);
  128. }
  129. }
  130. }
  131. $(dummy).append(trdiv);
  132. }
  133. }
  134. }
  135. var pID = $("table:first",ts.grid.bDiv).attr("id")+"_";
  136. $("#"+$.jgrid.jqID(pID+sbid)).append(dummy);
  137. ts.grid.hDiv.loading = false;
  138. $("#load_"+$.jgrid.jqID(ts.p.id)).hide();
  139. return false;
  140. };
  141. var populatesubgrid = function( rd )
  142. {
  143. var sid,dp, i, j;
  144. sid = $(rd).attr("id");
  145. dp = {nd_: (new Date().getTime())};
  146. dp[ts.p.prmNames.subgridid]=sid;
  147. if(!ts.p.subGridModel[0]) { return false; }
  148. if(ts.p.subGridModel[0].params) {
  149. for(j=0; j < ts.p.subGridModel[0].params.length; j++) {
  150. for(i=0; i<ts.p.colModel.length; i++) {
  151. if(ts.p.colModel[i].name === ts.p.subGridModel[0].params[j]) {
  152. dp[ts.p.colModel[i].name]= $("td:eq("+i+")",rd).text().replace(/\&#160\;/ig,'');
  153. }
  154. }
  155. }
  156. }
  157. if(!ts.grid.hDiv.loading) {
  158. ts.grid.hDiv.loading = true;
  159. $("#load_"+$.jgrid.jqID(ts.p.id)).show();
  160. if(!ts.p.subgridtype) { ts.p.subgridtype = ts.p.datatype; }
  161. if($.isFunction(ts.p.subgridtype)) {
  162. ts.p.subgridtype.call(ts, dp);
  163. } else {
  164. ts.p.subgridtype = ts.p.subgridtype.toLowerCase();
  165. }
  166. switch(ts.p.subgridtype) {
  167. case "xml":
  168. case "json":
  169. $.ajax($.extend({
  170. type:ts.p.mtype,
  171. url: $.isFunction(ts.p.subGridUrl) ? ts.p.subGridUrl.call(ts, dp) : ts.p.subGridUrl,
  172. dataType:ts.p.subgridtype,
  173. data: $.isFunction(ts.p.serializeSubGridData)? ts.p.serializeSubGridData.call(ts, dp) : dp,
  174. complete: function(sxml) {
  175. if(ts.p.subgridtype === "xml") {
  176. subGridXml(sxml.responseXML, sid);
  177. } else {
  178. subGridJson($.jgrid.parse(sxml.responseText), sid);
  179. }
  180. sxml=null;
  181. }
  182. }, $.jgrid.ajaxOptions, ts.p.ajaxSubgridOptions || {}));
  183. break;
  184. }
  185. }
  186. return false;
  187. };
  188. var _id, pID,atd, nhc=0, bfsc, $r;
  189. $.each(ts.p.colModel,function(){
  190. if(this.hidden === true || this.name === 'rn' || this.name === 'cb') {
  191. nhc++;
  192. }
  193. });
  194. var len = ts.rows.length, i=1,hsret, ishsg = $.isFunction(ts.p.isHasSubGrid);
  195. if( sind !== undefined && sind > 0) {
  196. i = sind;
  197. len = sind+1;
  198. }
  199. while(i < len) {
  200. if($(ts.rows[i]).hasClass('jqgrow')) {
  201. if(ts.p.scroll) {
  202. $(ts.rows[i].cells[pos]).off('click');
  203. }
  204. hsret = null;
  205. if(ishsg) {
  206. hsret = ts.p.isHasSubGrid.call(ts, ts.rows[i].id);
  207. }
  208. if(hsret === false) {
  209. ts.rows[i].cells[pos].innerHTML = "";
  210. } else {
  211. $(ts.rows[i].cells[pos]).on('click', function() {
  212. var tr = $(this).parent("tr")[0];
  213. pID = ts.p.id;
  214. _id = tr.id;
  215. $r = $("#" + pID + "_" + _id + "_expandedContent");
  216. if($(this).hasClass("sgcollapsed")) {
  217. bfsc = $(ts).triggerHandler("jqGridSubGridBeforeExpand", [pID + "_" + _id, _id]);
  218. bfsc = (bfsc === false || bfsc === 'stop') ? false : true;
  219. if(bfsc && $.isFunction(ts.p.subGridBeforeExpand)) {
  220. bfsc = ts.p.subGridBeforeExpand.call(ts, pID+"_"+_id,_id);
  221. }
  222. if(bfsc === false) {return false;}
  223. if(ts.p.subGridOptions.reloadOnExpand === true || ( ts.p.subGridOptions.reloadOnExpand === false && !$r.hasClass('ui-subgrid') ) ) {
  224. atd = pos >=1 ? "<td colspan='"+pos+"'>&#160;</td>":"";
  225. $(tr).after( "<tr role='row' id='" + pID + "_" + _id + "_expandedContent" + "' class='ui-subgrid ui-sg-expanded'>"+atd+"<td class='" + common.content +" subgrid-cell'><span class='" + common.icon_base +" "+ts.p.subGridOptions.openicon+"'></span></td><td colspan='"+parseInt(ts.p.colNames.length-1-nhc,10)+"' class='" + common.content +" subgrid-data'><div id="+pID+"_"+_id+" class='tablediv'></div></td></tr>" );
  226. $(ts).triggerHandler("jqGridSubGridRowExpanded", [pID + "_" + _id, _id]);
  227. if( $.isFunction(ts.p.subGridRowExpanded)) {
  228. ts.p.subGridRowExpanded.call(ts, pID+"_"+ _id,_id);
  229. } else {
  230. populatesubgrid(tr);
  231. }
  232. } else {
  233. $r.show().removeClass("ui-sg-collapsed").addClass("ui-sg-expanded");
  234. }
  235. $(this).html("<a style='cursor:pointer;' class='ui-sghref'><span class='" + common.icon_base +" "+ts.p.subGridOptions.minusicon+"'></span></a>").removeClass("sgcollapsed").addClass("sgexpanded");
  236. if(ts.p.subGridOptions.selectOnExpand) {
  237. $(ts).jqGrid('setSelection',_id);
  238. }
  239. } else if($(this).hasClass("sgexpanded")) {
  240. bfsc = $(ts).triggerHandler("jqGridSubGridRowColapsed", [pID + "_" + _id, _id]);
  241. bfsc = (bfsc === false || bfsc === 'stop') ? false : true;
  242. if( bfsc && $.isFunction(ts.p.subGridRowColapsed)) {
  243. bfsc = ts.p.subGridRowColapsed.call(ts, pID+"_"+_id,_id );
  244. }
  245. if(bfsc===false) {return false;}
  246. if(ts.p.subGridOptions.reloadOnExpand === true) {
  247. $r.remove(".ui-subgrid");
  248. } else if($r.hasClass('ui-subgrid')) { // incase of dynamic deleting
  249. $r.hide().addClass("ui-sg-collapsed").removeClass("ui-sg-expanded");
  250. }
  251. $(this).html("<a style='cursor:pointer;' class='ui-sghref'><span class='"+common.icon_base +" "+ts.p.subGridOptions.plusicon+"'></span></a>").removeClass("sgexpanded").addClass("sgcollapsed");
  252. if(ts.p.subGridOptions.selectOnCollapse) {
  253. $(ts).jqGrid('setSelection',_id);
  254. }
  255. }
  256. return false;
  257. });
  258. }
  259. }
  260. i++;
  261. }
  262. if(ts.p.subGridOptions.expandOnLoad === true) {
  263. var offset = 0;
  264. if(ts.p.multiselect) { offset++;}
  265. if(ts.p.rownumbers) { offset++;}
  266. $(ts.rows).filter('.jqgrow').each(function(index,row){
  267. $(row.cells[offset]).click();
  268. });
  269. }
  270. ts.subGridXml = function(xml,sid) {subGridXml(xml,sid);};
  271. ts.subGridJson = function(json,sid) {subGridJson(json,sid);};
  272. });
  273. },
  274. expandSubGridRow : function(rowid) {
  275. return this.each(function () {
  276. var $t = this;
  277. if(!$t.grid && !rowid) {return;}
  278. if($t.p.subGrid===true) {
  279. var rc = $(this).jqGrid("getInd",rowid,true);
  280. if(rc) {
  281. var sgc = $("td.sgcollapsed",rc)[0];
  282. if(sgc) {
  283. $(sgc).trigger("click");
  284. }
  285. }
  286. }
  287. });
  288. },
  289. collapseSubGridRow : function(rowid) {
  290. return this.each(function () {
  291. var $t = this;
  292. if(!$t.grid && !rowid) {return;}
  293. if($t.p.subGrid===true) {
  294. var rc = $(this).jqGrid("getInd",rowid,true);
  295. if(rc) {
  296. var sgc = $("td.sgexpanded",rc)[0];
  297. if(sgc) {
  298. $(sgc).trigger("click");
  299. }
  300. }
  301. }
  302. });
  303. },
  304. toggleSubGridRow : function(rowid) {
  305. return this.each(function () {
  306. var $t = this;
  307. if(!$t.grid && !rowid) {return;}
  308. if($t.p.subGrid===true) {
  309. var rc = $(this).jqGrid("getInd",rowid,true);
  310. if(rc) {
  311. var sgc = $("td.sgcollapsed",rc)[0];
  312. if(sgc) {
  313. $(sgc).trigger("click");
  314. } else {
  315. sgc = $("td.sgexpanded",rc)[0];
  316. if(sgc) {
  317. $(sgc).trigger("click");
  318. }
  319. }
  320. }
  321. }
  322. });
  323. }
  324. });
  325. //module end
  326. }));