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

/**
 * yvan.yvgrid.edit.js
 * @author luoyifan
 * 2018-07-12
 */
'use strict';
(function ($) {

  if (!jqxGrid) {
    console.warn('no jqxGrid!!');
    return;
  }

  $.extend($.fn.yvgrid.methods, {

    /**
     * 标记当前数据行已经被修改过
     */
    editChanged: function (jq) {
      jq.each(function () {
        var state = $.data(this, 'yvgrid');
        state.editIsChanged = true;
      });
    },

    /**
     * 对当前行进行编辑, 返回 true 允许编辑，返回 false 不允许编辑
     */
    beginEdit: function (jq, opt) {
      var $dom = $(jq[0]);
      var state = $.data(jq[0], 'yvgrid');

      if ($dom.yvgrid('isEditing')) {
        //正在编辑中, 如果有修改过值, 就校验，如果失败就返回，成功就继续跳转
        if (state.editIsChanged) {
          if (!$dom.yvgrid('endEdit')) {
            return false;
          }
        } else {
          //取消上次编辑，并继续
          $dom.yvgrid('cancelEdit');
        }
      }

      var rowindex;
      if ($.type(opt) === 'object' && $.type(opt.rowIndex) === 'number') {
        rowindex = opt.rowIndex;
      } else {
        rowindex = $dom.jqxGrid('getselectedrowindex');
      }
      if ($.type(rowindex) === 'undefined' || rowindex < 0) {
        //当前没有选中任何行
        return false;
      }

      //记录当前正在编辑的行编号
      state.editRowIndex = rowindex;

      //记录当前这个数据行的数据(因为在 setEditRow 时，会改变数据，取消编辑时，希望能完全还原，所以这里需要保存)
      state.editRowData = $.extend({}, $dom.jqxGrid('getrowdata', rowindex));

      //记录当前正在编辑行，是否被改动过
      state.editIsChanged = false;

      $dom.jqxGrid('beginrowedit', rowindex);

      if ($.type(opt) === 'object' && $.type(opt.focusField) === 'string' && opt.focusField) {
        var $editor = $dom.find('[yv-inline-field=' + opt.focusField + ']');
        //自动聚焦到编辑控件上 这里要修改 jqxgrid.edit.js 735行源码
        setTimeout(function () {
          $editor[0].focus();
        }, 25);

      } else {
        //找到第一个可以编辑的列
        setTimeout(function () {
          var cols = $dom.jqxGrid('columns').records;
          for (var i = 0; i < cols.length; i++) {
            if (cols[i].editable) {
              var $editor = $dom.find('[yv-inline-field=' + cols[i].datafield + ']');
              $editor[0].focus();
              return;
            }
          }
        }, 25);
      }

      return true;
    },

    /**
     * 结束当前编辑行，如果提交成功就返回 true，如果校验失败编辑阶段会维持住并返回 false
     */
    endEdit: function (jq) {
      //尝试提交本行请求
      var $dom = $(jq[0]);
      var state = $.data(jq[0], 'yvgrid');
      var option = state.options;

      if (!$dom.yvgrid('isEditing')) {
        //没有在编辑阶段就不需要处理
        return true;
      }

      if ($.type(state.editRowIndex) === 'undefined' || state.editRowIndex < 0) {
        //当前没有选中任何行
        return true;
      }

      //获取当前编辑数据行
      var row = $dom.yvgrid('getEditRowInDataRow');
      var columns = $dom.jqxGrid('columns');
      var validateSuccess = true;
      for (var i = 0; i < columns.records.length; i++) {
        var col = columns.records[i];
        if (!col.editable || !col.validateeverpresentrowwidgetvalue) {
          continue;
        }

        var validResult = col.validateeverpresentrowwidgetvalue.call(col, col.datafield, row[col.datafield], row);
        if ($.type(validResult) === 'object') {
          //有校验异常
          var $editor = $dom.find('[yv-inline-field=' + col.datafield + ']');
          $editor.jqxTooltip({
            position: 'bottom',
            content: validResult.message
          }).jqxTooltip('open');
          $editor[0].focus();
          validateSuccess = false;
          break;
        }
      }

      if (validateSuccess) {
        //非正常（可控）状态下的取消编辑，只有在 yvgrid.endEdit 模式下，才能校验通过
        state.validatePass = true;

        //确认提交行
        $dom.jqxGrid('endrowedit', state.editRowIndex, false);
        //$dom.jqxGrid('updaterow', rowid, oldRow); //不需要再调这句话，不会毁坏冗余的数据结构

        delete state.editRowIndex;
        delete state.editRowData;
        delete state.validatePass;

        return true;
      }

      return false;
    },

    /**
     * 取消当前编辑行
     */
    cancelEdit: function (jq) {
      return jq.each(function () {
        var $dom = $(this);
        var state = $.data(this, 'yvgrid');

        if (!$dom.yvgrid('isEditing')) {
          //没有在编辑阶段就不需要处理
          return;
        }

        if ($.type(state.editRowIndex) === 'undefined' || state.editRowIndex < 0) {
          //当前没有选中任何行
          return;
        }

        if (state.editIsChanged) {
          //自从上次以来，有编辑过
          var rowid = $dom.jqxGrid('getrowid', state.editRowIndex);

          //让 dataAdapter 不要通知改变
          $dom.jqxGrid('source').isTemporary = true;

          //从 state.editRowData 还原数据行（从beginEdit时候就自动记录下来了）
          $dom.jqxGrid('updaterow', rowid, state.editRowData);

          //让 dataAdapter 不要通知改变
          $dom.jqxGrid('source').isTemporary = false;
        }

        delete state.editRowIndex;
        delete state.editRowData;

        //因为改动源码，所以 updaterow 不会再自动关闭编辑，需要手动调用
        var editcell = $dom.jqxGrid('editcell');
        try {
          $dom.jqxGrid('endcelledit', editcell.row, editcell.column, true, false);
        } catch (e) {
        }
      });
    },

    /**
     * 对当前添加行，进行重置操作
     */
    addNewResetAction: function (jq) {
      var $dom = $(jq[0]);
      var resetbutton = $dom.jqxGrid('addnewrowresetbutton');
      resetbutton.trigger('mousedown');
      var state = $.data($dom[0], 'yvgrid');
      delete state.newRowData;

      //跳转到第一个可编辑区域 ensurecellvisible
      var $first = $dom.find('[yv-newline-type]').first();
      setTimeout(function () {
        $first[0].focus();
      }, 100);
    },

    /**
     * 对当前添加行，进行添加操作
     */
    addNewAction: function ($dom) {
      var state = $.data($dom[0], 'yvgrid');
      var option = state.options;

      var addnewrowbutton = $dom.jqxGrid('addnewrowbutton');
      addnewrowbutton.trigger('mousedown');
      var $newrow = $('#addnewrowtop\\.' + $dom[0].id);

      //完成之后，查询是否有操作失败的情况
      var $target = $newrow.find('.jqx-input-invalid');
      if ($target.length > 0) {
        var $this = $target.first();
        //显示第一个错误 ensurecellvisible
        //var editor = this.addnewrowwidget;
        $this.jqxTooltip({
          position: 'bottom',
          content: $this.attr('title')
        }).jqxTooltip('open');

        setTimeout(function () {
          //跳转到第一个发生异常的区域 ensurecellvisible
          $target[0].focus();
        }, 100);

        return false;
      }

      return true;
    },

    /**
     * 删除被选中的行
     */
    deleteSelectedRow: function (jq) {
      return jq.each(function () {
        var target = this;
        var $dom = $(target);

        $dom.jqxGrid('beginupdate');
        var rowindex = $dom.jqxGrid('getselectedrowindex');
        var rowid = $dom.jqxGrid('getrowid', rowindex);
        $dom.jqxGrid('deleterow', rowid);

        var boundIndex = $dom.jqxGrid('getrowboundindex', rowindex);
        $dom.jqxGrid('selectrow', boundIndex);
        $dom.jqxGrid('endupdate');
      });
    },

    /**
     * 判断当前表格是不是在编辑中
     */
    isEditing: function ($dom) {
      //var editors = $dom.jqxGrid('editors');
      //return (editors && Object.getOwnPropertyNames(editors).length > 1);
      try {
        return $dom.jqxGrid('editcell');
      } catch (e) {
        return false;
      }
    },

    /**
     * 获取当前编辑表格的行id
     */
    editRowIndex: function (jq) {
      var target = jq[0];

      var edits = $(target).find('[yv-inline-field]');
      if (edits.length <= 0) {
        return;
      }
      return edits.first().attr('yv-inline-row');
    },

    /**
     * 获取当前编辑行数据，包括编辑控件内还未提交的数据，并自动判断当前编辑控件是在编辑行，还是在添加行上
     */
    getEditRow: function ($dom, sender) {
      if (!sender) {
        //如果没有指定发送者
        if ($dom.yvgrid('isEditing')) {
          //如果当前在编辑状态，就取表格编辑框里的数据
          return $dom.yvgrid('getEditRowInDataRow');
        } else {
          //否则取新建行里的数据
          return $dom.yvgrid('getPresentRow');
        }
      }

      var $sender = $(sender);
      if ($sender.closest('.jqx-grid-cell-add-new-row').length > 0) {
        //如果当前编辑单元格，在 presentRow 里就取 presentRow
        return $dom.yvgrid('getPresentRow');
      }

      return $dom.yvgrid('getEditRowInDataRow');
    },

    /**
     * 获取 presentRow 的所有数据（包括正在编辑框里没提交的数据）
     */
    getPresentRow: function ($dom, row) {
      var columns = $dom.jqxGrid('columns');
      var state = $.data($dom[0], 'yvgrid');

      var data = $.extend({}, state.newRowData);
      for (var i = 0; i < columns.records.length; i++) {
        var colSetter = columns.records[i];
        if ($.type(colSetter.geteverpresentrowwidgetvalue) === 'function') {
          data[colSetter.datafield] =
            colSetter.geteverpresentrowwidgetvalue.call(this, colSetter.datafield, colSetter.addnewrowwidget);
        }
      }

      return data;
    },

    /**
     * 获取当前编辑行数据，（包括编辑控件内还未提交的数据）
     */
    getEditRowInDataRow: function (jq) {
      var target = jq[0];
      var $dom = $(target);

      var data = $dom.yvgrid('rowData');

      $dom.find('[yv-inline-field]').each(function () {
        var $me = $(this);
        var colName = $me.attr('yv-inline-field');

        switch ($me.attr('yv-inline-xtype')) {
          case 'searchbox':
            data[colName] = $me.yvsearch('getValue');
            break;
          case 'datebox':
            data[colName] = $me.yvdate('getValue');
            break;
          case 'numberbox':
            data[colName] = $me.yvnumber('getValue');
            break;
          case 'checkbox':
            data[colName] = $me.yvcheck('getValue');
            break;
          case 'combobox':
            data[colName] = $me.jqxComboBox('val');
            break;
          case 'textbox':
            data[colName] = $me.val();
            break;
        }
      });

      return data;
    },

    /**
     * 为当前编辑行，设置临时数据
     */
    setEditRow: function ($dom, row, sender) {
      if ($.type(sender) === 'undefined') {
        if ($dom.yvgrid('isEditing')) {
          return $dom.yvgrid('setEditRowInDataRow', row);
        } else {
          return $dom.yvgrid('setPresentRow', row);
        }
      }

      var $sender = $(sender);

      if ($sender.closest('.jqx-grid-cell-add-new-row').length > 0) {
        //如果当前编辑单元格，在 presentRow 里就取 presentRow
        return $dom.yvgrid('setPresentRow', row);

      }
      //如果在 dataRow 里就设置 dataRow
      return $dom.yvgrid('setEditRowInDataRow', row);
    },

    /**
     * 为 presentRow 设置临时数据
     */
    setPresentRow: function (jq, row) {
      return jq.each(function () {
        var target = this;
        var $dom = $(target);

        var columns = $dom.jqxGrid('columns');
        for (var i = 0; i < columns.records.length; i++) {
          var colSetter = columns.records[i];
          if (!row.hasOwnProperty(colSetter.datafield)) {
            //如果没有要设置本列属性
            continue;
          }
          if ($.type(colSetter.reseteverpresentrowwidgetvalue) === 'function') {
            colSetter.reseteverpresentrowwidgetvalue.call(this, colSetter.datafield, colSetter.addnewrowwidget, row[colSetter.datafield]);
          }
        }

        var state = $.data(this, 'yvgrid');
        if (!state.newRowData) {
          state.newRowData = row;
        } else {
          $.extend(state.newRowData, row);
        }
      });
    },

    /**
     * 为当前编辑行，设置临时数据
     */
    setEditRowInDataRow: function (jq, row) {
      return jq.each(function () {
        var target = this;
        var $dom = $(target);
        var state = $.data(target, 'yvgrid');

        if (!$dom.yvgrid('isEditing')) {
          //如果当前没有进入编辑状态，就取消操作
          return;
        }

        $dom.yvgrid('editChanged');

        var rowindex = $dom.yvgrid('editRowIndex');
        var rowid = $dom.jqxGrid('getrowid', rowindex);

        //找到所有 yv-inline-field 标识的控件，设值到控件中
        var setEditorCount = 0; //获取到设置次数
        for (var colName in row) {
          if (!row.hasOwnProperty(colName)) continue;
          var $editor = $dom.find('[yv-inline-field=' + colName + ']');
          if ($editor.length <= 0) {
            //UI中没有找到编辑控件
            continue;
          }

          switch ($editor.attr('yv-inline-xtype')) {
            case 'searchbox':
              $editor.yvsearch('setValue', row[colName]);
              setEditorCount++;
              break;
            case 'datebox':
              $editor.yvdate('setValue', row[colName]);
              setEditorCount++;
              break;
            case 'numberbox':
              $editor.yvnumber('setValue', row[colName]);
              setEditorCount++;
              break;
            case 'checkbox':
              $editor.yvcheck('setValue', row[colName]);
              setEditorCount++;
              break;
            case 'combobox':
              $editor.jqxComboBox('val', row[colName]);
              setEditorCount++;
              break;
            case 'textbox':
              $editor.val(row[colName]);
              setEditorCount++;
              break;
          }
        }

        //判断如果 setEditors 已经把属性数量都设置好了，就不用再 updaterow，因为 updaterow 会引起延迟
        if (setEditorCount < Object.getOwnPropertyNames(row).length) {
          //后台设置数据源
          var oldRow = $dom.yvgrid('getEditRowInDataRow');
          $.extend(oldRow, row);
          //让 dataAdapter 不要通知改变
          $dom.jqxGrid('source').isTemporary = true;

          //更改 jqxgrid.js:3260行 updaterow之后不会关闭当前编辑框
          $dom.jqxGrid('updaterow', rowid, oldRow);

          //让 dataAdapter 可以接受通知改变
          $dom.jqxGrid('source').isTemporary = false;
        }
      });
    },
  });

  $.fn.yvgrid.edit = {

    //在切换之前
    beforeSelect: function (event, targetBoundIndex) {
      var $dom = $(this);
      var state = $.data(this, 'yvgrid');
      var option = state.options;

      var beginEditOption = undefined;
      var isEditing = $dom.yvgrid('isEditing');

      if (event.type === 'cellclick') {
        //单元格点击
        if (option.editOnSelected && event.args.column && event.args.column.editable) {
          //鼠标点击后立刻编辑
          beginEditOption = {
            type: 'cellclick',
            rowIndex: event.args.rowindex,
            focusField: event.args.column.datafield
          };

        } else if (isEditing) {
          // 如果当前正在编辑
          if (state.editIsChanged) {
            //如果改过，就返回提交结果
            return $dom.yvgrid('endEdit');
          }
          //没改过，取消编辑状态后，允许跳转
          $dom.yvgrid('cancelEdit');
          return true;

        } else {
          //允许跳转
          return true;

        }

      } else {
        if (!isEditing) {
          //没有编辑, 允许切换
          return true;
        }

        //找到当前焦点所在的单元格
        beginEditOption = {
          type: event.type,
          rowIndex: targetBoundIndex,
          focusField: $(event.target).attr('yv-inline-field')
        };
      }

      if (beginEditOption) {
        //如果切换编辑行成功，就允许跳转，否则不允许
        return $dom.yvgrid('beginEdit', beginEditOption);
      }

      //其他情况下，正在编辑状态时，不允许跳转
      return true;
    },

    columnOption: function (colOpt, targetOpt) {
      if (!colOpt.editor) {
        $.extend(targetOpt, {
          editable: false,
          createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
            htmlElement.addClass('yvgrid-presentrow-disable');
            var editor = $("<div class=\"jqx-grid-cell-left-align\" style=\"margin-top: 8.5px;\"></div>").appendTo(htmlElement);
            return editor;
          },
          initEverPresentRowWidget: function (datafield, htmlElement) {
          },
          getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
            return htmlElement.html();
          },
          resetEverPresentRowWidgetValue: function (datafield, htmlElement, value) {
            htmlElement.html(value || '');
          }
        });
        return;
      }

      function validation() {
        //非正常状态下的取消编辑，都会被认为是非法的
        var state = $.data(this.owner.element, 'yvgrid');
        if (state.validatePass === true) {
          return true;
        }
        var $dom = $(this.owner.element);
        setTimeout(function () {
          var tt = $dom.find('.jqx-grid-validation-arrow-up');
          var t2 = tt.next();
          tt.remove();
          t2.remove();
        });
        return {result: false, message: ''};
      }

      targetOpt.editable = true;
      switch (colOpt.editor.xtype) {
        case 'searchbox': {
          $.extend(targetOpt, {
            editable: true,
            columntype: 'textbox',
            validation: validation,
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(editor[0], 'inited')) {
                return;
              }
              $.data(editor[0], 'inited', true);

              var $dom = $(this.owner.element);

              var opt = $.extend({
                height: '100%',
                width: '100%',
                onChange: function () {
                  $dom.yvgrid('editChanged');

                  if ($.type(colOpt.onChange) === 'function') {
                    colOpt.onChange.apply(this, arguments);
                  }
                }
              }, colOpt.editor);
              editor.yvsearch(opt);

              editor.on('focus', function () {
                $dom.jqxGrid('ensurecellvisible', row, colOpt.field);
              });

              editor.attr('xtype', 'yvsearch');
              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'searchbox');
              editor.attr('yv-inline-row', row);
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              editor.yvsearch('setValue', cellvalue);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.yvsearch('getValue');
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row, isPresentRow) {
              var error = (function () {
                if (colOpt.editor.required) {
                  if ($.trim(value) === '') {
                    return "必填";
                  }
                }
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              var opt = $.extend({
                height: '100%',
                width: '100%'
              }, colOpt.editor);

              $.fn.power.defaults.xtype.yvsearch(htmlElement, opt);
              var $editor = htmlElement.down('yvsearch');
              $editor.css({
                border: 0,
                'padding-left': '4px'
              });
              $editor.attr('yv-newline-field', 'searchbox');
              $editor.attr('yv-newline-type', 'searchbox');
              return $editor;
            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.yvsearch('getValue');
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.yvsearch('setValue', value || '');
            }
          });
          break;
        }

        case 'datebox': {
          $.extend(targetOpt, {
            editable: true,
            columntype: 'textbox',
            validation: validation,
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(editor[0], 'inited')) {
                return;
              }
              $.data(editor[0], 'inited', true);

              var $dom = $(this.owner.element);

              editor.yvdate($.extend({
                height: '100%',
                width: '100%',
                onChange: function () {
                  $dom.yvgrid('editChanged');
                  if ($.type(colOpt.onChange) === 'function') {
                    colOpt.onChange.apply(this, arguments);
                  }
                }
              }, colOpt.editor));

              editor.on('focus', function () {
                $dom.jqxGrid('ensurecellvisible', row, colOpt.field);
              });

              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'datebox');
              editor.attr('yv-inline-row', row);
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              editor.yvdate('setValue', cellvalue);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.yvdate('getValue');
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row, isPresentRow) {
              var error = (function () {
                if (colOpt.editor.required) {
                  if ($.trim(value) === '') {
                    return "必填";
                  }
                }
                if (value) {
                  if (!/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/.test(value) ||
                    isNaN(moment(value).unix())) {
                    return "必须填写合理的日期值，比如" + moment().format('YYYY-MM-DD');
                  }
                }
                if ($.type(colOpt.editor.max) === 'string') {
                  if (value && moment(value).unix() > moment(colOpt.editor.max).unix()) {
                    return "必须小于 " + colOpt.editor.max;
                  }
                }
                if ($.type(colOpt.editor.min) === 'string') {
                  if (value && moment(value).unix() < moment(colOpt.editor.min).unix()) {
                    return "必须大于 " + colOpt.editor.min;
                  }
                }
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            initEverPresentRowWidget: function (datafield, htmlElement) {

            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              $.fn.power.defaults.xtype.yvdate(htmlElement,
                $.extend({
                  height: '100%',
                  width: '100%',
                  onChange: colOpt.onChange
                }, colOpt.editor));
              var editor = htmlElement.down('yvdate');
              editor.css({
                border: 0,
                'padding-left': '4px'
              });

              editor.attr('yv-newline-type', 'datebox');
              return editor;
            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.yvdate('getValue');
            },
            setEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.yvdate('setValue', value);
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.yvdate('setValue', value || '');
            }
          });
          break;
        }

        case 'numberbox': {
          $.extend(targetOpt, {
            editable: true,
            columntype: 'textbox',
            validation: validation,
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(editor[0], 'inited')) {
                return;
              }
              $.data(editor[0], 'inited', true);

              var $dom = $(this.owner.element);

              editor.yvnumber(
                $.extend({}, colOpt.editor, {
                  height: '100%',
                  width: '100%',
                  onChange: function (value, event) {
                    $dom.yvgrid('editChanged');
                    if ($.type(colOpt.editor.onChange) === 'function') {
                      colOpt.editor.onChange.call(this, value, event);
                    }
                  }
                }));

              editor.on('focus', function () {
                //this.setSelectionRange(0, this.value.length);
                this.select();
                $dom.jqxGrid('ensurecellvisible', row, colOpt.field);
              });

              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'numberbox');
              editor.attr('yv-inline-row', row);
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              editor.yvnumber('setValue', cellvalue);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.yvnumber('getValue');
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row, isPresentRow) {
              var error = (function () {
                if (colOpt.editor.required) {
                  if ($.trim(value) === '') {
                    return "必填";
                  }
                }
                if ($.type(colOpt.editor.max) === 'number') {
                  if (value && value > colOpt.editor.max) {
                    return "必须小于" + colOpt.editor.max;
                  }
                }
                if ($.type(colOpt.editor.min) === 'number') {
                  if (value && value < colOpt.editor.min) {
                    return "必须大于" + colOpt.editor.min;
                  }
                }
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              var opt = $.extend({
                height: '100%',
                width: '100%',
              }, colOpt.editor);

              $.fn.power.defaults.xtype.yvnumber(htmlElement, opt);
              var $editor = htmlElement.down('yvnumber');
              $editor.addClass('jqx-grid-cell-add-new-row')
                .attr('yv-newline-type', 'numberbox')
                .attr('yv-newline-field', colOpt.field);
              return $editor;
            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.yvnumber('getValue');
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.yvnumber('setValue', value || '');
            }
          });
          break;
        }

        case 'checkbox': {
          $.extend(targetOpt, {
            editable: true,
            validation: validation,
            columntype: 'custom',
            createeditor: function (row, cellvalue, htmlElement, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(htmlElement[0], 'inited')) {
                return;
              }
              $.data(htmlElement[0], 'inited', true);

              var $dom = $(this.owner.element);

              var opt = $.extend({}, colOpt.editor, {
                height: '100%',
                width: '100%',
                onChange: function (value) {
                  $dom.yvgrid('editChanged');
                  if ($.type(colOpt.editor.onChange) === 'function') {
                    colOpt.editor.onChange.call(this, value);
                  }
                }
              });

              $.fn.power.defaults.xtype.yvcheck(htmlElement, opt);

              var editor = htmlElement.down('yvcheck');
              editor.on('focus', function () {
                $dom.jqxGrid('ensurecellvisible', row, colOpt.field);
              });

              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'checkbox');
              editor.attr('yv-inline-row', row);
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              return editor.down('yvcheck').yvcheck('setValue', cellvalue);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.down('yvcheck').yvcheck('getValue');
            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              var opt = $.extend({
                height: '100%',
                width: '100%',
              }, colOpt.editor);

              $.fn.power.defaults.xtype.yvcheck(htmlElement, opt);

              var $editor = htmlElement.down('yvcheck');
              $editor.addClass('jqx-grid-cell-add-new-row')
                .attr('yv-newline-field', colOpt.field)
                .attr('yv-newline-type', 'checkbox');
              return $editor;
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row) {
              var error = (function () {
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.yvcheck('getValue');
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.yvcheck('setValue', value || '');
            }
          });
          break;
        }

        case 'combobox': {
          $.extend(targetOpt, {
            editable: true,
            columntype: 'combobox',
            validation: validation,
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(editor[0], 'inited')) {
                return;
              }
              $.data(editor[0], 'inited', true);

              var $dom = $(this.owner.element);

              editor.jqxComboBox({
                //dropDownWidth: 250,
                animationType: 'none',
                //width: '100%',
                //height: cellheight + 2,
                //autoDropDownHeight: true,
                displayMember: colOpt.editor.textField,
                valueMember: colOpt.editor.valueField,
                source: colOpt.editor.data
              });
              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'combobox');
              editor.attr('yv-inline-row', row);

              editor.find('.jqx-combobox-input').bind('focus', function () {
                //$dom.jqxGrid('ensurecellvisible', row, colOpt.field);
                editor.jqxComboBox('open');
              }).bind('blur', function () {
                editor.jqxComboBox('close');
              });

              editor.on('change', function (event) {
                //只有键盘和鼠标的选择动作才允许，其他情况都不事件通知
                if (event.args.type !== 'keyboard' && event.args.type !== 'mouse') {
                  return;
                }
                $dom.yvgrid('editChanged');
                if ($.type(colOpt.editor.onSelect) === 'function') {
                  colOpt.editor.onSelect.call(this, $(editor).val());
                }
              });
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              editor.jqxComboBox('val', cellvalue);
              editor.width(editor.width() + 2);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.jqxComboBox('val');
            },
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
              for (var i = 0; i < colOpt.editor.data.length; i++) {
                if (colOpt.editor.data[i][colOpt.editor.valueField] === $.trim(value)) {
                  value = colOpt.editor.data[i][colOpt.editor.textField];
                  break;
                }
              }

              if (!columnproperties) {
                columnproperties = {cellsalign: 'left'};
              }
              return '<div class="jqx-grid-cell-' + columnproperties.cellsalign + '-align" style="margin-top: 8.5px;">' + value + '</div>';
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row, isPresentRow) {
              var error = (function () {
                if (colOpt.editor.required) {
                  if ($.trim(value) === '') {
                    return "必填";
                  }
                }
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              var editor = $("<div />").appendTo(htmlElement);
              editor.jqxComboBox({
                width: '100%',
                height: '100%',
                dropDownWidth: 250,
                animationType: 'none',
                autoDropDownHeight: true,
                displayMember: colOpt.editor.textField,
                valueMember: colOpt.editor.valueField,
                source: colOpt.editor.data
              }).css({
                border: 0
              }).addClass('jqx-grid-cell-add-new-row');

              editor.attr('yv-newline-field', colOpt.field);
              editor.attr('yv-newline-type', 'combobox');

              editor.find('.jqx-combobox-input').bind('focus', function () {
                editor.jqxComboBox('open');
              }).bind('blur', function () {
                editor.jqxComboBox('close');
              });
              editor.on('change', function (event) {
                if ($.type(colOpt.editor.onSelect) === 'function') {
                  colOpt.editor.onSelect.call(this, $(editor).val());
                }
              });
              return editor;
            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.jqxComboBox('val');
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.jqxComboBox('val', value || '');
            }
          });
          break;
        }

        default: {
          //textbox
          $.extend(targetOpt, {
            editable: true,
            columntype: 'textbox',
            validation: validation,
            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
              // createeditor 在每行进行编辑时会调用一次，但是 editor 不会被更改，
              // 自从第一次被初始化后，防止第二次再进行初始化
              if ($.data(editor[0], 'inited')) {
                return;
              }
              $.data(editor[0], 'inited', true);

              var $dom = $(this.owner.element);

              editor.jqxInput({
                //width: '100%',
                height: '100%'
              });

              editor.attr('yv-inline-field', colOpt.field);
              editor.attr('yv-inline-xtype', 'textbox');
              editor.attr('yv-inline-row', row);

              editor.on('focus', function () {
                $dom.jqxGrid('ensurecellvisible', row, colOpt.field);
              });

              editor.on("input propertychange", function (event) {
                $dom.yvgrid('editChanged');
                if ($.type(colOpt.editor.onChange) === 'function') {
                  colOpt.editor.onChange.call(this, editor.val(), event);
                }
              });
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
              editor.jqxInput('val', cellvalue);
            },
            geteditorvalue: function (row, cellvalue, editor) {
              return editor.jqxInput('val');
            },
            validateeverpresentrowwidgetvalue: function (datafield, value, row, isPresentRow) {
              var error = (function () {
                if (colOpt.editor.required) {
                  if ($.trim(value) === '') {
                    return "必填";
                  }
                }
                if ($.type(colOpt.editor.maxlength) === 'number') {
                  if (value && value.length > colOpt.editor.maxlength) {
                    return "必须小于" + colOpt.editor.maxlength + "个字符";
                  }
                }
                if ($.type(colOpt.editor.minlength) === 'number') {
                  if (value && value.length < colOpt.editor.minlength) {
                    return "必须大于" + colOpt.editor.minlength + "个字符";
                  }
                }
                if ($.type(colOpt.editor.validate) === 'function') {
                  return colOpt.editor.validate(value, row);
                }
              })();

              if (error) {
                return {message: error, result: false};
              }
              return true;
            },
            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
              var editor = $("<input />").appendTo(htmlElement);
              editor.jqxInput({
                width: '100%',
                height: '100%'
              }).css({
                'padding-left': '4px',
                border: 0
              }).addClass('jqx-grid-cell-add-new-row');

              editor.attr('yv-newline-field', datafield);
              editor.attr('yv-newline-xtype', 'textbox');

              editor.on("input propertychange", function (event) {
                if ($.type(colOpt.editor.onChange) === 'function') {
                  colOpt.editor.onChange.call(this, editor.val(), event);
                }
              });
              return editor;

            },
            getEverPresentRowWidgetValue: function (datafield, editor, validate) {
              return editor.jqxInput('val');
            },
            resetEverPresentRowWidgetValue: function (datafield, editor, value) {
              editor.jqxInput('val', value || '');
            }
          });
        }//case default

      }//switch

    },

    sourceOption: function ($dom, easyuiOpt, sourceOpt) {
      if (!easyuiOpt.editable) {
        return;
      }

      $.extend(sourceOpt, {
        updaterow: function (rowid, rowdata, commit) {
          if (this.isTemporary) {
            //临时 setEditRow 操作造成的提交，可以忽略
            commit(true);
            return;
          }

          console.log('updaterow', rowdata);
          if ($.type(easyuiOpt.onRowUpdate) === 'function') {
            //有自定义的 onRowUpdate 方法
            easyuiOpt.onRowUpdate.call(this, rowid, rowdata, commit);
          } else {
            //没有自定义，默认提交
            commit(true);
          }
        },

        deleterow: function (rowid, commit) {
          console.log('deleterow', arguments);
          if ($.type(easyuiOpt.onRowDelete) === 'function') {
            //有自定义的 onRowDelete 方法
            easyuiOpt.onRowDelete.call(this, rowid, commit);
          } else {
            //没有自定义，默认提交
            commit(true);
          }
        },

        addrow: function (rowid, rowdata, position, commit) {
          var state = $.data($dom[0], 'yvgrid');
          $.extend(rowdata, state.newRowData, rowdata);
          console.log('addrow', rowdata);

          if ($.type(easyuiOpt.onRowAppend) === 'function') {
            //有自定义的 onRowAppend 方法
            easyuiOpt.onRowAppend.call(this, rowid, rowdata, function (isCommit) {
              commit(isCommit);
              if (isCommit) {
                //如果提交成功，需要删除 state.newRowData 方法
                delete state.newRowData;
              }
            });
          } else {
            //没有自定义，默认提交
            commit(true);
          }
        }
      });
    },

    /**
     * 表格设置
     */
    gridOption: function ($dom, easyuiOpt, jqxOpt) {
      if (!easyuiOpt.editable) {
        jqxOpt.editable = false;
        return;
      }
      $.extend(jqxOpt, {
        //selectionmode: 'singlerow',
        //selectionmode: 'multiplerowsextended',
        editmode: 'selectedrow',  //如果换成 programmatic 可能造成无法多个单元格同时编辑
        //editmode: 'programmatic',
        editable: true,
        showeverpresentrow: true,
        everpresentrowposition: 'top',
      });

      if(easyuiOpt.allowAddNew === false){
        $.extend(jqxOpt, {
          showeverpresentrow: false
        })
      }

      //双击后进入编辑
      $dom.on('rowdoubleclick', function (event) {
        $dom.yvgrid('beginEdit');
      });
    },

    /**
     * 按键
     */
    handlekeyboardnavigation: function (event) {
      if (!this.editable) {
        //以下按键都是为编辑而准备的，如果不允许编辑 就不需要过下面这些逻辑
        return;
      }
      var $sender = $(event.target);
      var $dom = $(this.element);

      switch (event.keyCode) {
        case 113: {  //F2 进入编辑
          if ($sender.closest('.jqx-grid-cell-add-new-row').length > 0) {
            //添加行上按 F2 忽略
            return true;
          }
          $dom.yvgrid('beginEdit', event);
          return true;
        }

        case 27: { //esc
          //添加行上按 ESC 代表重置
          if ($sender.closest('.jqx-grid-cell-add-new-row').length > 0) {
            $dom.yvgrid('addNewResetAction', event);
            return true;
          }

          //命中在编辑格上，代表取消编辑
          if (this.editcell != null) {
            $dom.yvgrid('cancelEdit', event);
            return true;
          }
          break;
        }

        case 13: {
          //enter
          if ($sender.attr('xtype') === 'yvsearch') {
            //命中在 yvsearch 里，忽略该请求
            return true;
          }
          if ($sender.closest('.jqx-grid-cell-add-new-row').length > 0) {
            //命中在添加行上, 代表新建行
            $dom.yvgrid('addNewAction', event);
            return true;
          }
          if (this.hasOwnProperty('editcell')) {
            //正在编辑模式中，提交本行的请求
            $dom.yvgrid('endEdit', event);
            return true;
          }
          break;
        }

        case 46: {  //delete
          if (event.target.tagName === 'INPUT') {
            //输入框里面按下的 delete 键忽略
            return;
          }

          if (this.editcell == null && $sender.closest('.jqx-grid-cell-add-new-row').length === 0) {
            //没有编辑、没有新建，代表当前行的删除
            $dom.yvgrid('deleteSelectedRow');
            return true;
          }
          break;
        }

      }//switch

    }//handlekeyboardnavigation

  };//edit;

})(jQuery);