hust-epi/admin-ui/yvanui/yvanui.grid.edit.js

/**
 * 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 = $('<input id="' + id + '" />');
    $editor.attr('name', colOption.name);
    $editor.attr('itemId', colOption.name);
    $editor.attr('xtype', editor.xtype);
    $editor.data({ jqeditor: colOption });
    var $div = $('<div></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('有 <span style="color:greenyellow;font-weight: bolder;font-size: 33px;">' + r.length + '</span> 项校验未通过！请核对后再进行操作');
      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);