jqueryeasyui-datagrid-扩展-支持单元格编辑

jqueryeasyui-datagrid 很强大，可是在包含 三五十个列的时候，datagrid 行编辑器加载就忍无可忍了（这里用的 IE 浏览器，其他的浏览器稍微好些）

因为写了一个日期&时间的编辑器的扩展，发现加载纯 text 框很快，但是加载内置编辑器就会稍有延迟，所以扩展的用了延时调用（ window.setTimeout ）。

但是，内置的其它编辑器（text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree）都有问题！

所以考虑了下，如果编辑时只加载一个单元格的一定会好点儿，结果~~~ 果然不错效果很好！

先上效果图：

其中 gridEditCellHelper   里面用到的方法都是来自 easyui1.3.3-jquery.datagrid.js 中的代码。

用过的也知道这里面的代码被混淆过了，不过我自己手动把用到的代码反向过来了，如果有错误大家可以自己把响应

代码 copy 一份从 jquery.datagrid.js 中。

这里指做抛砖引玉了 ~~~~

-----------------------------------------

gridEditCellHelper 对象为编辑所需的所有代码

//131012-datagrid 单元格编辑扩展

131018-更新

var gridEditCellHelper = {
  traget:null,
  //editIndex:0,
  //开始单元格编辑
  beginCellEdit: function (_traget, _index, _fieldName) {
    gridEditCellHelper.traget = _traget;
    //gridEditCellHelper.editIndex = _index;
    var opts = $.data(_traget, "datagrid").options;
    var tr = opts.finder.getTr(_traget, _index);
    var row = opts.finder.getRow(_traget, _index);
    gridEditCellHelper.endCellEdit(_traget, _index, false);//结束编辑单元格
    if (!tr.hasClass("datagrid-row-editing")) {
      tr.addClass("datagrid-row-editing");
    }
    if (opts.onBeforeEdit.call(_traget, _index, row) == false) {
      return;
    }//alert('begin')
    gridEditCellHelper.bindCellEditEvent(_traget, _index,true);//点击空白结束编辑
    gridEditCellHelper._initCellEditor(_traget, _index, _fieldName);//初始化编辑器
    gridEditCellHelper._resizeEditors(_traget);//调整编辑器大小
    tr.find("div.datagrid-editable").each(function () {
      var _field = $(this).parent().attr("field");
      if (_field != _fieldName) return true;
      var ed = $.data(this, "datagrid.editor");
      ed.actions.setValue(ed.target, row[_field]);//编辑器赋值
    });
    gridEditCellHelper.validateEditingRow(_traget, _index); //编辑行输入值验证
  },
  //点击空白区域结束grid编辑(_isBind:true=注册事件，false=卸载事件)
  bindCellEditEvent: function(_target,_index,_isBind) {
    if (_isBind) {
      $(document).on("click.datagrid", function(e) { //点击datagrid空白区域，结束编辑
        if (_index >= 0) {
          $(document).off("click.datagrid");
          $(_target).datagrid('endCellEditExt', _index); //结束编辑单元格
        }
      });
    } else {
      $(document).off("click.datagrid");
    }
  },
  //结束单元格编辑
  endCellEdit:function(_traget, _index, _isCancelEdit) {//this, _index, false
    var opts = $.data(_traget, "datagrid").options;
    var _updatedRows = $.data(_traget, "datagrid").updatedRows;
    var _insertedRows = $.data(_traget, "datagrid").insertedRows;
    var tr = opts.finder.getTr(_traget, _index);
    var row = opts.finder.getRow(_traget, _index);
    gridEditCellHelper.bindCellEditEvent(_traget, _index,false);//移除事件
    if (!tr.hasClass("datagrid-row-editing")) {
      return;
    }//alert('end')
    var idField = opts.idField;//主键
    var idValue = row[idField];//主键值
    //非取消编辑，更新数据（需要：行的主键字段）
    if (!_isCancelEdit) {
      if (!gridEditCellHelper.validateEditingRow(_traget, _index)) {
        return;
      }
      var _isUpdate = false;
      var _changes = {};
      var _field;
      tr.find("div.datagrid-editable").each(function () {
        _field = $(this).parent().attr("field");
        var ed = $.data(this, "datagrid.editor");
        var _value = ed.actions.getValue(ed.target);
        if (row[_field] != _value) {
          row[_field] = _value;
          _isUpdate = true;
          _changes[idField] = idValue;//记录主键字段及值
          _changes[_field] = _value;//记录修改字段及值
          return false;
        }
      });
      if (_isUpdate && idValue) {
        //使用 idField 、idValue 找到 updaterow
        var updateRow = null;
        for(var i=0;i<_updatedRows.length;i++) {
          var item = _updatedRows[i];
          if (item[idField] == idValue) {
            updateRow = item;
            break;
          }
        }
        if (updateRow==null) {
          _updatedRows.push(_changes);
        } else {
          updateRow[_field] = _changes[_field];//修改或更新
        }
        //miniTip(JsGlobals.jsonStr(_updatedRows))
      }
    }
    tr.removeClass("datagrid-row-editing");
    gridEditCellHelper._rowEditDestroy(_traget, _index);
    $(_traget).datagrid("refreshRow", _index);
    if (!_isCancelEdit) {
      opts.onAfterEdit.call(_traget, _index, row, _changes);
    } else {
      opts.onCancelEdit.call(_traget, _index, row);
    }
  },
  //验证编行
  validateEditingRow:function(_traget, _index) {//_traget, _index
    var tr = $.data(_traget, "datagrid").options.finder.getTr(_traget, _index);
    if (!tr.hasClass("datagrid-row-editing")) {
      return true;
    }
    var vbox = tr.find(".validatebox-text");
    vbox.validatebox("validate");
    vbox.trigger("mouseleave");
    var _vInvalid = tr.find(".validatebox-invalid");
    return _vInvalid.length == 0;
  },
  //初始化单元格编辑器
  _initCellEditor: function (_traget, _index, _fieldName) {
    var opts = $.data(_traget, "datagrid").options;
    var tr = opts.finder.getTr(_traget, _index);
    tr.children("td").each(function () {
      var cell = $(this).find("div.datagrid-cell");
      var _field = $(this).attr("field");
      if (_field != _fieldName) return true;
      var col = gridEditCellHelper._findField(_traget, _field);
      if (col && col.editor) {
        var _editorType, _editorOpts;
        if (typeof col.editor == "string") {
          _editorType = col.editor;
        } else {
          _editorType = col.editor.type;
          _editorOpts = col.editor.options;
        }
        var _editor = opts.editors[_editorType];
        if (_editor) {
          var _html = cell.html();
          var _width = cell.outerWidth();
          cell.addClass("datagrid-editable");
          cell.outerWidth(_width);
          cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");
          cell.children("table").bind("click dblclick contextmenu", function (e) {
            e.stopPropagation();
          });
          $.data(cell[0], "datagrid.editor", { actions: _editor, target: _editor.init(cell.find("td"), _editorOpts), field: _field, type: _editorType, oldHtml: _html });
          window.setTimeout(function () {
            cell.children("table").find("input").select();
      }, 100);
        }
      }
    });
    gridEditCellHelper._setRowHeight(_traget, _index, true);//设置行高度
  },
  //查找字段
  _findField:function(_traget, _field) {
    function _getCol(_columns) {
      if (_columns) {
        for (var i = 0; i < _columns.length; i++) {
          var cc = _columns[i];
          for (var j = 0; j < cc.length; j++) {
            var c = cc[j];
            if (c.field == _field) {
              return c;
            }
          }
        }
      }
      return null;
    };
    var _opts = $.data(_traget, "datagrid").options;
    var col = _getCol(_opts.columns);
    if (!col) {
      col = _getCol(_opts.frozenColumns);
    }
    return col;
  },
  //调整编辑器大小
  _resizeEditors:function (_traget) {
    var dc = $.data(_traget, "datagrid").dc;
    dc.view.find("div.datagrid-editable").each(function () {
      var _ad = $(this);
      var _field = _ad.parent().attr("field");
      var colOpts = $(_traget).datagrid("getColumnOption", _field);
      _ad.outerWidth(colOpts.width);
      var ed = $.data(this, "datagrid.editor");
      if (ed.actions.resize) {
        ed.actions.resize(ed.target, _ad.width());
      }
    });
  },
  //调整行高
  _setRowHeight:function(_traget, _index, _isSet) {//_traget, _index, true
    var _rows = $.data(_traget, "datagrid").data.rows;
    var _opts = $.data(_traget, "datagrid").options;
    var dc = $.data(_traget, "datagrid").dc;
    if (!dc.body1.is(":empty") && (!_opts.nowrap || _opts.autoRowHeight || _isSet)) {
      if (_index != undefined) {
        var tr1 = _opts.finder.getTr(_traget, _index, "body", 1);
        var tr2 = _opts.finder.getTr(_traget, _index, "body", 2);
        _setTrHeight(tr1, tr2);
      } else {
        var tr1 = _opts.finder.getTr(_traget, 0, "allbody", 1);
        var tr2 = _opts.finder.getTr(_traget, 0, "allbody", 2);
        _setTrHeight(tr1, tr2);
        if (_opts.showFooter) {
          var tr1 = _opts.finder.getTr(_traget, 0, "allfooter", 1);
          var tr2 = _opts.finder.getTr(_traget, 0, "allfooter", 2);
          _setTrHeight(tr1, tr2);
        }
      }
    }
    _resizeView(_traget);
    if (_opts.height == "auto") {
      var _body1Parent = dc.body1.parent();
      var _body2 = dc.body2;
      var _bodySize = _getBodySize(_body2);
      var _bodyHeight = _bodySize.height;
      if (_bodySize.width > _body2.width()) {
        _bodyHeight += 18;
      }
      _body1Parent.height(_bodyHeight);
      _body2.height(_bodyHeight);
      dc.view.height(dc.view2.height());
    }
    dc.body2.triggerHandler("scroll");
    function _setTrHeight(_tr1, _tr2) {//tr1, tr2
      for (var i = 0; i < _tr2.length; i++) {
        var tr1 = $(_tr1[i]);
        var tr2 = $(_tr2[i]);
        tr1.css("height", "");
        tr2.css("height", "");
        var _maxHeight = Math.max(tr1.height(), tr2.height());
        tr1.css("height", _maxHeight);
        tr2.css("height", _maxHeight);
      }
    };
    function _getBodySize(cc) {
      var _3d = 0;
      var _3e = 0;
      $(cc).children().each(function () {
        var c = $(this);
        if (c.is(":visible")) {
          _3e += c.outerHeight();
          if (_3d < c.outerWidth()) {
            _3d = c.outerWidth();
          }
        }
      });
      return { width: _3d, height: _3e };
    };
    function _resizeView(_traget) {
      var _opts = $.data(_traget, "datagrid").options;
      var dc = $.data(_traget, "datagrid").dc;
      var _panel = $.data(_traget, "datagrid").panel;
      var _width = _panel.width();
      var _height = _panel.height();
      var _view = dc.view;
      var _view1 = dc.view1;
      var _view2 = dc.view2;
      var _header1 = _view1.children("div.datagrid-header");
      var _header2 = _view2.children("div.datagrid-header");
      var _table1 = _header1.find("table");
      var _table2 = _header2.find("table");
      _view.width(_width);
      var _2b = _header1.children("div.datagrid-header-inner").show();
      _view1.width(_2b.find("table").width());
      if (!_opts.showHeader) {
        _2b.hide();
      }
      _view2.width(_width - _view1.outerWidth());
      _view1.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(_view1.width());
      _view2.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(_view2.width());
      var hh;
      _header1.css("height", "");
      _header2.css("height", "");
      _table1.css("height", "");
      _table2.css("height", "");
      hh = Math.max(_table1.height(), _table2.height());
      _table1.height(hh);
      _table2.height(hh);
      _header1.add(_header2).outerHeight(hh);
      if (_opts.height != "auto") {
        var _2c = _height - _view2.children("div.datagrid-header").outerHeight() - _view2.children("div.datagrid-footer").outerHeight() - _panel.children("div.datagrid-toolbar").outerHeight();
        _panel.children("div.datagrid-pager").each(function () {
          _2c -= $(this).outerHeight();
        });
        dc.body1.add(dc.body2).children("table.datagrid-btable-frozen").css({ position: "absolute", top: dc.header2.outerHeight() });
        var _2d = dc.body2.children("table.datagrid-btable-frozen").outerHeight();
        _view1.add(_view2).children("div.datagrid-body").css({ marginTop: _2d, height: (_2c - _2d) });
      }
      _view.height(_view2.height());
    }
  },
  //销毁单元格编辑器
  _rowEditDestroy:function(_traget, _index) {//_traget, _index
    var opts = $.data(_traget, "datagrid").options;
    var tr = opts.finder.getTr(_traget, _index);
    tr.children("td").each(function () {
      var cell = $(this).find("div.datagrid-editable");
      if (cell.length) {
        var ed = $.data(cell[0], "datagrid.editor");
        if (ed.actions.destroy) {
          ed.actions.destroy(ed.target);
        }
        cell.html(ed.oldHtml);
        $.removeData(cell[0], "datagrid.editor");
        cell.removeClass("datagrid-editable");
        cell.css("width", "");
      }
    });
  },
};

--------------------------------------