jquery.propertygrid.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. /**
  2. * propertygrid - jQuery EasyUI
  3. *
  4. * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the GPL or commercial licenses
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. * http://www.gnu.org/licenses/gpl.txt
  9. * http://www.jeasyui.com/license_commercial.php
  10. *
  11. * Dependencies:
  12. * datagrid
  13. *
  14. */
  15. (function($){
  16. var currTarget;
  17. function buildGrid(target){
  18. var state = $.data(target, 'propertygrid');
  19. var opts = $.data(target, 'propertygrid').options;
  20. $(target).datagrid($.extend({}, opts, {
  21. cls:'propertygrid',
  22. view:(opts.showGroup ? groupview : undefined),
  23. onClickRow:function(index, row){
  24. if (currTarget != this){
  25. // leaveCurrRow();
  26. stopEditing(currTarget);
  27. currTarget = this;
  28. }
  29. if (opts.editIndex != index && row.editor){
  30. var col = $(this).datagrid('getColumnOption', "value");
  31. col.editor = row.editor;
  32. // leaveCurrRow();
  33. stopEditing(currTarget);
  34. $(this).datagrid('beginEdit', index);
  35. $(this).datagrid('getEditors', index)[0].target.focus();
  36. opts.editIndex = index;
  37. }
  38. opts.onClickRow.call(target, index, row);
  39. },
  40. loadFilter:function(data){
  41. stopEditing(this);
  42. return opts.loadFilter.call(this, data);
  43. },
  44. onLoadSuccess:function(data){
  45. // $(target).datagrid('getPanel').find('div.datagrid-group').css('border','');
  46. $(target).datagrid('getPanel').find('div.datagrid-group').attr('style','');
  47. opts.onLoadSuccess.call(target,data);
  48. }
  49. }));
  50. $(document).unbind('.propertygrid').bind('mousedown.propertygrid', function(e){
  51. var p = $(e.target).closest('div.datagrid-view,div.combo-panel');
  52. // var p = $(e.target).closest('div.propertygrid,div.combo-panel');
  53. if (p.length){return;}
  54. stopEditing(currTarget);
  55. currTarget = undefined;
  56. });
  57. // function leaveCurrRow(){
  58. // var t = $(currTarget);
  59. // if (!t.length){return;}
  60. // var opts = $.data(currTarget, 'propertygrid').options;
  61. // var index = opts.editIndex;
  62. // if (index == undefined){return;}
  63. // var ed = t.datagrid('getEditors', index)[0];
  64. // if (ed){
  65. // ed.target.blur();
  66. // if (t.datagrid('validateRow', index)){
  67. // t.datagrid('endEdit', index);
  68. // } else {
  69. // t.datagrid('cancelEdit', index);
  70. // }
  71. // }
  72. // opts.editIndex = undefined;
  73. // }
  74. }
  75. function stopEditing(target){
  76. var t = $(target);
  77. if (!t.length){return}
  78. var opts = $.data(target, 'propertygrid').options;
  79. var index = opts.editIndex;
  80. if (index == undefined){return;}
  81. var ed = t.datagrid('getEditors', index)[0];
  82. if (ed){
  83. ed.target.blur();
  84. if (t.datagrid('validateRow', index)){
  85. t.datagrid('endEdit', index);
  86. } else {
  87. t.datagrid('cancelEdit', index);
  88. }
  89. }
  90. opts.editIndex = undefined;
  91. }
  92. $.fn.propertygrid = function(options, param){
  93. if (typeof options == 'string'){
  94. var method = $.fn.propertygrid.methods[options];
  95. if (method){
  96. return method(this, param);
  97. } else {
  98. return this.datagrid(options, param);
  99. }
  100. }
  101. options = options || {};
  102. return this.each(function(){
  103. var state = $.data(this, 'propertygrid');
  104. if (state){
  105. $.extend(state.options, options);
  106. } else {
  107. var opts = $.extend({}, $.fn.propertygrid.defaults, $.fn.propertygrid.parseOptions(this), options);
  108. opts.frozenColumns = $.extend(true, [], opts.frozenColumns);
  109. opts.columns = $.extend(true, [], opts.columns);
  110. $.data(this, 'propertygrid', {
  111. options: opts
  112. });
  113. }
  114. buildGrid(this);
  115. });
  116. }
  117. $.fn.propertygrid.methods = {
  118. options: function(jq){
  119. return $.data(jq[0], 'propertygrid').options;
  120. }
  121. };
  122. $.fn.propertygrid.parseOptions = function(target){
  123. var t = $(target);
  124. return $.extend({}, $.fn.datagrid.parseOptions(target), $.parser.parseOptions(target,[{showGroup:'boolean'}]));
  125. };
  126. // the group view definition
  127. var groupview = $.extend({}, $.fn.datagrid.defaults.view, {
  128. render: function(target, container, frozen){
  129. var state = $.data(target, 'datagrid');
  130. var opts = state.options;
  131. var rows = state.data.rows;
  132. var fields = $(target).datagrid('getColumnFields', frozen);
  133. var table = [];
  134. var index = 0;
  135. var groups = this.groups;
  136. for(var i=0; i<groups.length; i++){
  137. var group = groups[i];
  138. table.push('<div class="datagrid-group" group-index=' + i + ' style="height:25px;overflow:hidden;border-bottom:1px solid #ccc;">');
  139. table.push('<table cellspacing="0" cellpadding="0" border="0" style="height:100%"><tbody>');
  140. table.push('<tr>');
  141. table.push('<td style="border:0;">');
  142. if (!frozen){
  143. table.push('<span style="color:#666;font-weight:bold;">');
  144. table.push(opts.groupFormatter.call(target, group.fvalue, group.rows));
  145. table.push('</span>');
  146. }
  147. table.push('</td>');
  148. table.push('</tr>');
  149. table.push('</tbody></table>');
  150. table.push('</div>');
  151. table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
  152. for(var j=0; j<group.rows.length; j++) {
  153. // get the class and style attributes for this row
  154. var cls = (index % 2 && opts.striped) ? 'class="datagrid-row datagrid-row-alt"' : 'class="datagrid-row"';
  155. var styleValue = opts.rowStyler ? opts.rowStyler.call(target, index, group.rows[j]) : '';
  156. var style = styleValue ? 'style="' + styleValue + '"' : '';
  157. var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + index;
  158. table.push('<tr id="' + rowId + '" datagrid-row-index="' + index + '" ' + cls + ' ' + style + '>');
  159. table.push(this.renderRow.call(this, target, fields, frozen, index, group.rows[j]));
  160. table.push('</tr>');
  161. index++;
  162. }
  163. table.push('</tbody></table>');
  164. }
  165. $(container).html(table.join(''));
  166. },
  167. onAfterRender: function(target){
  168. var opts = $.data(target, 'datagrid').options;
  169. var dc = $.data(target, 'datagrid').dc;
  170. var view = dc.view;
  171. var view1 = dc.view1;
  172. var view2 = dc.view2;
  173. $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
  174. if (opts.rownumbers || opts.frozenColumns.length){
  175. var group = view1.find('div.datagrid-group');
  176. } else {
  177. var group = view2.find('div.datagrid-group');
  178. }
  179. $('<td style="border:0;text-align:center;width:25px"><span class="datagrid-row-expander datagrid-row-collapse" style="display:inline-block;width:16px;height:16px;cursor:pointer">&nbsp;</span></td>').insertBefore(group.find('td'));
  180. view.find('div.datagrid-group').each(function(){
  181. var groupIndex = $(this).attr('group-index');
  182. $(this).find('span.datagrid-row-expander').bind('click', {groupIndex:groupIndex}, function(e){
  183. if ($(this).hasClass('datagrid-row-collapse')){
  184. $(target).datagrid('collapseGroup', e.data.groupIndex);
  185. } else {
  186. $(target).datagrid('expandGroup', e.data.groupIndex);
  187. }
  188. });
  189. });
  190. },
  191. onBeforeRender: function(target, rows){
  192. var opts = $.data(target, 'datagrid').options;
  193. var groups = [];
  194. for(var i=0; i<rows.length; i++){
  195. var row = rows[i];
  196. var group = getGroup(row[opts.groupField]);
  197. if (!group){
  198. group = {
  199. fvalue: row[opts.groupField],
  200. rows: [row],
  201. startRow: i
  202. };
  203. groups.push(group);
  204. } else {
  205. group.rows.push(row);
  206. }
  207. }
  208. function getGroup(fvalue){
  209. for(var i=0; i<groups.length; i++){
  210. var group = groups[i];
  211. if (group.fvalue == fvalue){
  212. return group;
  213. }
  214. }
  215. return null;
  216. }
  217. this.groups = groups;
  218. var newRows = [];
  219. for(var i=0; i<groups.length; i++){
  220. var group = groups[i];
  221. for(var j=0; j<group.rows.length; j++){
  222. newRows.push(group.rows[j]);
  223. }
  224. }
  225. $.data(target, 'datagrid').data.rows = newRows;
  226. }
  227. });
  228. $.extend($.fn.datagrid.methods, {
  229. expandGroup:function(jq, groupIndex){
  230. return jq.each(function(){
  231. var view = $.data(this, 'datagrid').dc.view;
  232. if (groupIndex!=undefined){
  233. var group = view.find('div.datagrid-group[group-index="'+groupIndex+'"]');
  234. } else {
  235. var group = view.find('div.datagrid-group');
  236. }
  237. var expander = group.find('span.datagrid-row-expander');
  238. if (expander.hasClass('datagrid-row-expand')){
  239. expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');
  240. group.next('table').show();
  241. }
  242. $(this).datagrid('fixRowHeight');
  243. });
  244. },
  245. collapseGroup:function(jq, groupIndex){
  246. return jq.each(function(){
  247. var view = $.data(this, 'datagrid').dc.view;
  248. if (groupIndex!=undefined){
  249. var group = view.find('div.datagrid-group[group-index="'+groupIndex+'"]');
  250. } else {
  251. var group = view.find('div.datagrid-group');
  252. }
  253. var expander = group.find('span.datagrid-row-expander');
  254. if (expander.hasClass('datagrid-row-collapse')){
  255. expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');
  256. group.next('table').hide();
  257. }
  258. $(this).datagrid('fixRowHeight');
  259. });
  260. }
  261. });
  262. // end of group view definition
  263. $.fn.propertygrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
  264. singleSelect:true,
  265. remoteSort:false,
  266. fitColumns:true,
  267. loadMsg:'',
  268. frozenColumns:[[
  269. {field:'f',width:16,resizable:false}
  270. ]],
  271. columns:[[
  272. {field:'name',title:'Name',width:100,sortable:true},
  273. {field:'value',title:'Value',width:100,resizable:false}
  274. ]],
  275. showGroup:false,
  276. groupField:'group',
  277. groupFormatter:function(fvalue,rows){return fvalue}
  278. });
  279. })(jQuery);