var startDomListener = false; var shortcut = { echo: function (shortcust) { var r = this.parse(shortcust); if ($.type(r) === 'object') { return r.echo; } }, processButton: function ($dom, item, context) { //处理按钮 if ($.type(item.shortcut) === 'string') { var bind = shortcut.parse(item.shortcut); if ($.type(bind) === 'object') { var echo = bind.echo; echo = "(" + echo + ")"; item.text = item.text + echo; bind.handler = function () { $dom.trigger('click'); }; //在容器中注册快捷键 context.shortcutContainer.bind.push(bind); } } if ($.type(item.ff) === 'number') { setTimeout(function () { var $ff = $dom; if ($ff.length > 0) { $ff.focus(); } }, item.ff); } }, processGrid: function ($dg, item, context) { //处理表格 if ($.type(item.ff) === 'number') { setTimeout(function () { $dom.closest('.datagrid-view').focus(); }, item.ff); } var $dom = $dg.closest('.datagrid-view'); //允许所有 datagrid 有焦点 $dom.attr('tabIndex', 10); //不允许 pagination 有焦点 var pagination = $dg.datagrid('getPager'); pagination.attr('tabIndex', -1); pagination.find('a').attr('tabIndex', -1); pagination.find('select').attr('tabIndex', -1); pagination.find('input').attr('tabIndex', -1); }, processEgridEditor: function ($dg, index, row) { //处理 egrid.columns 里面每一个 editor var editors = $dg.datagrid('getEditors', index); for (var i = 0; i < editors.length; i++) { if ($.inArray(editors[i].type, ['textbox', 'numberbox', 'numberspinner', 'combobox', 'combotree', 'combogrid', 'datebox', 'datetimebox', 'searchbox']) >= 0) { var $editor = editors[i].target; $editor.textbox('textbox').keydown(function (e) { var success = shortcut.processKey(e); if (success) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } }); } } }, processInputAfter: function ($dom, item, context) { //$dom.textbox('textbox').attr('tabIndex', 10); }, processInput: function ($dom, item, context) { //处理输入框 var handler = function ($dom) { var $ff = $dom.next('span').find('.validatebox-text'); if ($ff.length > 0) { $ff.focus(); } }; $dom.attr('tabIndex', 10); if ($.type(item.shortcut) === 'string') { var bind = this.parse(item.shortcut); if ($.type(bind) === 'object') { var echo = bind.echo.replace('Alt+', ''); echo = "" + echo + ""; item.label = item.label + echo; bind.handler = function () { handler($dom); }; //在容器中注册快捷键 context.shortcutContainer.bind.push(bind); } } if ($.type(item.ff) === 'number') { setTimeout(function () { handler($dom); }, item.ff); } }, ffApply:function($container) { var vv = $container.find('[ff]:first') var xtype = vv.attr('xtype') if(xtype === 'textbox' || xtype==='searchbox' || xtype==='numberbox'){ vv.next().children('input:first').focus(); } }, disableLayroTabIndex: function (layero) { //禁用 layer 中的tabIndex辅助按钮 layero.find('.layui-layer-setwin>a').attr('tabIndex', -1); }, registe: function ($dom, shortcut, handler) { if (!$dom.is('.shortcutContainer')) { $dom = $dom.closest('.shortcutContainer'); } if ($dom.length <= 0) { return false; } $.data($dom[0], 'shortcut').bind.push( $.extend(this.parse(shortcut), { handler: handler }) ); }, parse: function (shortcust, hasEcho) { shortcust = shortcust.toLowerCase(); var bind = {}; bind.key = shortcust.replace('+', '').replace(' ', '').replace(',', '').replace('ctrl', '').replace('shift', '').replace('alt', ''); if ($.type(bind.key) !== 'string' || !$.trim(bind.key)) { console.log("非法的快捷键定义:" + shortcust); return; } var array = ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Escape', 'Enter', 'PageDown', 'PageUp', 'Home', 'End', 'Delete', 'Insert', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; //别名定义 switch (bind.key) { case 'esc': bind.key = 'escape'; break; case 'up': bind.key = 'ArrowUp'; break; case 'down': bind.key = 'ArrowDown'; break; case 'left': bind.key = 'ArrowLeft'; break; case 'right': bind.key = 'ArrowRight'; break; } var find = $.inArray(bind.key, array.map(function (v) { return v.toLowerCase() })); if (bind.key.length !== 1 && find < 0) { console.log("非法的快捷键定义:" + shortcust); return; } bind.ctrl = shortcust.indexOf("ctrl") >= 0; bind.shift = shortcust.indexOf("shift") >= 0; bind.alt = shortcust.indexOf("alt") >= 0; if (find < 0) { bind.key = bind.key.toUpperCase(); if (!bind.ctrl && !bind.shift && !bind.alt) { bind.alt = true; } } else { bind.key = array[find]; } if (hasEcho !== false) { bind.echo = (bind.ctrl ? "Ctrl+" : "") + (bind.alt ? "Alt+" : "") + (bind.shift ? "Shift+" : "") + bind.key; } bind.key = bind.key.toUpperCase(); return bind; }, createContainer: function ($dom, context) { if (context.hasOwnProperty('shortcutContainer')) { //已经包含 shortcutContainer 的设定 return; } $dom.addClass('shortcutContainer'); var shortcutContainer = {bind: []}; $.data($dom[0], 'shortcut', shortcutContainer); context.shortcutContainer = shortcutContainer; }, processKey: function (e) { //传入keydown事件参数,如果处理成功 返回true,否则返回false var log = function () { var arg = ['shortcut']; for (var i = 0; i < arguments.length; i++) { arg.push(arguments[i]); } console.log.apply(this, arg); }; var hooks = { datagrid: function ($f, e) { var dff = function (xtype) { if (e.code === 'PageDown') { if ($f.down(xtype).datagrid('getPager').length <= 0) return false; log(xtype, 'PageDown'); var $next = $.data($f.down(xtype).datagrid('getPager')[0]).pagination.bb.next; if (!$next.is('.l-btn-disabled')) { $next.trigger('click'); } return true; } else if (e.code === 'PageUp') { if ($f.down(xtype).datagrid('getPager').length <= 0) return false; log(xtype, 'PageUp'); var $prev = $.data($f.down(xtype).datagrid('getPager')[0]).pagination.bb.prev; if (!$prev.is('.l-btn-disabled')) { $prev.trigger('click'); } return true; } else if (e.code === 'ArrowUp') { log(xtype, 'ArrowUp'); var $dg = $f.down(xtype); var row = $dg.datagrid('getSelected'); if (!row) return true; var index = $dg.datagrid('getRowIndex', row); if (index <= 0) return true; $dg.datagrid('selectRow', index - 1); return true; } else if (e.code === 'ArrowDown') { log(xtype, 'ArrowDown'); var $dg = $f.down(xtype); var row = $dg.datagrid('getSelected'); if (xtype === 'egrid') { //egrid 没有任何数据时按"下"键,需要添加操作,并聚焦到第一个编辑框 var rowsLength = $dg.datagrid('getRows').length; if (rowsLength <= 0) { $dg.edatagrid('addRow'); setTimeout(function () { $dg.edatagrid('focusEditor'); }, 50); return true; } } if (!row) return true; var index = $dg.datagrid('getRowIndex', row); if (xtype === 'egrid') { //egrid 最后一行按"下"键,需要添加操作,并聚焦到第一个编辑框 if (index >= rowsLength - 1) { //最后一行 $dg.edatagrid('addRow'); setTimeout(function () { $dg.edatagrid('focusEditor'); }, 50); return true; } } if (index < 0) return true; $dg.datagrid('selectRow', index + 1); return true; } else if (e.code === 'Escape') { if (xtype === 'egrid') { log(xtype, 'Escape'); var $dg = $f.down(xtype); var editRowIndex = $dg.edatagrid('getEditRowIndex'); if ($.type(editRowIndex) === 'number' && editRowIndex >= 0) { $dg.edatagrid('cancelRow'); } } } }; if ($f.down('list').length > 0) { return dff('list'); } else if ($f.down('grid').length > 0) { return dff('grid'); } else if ($f.down('egrid').length > 0) { return dff('egrid'); } return false; } }; if (e.key === 'Control' || e.key === 'Shift' || e.key === 'Alt') { return false; } if (e.ctrlKey && e.shiftKey && e.altKey && e.key.toLocaleLowerCase() === 'a') { console.log($("[tabindex]")); return true; } if (e.ctrlKey && e.shiftKey && e.altKey && e.key.toLocaleLowerCase() === 'c') { console.log($(document.activeElement)); return true; } var $f = $(document.activeElement); if ($f.is('div.datagrid-view')) { //当前是在 grid 体系的容器里 if (hooks.datagrid($f, e)) { return true; } } else if ($f.closest('div.datagrid-view').down('egrid').length > 0) { //当前是在 egrid 表格容器的grid里 if (hooks.datagrid($f.closest('div.datagrid-view'), e)) { return true; } } //找到当前焦点控件的快捷键容器 var shortcutContainer = $f; if (!$f.is('.shortcutContainer')) { shortcutContainer = $f.closest('.shortcutContainer'); } if (shortcutContainer.length <= 0) { return false; } shortcutContainer = $.data(shortcutContainer[0], 'shortcut'); //寻找容器中有没有注册当前的按键 for (var i = 0; i < shortcutContainer.bind.length; i++) { var bind = shortcutContainer.bind[i]; if ((bind.alt === e.altKey) && (bind.ctrl === e.ctrlKey) && (bind.shift === e.shiftKey) && (bind.key === e.key.toUpperCase())) { bind.handler(); } } return false; } }; $(function () { var setupGridTabIndex = function (data) { var $dg = $(this); var $dom = $dg.closest('.datagrid-view'); //允许所有 datagrid 有焦点 $dom.attr('tabIndex', 10); //不允许 pagination 有焦点 var pagination = $dg.datagrid('getPager'); pagination.attr('tabIndex', -1); pagination.find('a').attr('tabIndex', -1); pagination.find('select').attr('tabIndex', -1); pagination.find('input').attr('tabIndex', -1); //默认选中第一行 if (data && data.rows.length > 0) { $dg.datagrid('selectRow', 0); } }; if ($.fn.edatagrid) { $.fn.edatagrid.defaults.onLoadSuccess = setupGridTabIndex; } if ($.fn.datagrid) { $.fn.datagrid.defaults.onLoadSuccess = setupGridTabIndex; } document.onkeydown = function (e) { var success = shortcut.processKey(e); if (success) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } }; });