/** * yvan.grid.edit.js * @author luoyifan * 2018-12-07 18:37:00 */ 'use strict'; (function ($) { var WIDTH_OFFSET = -1; if (!$.jgrid) { console.warn('no jqGrid!!'); return; } function runtimeCreateCtl(elem, operation, value) { var $editor = $(elem).find('input[xtype]'); var editor = $editor.data('jqeditor').editor; if ($.inArray(editor.xtype, ["textbox", "searchbox", "datebox", "numberbox"]) >= 0) { //================= textbox 赋值 if (operation === 'get') { return $editor.textbox('getText'); } else if (operation === 'set') { if (editor.xtype === 'numberbox') { if (!value) { value = 0; } if (editor.precision) { value = parseFloat(value).toFixed(editor.precision); } } $editor.textbox('initValue', value); } } else if ($.inArray(editor.xtype, ["combobox"]) >= 0) { //================= combobox if (operation === 'get') { return $editor.combobox('getValue'); } else if (operation === 'set') { $editor.combobox('initValue', value); $editor.combobox('setValue', value); } } else if (editor.xtype === 'checkbox') { //================= checkbox if (operation === 'get') { if ($editor.checkbox('isChecked')) { return editor.on; } return editor.off; } else if (operation === 'set') { $editor.checkbox('initValue', value === editor.on); } } else { console.error('不支持的编辑方式:', options); } return ''; } function runtimeCreateInput(value, options) { var $grid = $(this); var colOption = options.cm; var editor = colOption.editor; var f = colOption.editor.onChange; colOption.editor.onChange = function (a,b) { $grid.setGridParam({ 'beEdited': true }); if ($.type(f) === 'function') { f(a,b); } }; var id = $.yvan.createId('e'); var $editor = $(''); $editor.attr('name', colOption.name); $editor.attr('itemId', colOption.name); $editor.attr('xtype', editor.xtype); $editor.data({ jqeditor: colOption }); var $div = $('
'); $div.append($editor); //$div.css({ width: colOption.width - WIDTH_OFFSET }); //$div.css({ width: colOption.width - WIDTH_OFFSET }); $('body').append($div); if ($.inArray(editor.xtype, ["textbox", "searchbox", "datebox", "numberbox"]) >= 0) { $editor[editor.xtype]( $.extend({ width: colOption.width - WIDTH_OFFSET, tipPosition: 'bottom' }, editor) ); if (editor.xtype === 'searchbox') { $editor.searchbox('onSysRender'); } } else if ($.inArray(editor.xtype, ["combobox"]) >= 0) { $editor[editor.xtype]( $.extend({ width: colOption.width - WIDTH_OFFSET, tipPosition: 'right' }, editor) ); } else if (editor.xtype === 'checkbox') { $editor.checkbox($.extend({ tipPosition: 'bottom' }, editor)); } else { console.error('不支持的编辑方式:', colOption); } options.custom_value($div, 'set', value); return $div; } $.jgrid.chain.onReload.push(function (rowid) { //重新载入数据时,要立刻结束当前编辑状态 var $grid = $(this); if ($grid.editRowId()) { $grid.cancelEditRow(); } }); $.jgrid.chain.beforeSelectRow.push(function (rowid, e) { //编辑状态下,不允许切换行 var $grid = $(this); var cellIndex = e.target.cellIndex || 'null'; $grid.lastClickCol(cellIndex); if ($grid.getGridParam('multiselect')) { //多选状态下 if (cellIndex === 'null') { //通过勾选而产生的事件,不校验、也不切换编辑行 if ($grid.editRowId()) { //在多选状态下,当前正在编辑的行,无法取消选择的bug $grid.getGridParam().multiNeedTo = ($.inArray(rowid, $grid.getGridParam('selarrrow')) < 0); } return true; } } if (rowid === $grid.editRowId()) { //如果要跳转的行,就是当前编辑行,就静默拦截 return false; } if ($grid.jqGrid('getGridParam', 'editable') && $grid.jqGrid('getGridParam', 'editOnSelected')) { //编辑状态下,需要校验当前行是否通过校验 var vr = $grid.validateRow(); //没有通过校验 if (vr === false) return false; return true; } if ($grid.jqGrid('getGridParam', 'editable') && !$grid.jqGrid('getGridParam', 'editOnSelected')) { //不是 editOnSelected,需要禁用行选择 if ($grid.editRowId()) { if ($grid.editRowId() !== rowid) { $.yvan.msg('请先结束编辑,再进行选择'); } return false; } } return true; }); $.jgrid.chain.onSelectRow.push(function (rowid, e) { var $grid = $(this); var colIndex = $grid.lastClickCol(); if ($grid.getGridParam('multiselect')) { //多选状态 if (colIndex === 'null') { //通过勾选而产生的事件,不校验、也不切换编辑行 if ($grid.editRowId()) { //在多选状态下,当前正在编辑的行,无法取消选择的bug var needTo = $grid.getGridParam('multiNeedTo'); if (!needTo) { $grid.resetSelection(rowid); } } return; } } //console.log('onSelectRow', rowid, $grid.lastClickCol() ? $grid.lastClickCol().name : ''); var col = $grid.getCol(colIndex); $grid.lastClickCol(null); if ($grid.jqGrid('getGridParam', 'editable') && $grid.jqGrid('getGridParam', 'editOnSelected')) { //如果需要选择后立即进入编辑状态 $grid.editRow2(rowid, col); } }); $.jgrid.chain.prepearOption.push(function (opts,grid) { if (opts.colModel) { for (var i = 0; i < opts.colModel.length; i++) { var colOption = opts.colModel[i]; if (!colOption.editable) { //如果不允许编辑,就不用走下面的编辑器运行时设置了 continue; } $.extend(true, colOption, { editable: true, edittype: 'custom', editoptions: { // 把 custom_element: runtimeCreateInput,//function(value, options){return runtimeCreateInput(value, options, grid)} , custom_value: runtimeCreateCtl//function(elem, operation, value){return runtimeCreateCtl(elem, operation, value, grid)} } }); } } }); $.jgrid.chain.ondblClickRow.push(function (rowid, iRow, iCol, e) { var $grid = $(this); var editable = $grid.jqGrid('getGridParam', 'editable'); if (editable) { if ($grid.jqGrid('getGridParam', 'editOnDblClick')) { $grid.setSelection(rowid, true); $grid.editRow2(rowid, $grid.getCol(iCol)); } } }); $.jgrid.chain.onKeydown.push(function (e) { var $grid = $(this); if ($.type($grid.getGridParam().onKeyDown) === 'function') { $grid.getGridParam().onKeyDown(e); } if (e.key === 'Escape') { $grid.cancelEditRow(); return true; } else if (e.key === 'Enter') { $grid.editRow2(); return true; } if ($grid.editRowId()) { //在编辑状态 if (e.key === 'ArrowDown') { console.log('down'); return true; } else if (e.key === 'ArrowUp') { console.log('up'); return true; } } }); //================= 扩展属性 ================= function beginEditRow(data) { var $grid = $(this); return function (rowid) { $grid.editRowId(rowid); var onBeginEditRow = $grid.getGridParam('onBeginEditRow'); if (onBeginEditRow) { onBeginEditRow.call($grid[0], rowid, data); } //$grid.findBox().find('input.cbox').attr("disabled", "disabled"); $grid.editRowData($.extend({}, data)); $grid.editRowDataOrg($.extend({}, data)); }; } function restoreEditRow() { var $grid = $(this); return function () { var onRestoryEditRow = $grid.getGridParam('onRestoryEditRow'); var editRowId = $grid.editRowId(); var editRowDataOrg = $grid.editRowDataOrg(); if (onRestoryEditRow) { onRestoryEditRow.call(this, editRowId, editRowDataOrg); } if (!editRowDataOrg) { $grid.deleteRow(editRowId); } else { $grid.jqGrid('setRowData', editRowId, editRowDataOrg); } $grid.editRowId(null); //$grid.findBox().find('input.cbox').removeAttr("disabled"); }; } function getEditRow() { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return; //取到所有的编辑器,并从编辑器中取值 var cols = $grid.getCol(); var editRowData = $grid.editRowData(); var r = $.extend({}, editRowData); for (var i = 0; i < cols.length; i++) { if (cols[i].hasOwnProperty('editoptions') && cols[i].editoptions.hasOwnProperty('custom_value')) { var $editor = $grid.item(cols[i].name).parent(); r[cols[i].name] = cols[i].editoptions.custom_value($editor, 'get'); } } return r; } function setEditRow(data) { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return; var onReadysetEditRow = $grid.getGridParam('onReadysetEditRow'); if (onReadysetEditRow) { onReadysetEditRow.call(this, editRowId, data); } var editRowData = $grid.editRowData(); for (var name in data) { if (!data.hasOwnProperty(name) || !editRowData.hasOwnProperty(name)) { console.error('data 或 grid 不存在的属性', name); continue; } //var col = $grid.getCol(name); var col = $grid.jqGrid('getColProp', name); if (!col) { console.error('grid 不存在的属性', name); continue; } editRowData[name] = data[name]; if (col.hasOwnProperty('editoptions') && col.hasOwnProperty('editor') && col.editoptions.hasOwnProperty('custom_value')) { //找到编辑器赋值 var $editor = $grid.item(col.name).parent(); col.editoptions.custom_value($editor, 'set', editRowData[col.name]); } else { //单元格赋值 if (!editRowData[col.name]) { editRowData[col.name] = '\x00'; } $grid.setCell(editRowId, col.name, editRowData[col.name]); } } } function validateRow() { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return; var $form = $grid.closest('form'); var vbox = $form.find(".validatebox-text"); vbox.validatebox("validate"); var r = $form.find(".validatebox-invalid"); var onValidateEditRow = $grid.getGridParam('onValidateEditRow'); if (onValidateEditRow) { onValidateEditRow.call(this, editRowId, r); } if (r.length > 0) { $grid.showEditError(r); return false; } return true; } function saveEditRow() { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return false; $grid.findBox().find('input.cbox').removeAttr("disabled"); var onSaveEditRow = $grid.getGridParam('onSaveEditRow'); if (onSaveEditRow) { onSaveEditRow.call(this, editRowId); } if (!validateRow.call(this)) { return false; } $grid.saveRow(editRowId, true, 'clientArray'); $grid.editRowId(null); return true; } function editRow(rowid, focusColumnOption) { var $grid = $(this); var editRowId = $grid.editRowId(); rowid = rowid || $grid.selrow(); if (rowid === editRowId) { return true; } if (editRowId) { //尽量保存当前编辑行 if (!saveEditRow.call(this)) { //如果保存不成功 return false; } } $grid.jqGrid('editRow', rowid, { keys: false, oneditfunc: beginEditRow.call(this, $grid.rowData(rowid)), url: 'clientArray', afterrestorefunc: restoreEditRow.call(this) } ); //focus if (focusColumnOption && focusColumnOption.editable) { //列允许编辑 setTimeout(function () { var text = $grid.closest('form').find('[itemId=' + focusColumnOption.name + ']'); if (text && text.data('textbox')) { setTimeout(function () { text.textbox('textbox')[0].focus(); }); } }, 20); } } $.jgrid.extend({ getEditRow: getEditRow, setEditRow: setEditRow, validateRow: validateRow, showEditError: function (r) { $.yvan.msg('有 ' + r.length + ' 项校验未通过!请核对后再进行操作'); r[0].focus(); }, addRowForEdit: function (rowData) { var $grid = $(this); var editRowId = $grid.editRowId(); if (editRowId) { if (!saveEditRow.call(this)) { return false; } } var rowId = $.yvan.createId('nr'); $grid.addRowData(rowId, rowData, "last"); $grid.jqGrid('setSelection', rowId, false); editRow.call(this, rowId); $grid.editRowDataOrg(null); }, editRow2: editRow, cancelEditRow: function () { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return; $grid.jqGrid('restoreRow', editRowId, restoreEditRow.call(this)); setTimeout(function () { $('.tooltip').remove(); $grid.focus(); }); }, saveEdit: function () { var $grid = $(this); var editRowId = $grid.editRowId(); if (!editRowId) return $grid.getData(); if (!saveEditRow.call(this)) { return false; } return $grid.getData(); }, lastClickCol: function (value) { var $grid = $(this); if ($.type(value) === 'undefined') { return $grid.jqGrid('getGridParam', 'lastClickCol'); } return $grid.jqGrid('getGridParam').lastClickCol = value; }, editRowId: function (value) { var $grid = $(this); if ($.type(value) === 'undefined') { return $grid.jqGrid('getGridParam', 'editRowId'); } return $grid.jqGrid('getGridParam').editRowId = value; }, editRowDataOrg: function (value) { var $grid = $(this); if ($.type(value) === 'undefined') { return $grid.jqGrid('getGridParam', 'editRowDataOrg'); } return $grid.jqGrid('getGridParam').editRowDataOrg = value; }, editRowData: function (value) { var $grid = $(this); if ($.type(value) === 'undefined') { return $grid.jqGrid('getGridParam', 'editRowData'); } return $grid.jqGrid('getGridParam').editRowData = value; } }); })(jQuery);