yvanui.yvgrid.selection.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. /**
  2. * yvan.yvgrid.selection.js
  3. * @author luoyifan
  4. * 2019-07-16
  5. */
  6. 'use strict';
  7. (function ($) {
  8. /**
  9. * 获取指定的行编号的对应数据
  10. * 如果不设置参数就获取当前或被选中的行数据
  11. */
  12. function getSelected($dom, rowIndex) {
  13. if ($.type(rowIndex) === 'undefined') {
  14. rowIndex = getSelectedRowIndex($dom);
  15. }
  16. return $dom.jqxGrid('getrowdata', rowIndex);
  17. }
  18. /**
  19. * 获取当前选中的行编号
  20. */
  21. function getSelectedRowIndex($dom) {
  22. return $dom.jqxGrid('selectedrowindex');
  23. //var state = $.data($dom[0], 'yvgrid');
  24. //var option = state.options;
  25. //return option.selectedRowId;
  26. }
  27. function onSelect(event, targetBoundIndex) {
  28. var $dom = $(this);
  29. //点击的列是__CB__ 就忽略
  30. if (event && event.args &&
  31. event.args.column &&
  32. event.args.column.datafield === '__CB__') {
  33. $.fn.yvgrid.selection.toggleCheckbox($dom, targetBoundIndex);
  34. return;
  35. }
  36. //检查跳转目标是否有效
  37. var data = getSelected.call(this, $dom, targetBoundIndex);
  38. if ($.type(data) === 'undefined' || $.type(data.boundindex) === 'undefined') {
  39. return;
  40. }
  41. var state = $.data($dom[0], 'yvgrid');
  42. var option = state.options;
  43. var oldIndex = getSelectedRowIndex($dom);
  44. if ($dom.yvgrid('isEditing') && oldIndex === targetBoundIndex) {
  45. //编辑中的表格,如果跳转目标与当前行一致,就取消跳转
  46. return;
  47. }
  48. //console.log('onSelect type:' + event.type + ', oldIndex:' + oldIndex + ', newIndex:' + targetBoundIndex);
  49. //如果是 bindingcomplete 事件(切换数据源)造成的切换行动作, 就不用检测是否允许跳转了
  50. if (event.type !== 'bindingcomplete') {
  51. //询问 edit 是否取消 select 动作
  52. var ret = $.fn.yvgrid.edit.beforeSelect.call(this, event, targetBoundIndex);
  53. if (ret === false) {
  54. return;
  55. }
  56. if ($.type(option.onBeforeSelect) === 'function') {
  57. //询问外部程序,是否取消 select 动作
  58. ret = option.onBeforeSelect.call(this, targetBoundIndex, oldIndex, event);
  59. if (ret === false) {
  60. return;
  61. }
  62. }
  63. }
  64. //跳转行
  65. $dom.jqxGrid('unselectrow', oldIndex);
  66. $dom.jqxGrid('selectrow', targetBoundIndex);
  67. $dom.jqxGrid('ensurerowvisible', targetBoundIndex);
  68. //通知跳转完毕
  69. if ($.type(option.onSelect) === 'function') {
  70. option.onSelect.call(this, targetBoundIndex, data, event);
  71. }
  72. if ($.type(option.onSelectRow) === 'function') {
  73. option.onSelectRow.call(this, targetBoundIndex, data, event);
  74. }
  75. }
  76. function hideCheckboxColumn(event) {
  77. if (!$(this).jqxGrid('editable')) {
  78. $(this).jqxGrid('hidecolumn', '_checkboxcolumn');
  79. }
  80. }
  81. $.extend($.fn.yvgrid.methods, {
  82. /**
  83. * 获取指定的行编号的对应数据
  84. * 如果不设置参数就获取当前或被选中的行数据
  85. */
  86. rowData: function($dom){
  87. return $dom.jqxGrid('getrows');
  88. },
  89. currentRowData: getSelected,
  90. getSelected: getSelected,
  91. /**
  92. * 获取当前选中的行编号
  93. */
  94. getSelectedRowIndex: getSelectedRowIndex,
  95. /**
  96. * 选择一行数据
  97. */
  98. selectRow: function (jq, rowIndex) {
  99. jq.each(function () {
  100. onSelect.call(this, { type: 'api' }, rowIndex);
  101. });
  102. },
  103. });
  104. $.fn.yvgrid.selection = {
  105. setCheckboxById: function ($dom, id, value) {
  106. var state = $.data($dom[0], 'yvgrid');
  107. if (!state) return;
  108. $dom.jqxGrid('setcellvaluebyid', id, "__CB__", value);
  109. var option = state.options;
  110. if ($.type(option.onCheckedChange) === 'function') {
  111. var row = $dom.jqxGrid('getrowdatabyid', id);
  112. if (row) {
  113. option.onCheckedChange.call($dom[0], id, value, row);
  114. }
  115. }
  116. },
  117. setCheckbox: function ($dom, targetBoundIndex, value) {
  118. var state = $.data($dom[0], 'yvgrid');
  119. if (!state) return;
  120. $dom.jqxGrid('setcellvalue', targetBoundIndex, "__CB__", value);
  121. var option = state.options;
  122. if ($.type(option.onCheckedChange) === 'function') {
  123. var id = $dom.jqxGrid('getrowid', targetBoundIndex);
  124. var row = $dom.jqxGrid('getrowdata', targetBoundIndex);
  125. if (row) {
  126. option.onCheckedChange.call($dom[0], id, value, row);
  127. }
  128. }
  129. },
  130. getCheckbox: function ($dom, targetBoundIndex) {
  131. return $dom.jqxGrid('getcellvalue', targetBoundIndex, "__CB__");
  132. },
  133. toggleCheckbox: function ($dom, targetBoundIndex) {
  134. var value = $.fn.yvgrid.selection.getCheckbox($dom, targetBoundIndex);
  135. if (value) {
  136. $.fn.yvgrid.selection.setCheckbox($dom, targetBoundIndex, false);
  137. } else {
  138. $.fn.yvgrid.selection.setCheckbox($dom, targetBoundIndex, true);
  139. }
  140. },
  141. handlekeyboardnavigation: function (event) {
  142. switch (event.keyCode) {
  143. case 33:
  144. case 34:
  145. if (event.keyCode === 33) {
  146. //page up
  147. } else if (event.keyCode === 40) {
  148. //page down
  149. }
  150. break;
  151. case 35:
  152. case 36:
  153. if (event.target.tagName === 'INPUT') {
  154. //输入框里面按下的 home/end 键忽略
  155. return;
  156. }
  157. case 38:
  158. case 40:
  159. var $dom = $(this.element);
  160. var rowindex = getSelectedRowIndex($dom);
  161. var vi = $dom.jqxGrid('getrowvisibleindex', rowindex);
  162. if (event.keyCode === 38) {
  163. //index--; //上
  164. vi--;
  165. } else if (event.keyCode === 40) {
  166. //index++; //下
  167. vi++;
  168. } else if (event.keyCode === 36) {
  169. //home
  170. vi = 0;
  171. } else if (event.keyCode === 35) {
  172. //end
  173. vi = $dom.jqxGrid('getdisplayrows').length - 1;
  174. }
  175. var boundIndex = $dom.jqxGrid('getrowboundindex', vi);
  176. onSelect.call(this.element, event, boundIndex);
  177. return true;
  178. }
  179. },
  180. gridOption: function ($dom, easyuiOpt, jqxOpt) {
  181. $.extend(jqxOpt, {
  182. selectionmode: 'checkbox'
  183. });
  184. delete jqxOpt.onBeforeSelect;
  185. delete jqxOpt.onSelect;
  186. delete jqxOpt.rownumbers;
  187. delete jqxOpt.loadComplete;
  188. $dom.on('initialized', function (event) {
  189. hideCheckboxColumn.call(this, event);
  190. });
  191. $dom.on('bindingcomplete', function (event) {
  192. hideCheckboxColumn.call(this, event);
  193. var $grid = $(this);
  194. if ($.type(easyuiOpt.loadComplete) === 'function') {
  195. easyuiOpt.loadComplete.call(this, arguments);
  196. }
  197. if (easyuiOpt.autoSizeColumns) {
  198. $grid.jqxGrid('autoresizecolumns', 'all');
  199. }
  200. if (easyuiOpt.rownumbers) {
  201. if (!easyuiOpt.editable) {
  202. $grid.jqxGrid('autoresizecolumn', '__NO__', 'all');
  203. }
  204. }
  205. if (easyuiOpt.checkbox) {
  206. $grid.jqxGrid('setcolumnproperty', '__CB__', 'width', 40);
  207. }
  208. var source = $grid.jqxGrid('source')._source;
  209. //默认选中第一行
  210. var newIndex = undefined;
  211. if (source.records) {
  212. source.records.every(function (item) {
  213. newIndex = item.boundindex;
  214. return false;
  215. });
  216. }
  217. if ($.type(newIndex) !== 'undefined') {
  218. onSelect.call(this, event, newIndex);
  219. }
  220. });
  221. $dom.on('cellclick', function (event) {
  222. onSelect.call(this, event, event.args.rowindex);
  223. });
  224. }
  225. };
  226. })(jQuery);