hust-epi/admin-ui/yvanui/yvanui.edatagrid.js

/**
 * edatagrid - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2011 stworthy [ stworthy@gmail.com ]
 *
 * Dependencies:
 *   datagrid
 *   messager
 *
 */
(function ($) {
  var currTarget;
  $(function () {
    $(document).unbind('.edatagrid').bind('mousedown.edatagrid', function (e) {
      var p = $(e.target).closest('div.datagrid-view,div.combo-panel');
      if (p.length) {
        if (p.hasClass('datagrid-view')) {
          var dg = p.children('table');
          if (dg.length && currTarget != dg[0]) {
            _save();
          }
        }
        return;
      }
      _save();

      function _save() {
        var dg = $(currTarget);
        if (dg.length) {
          dg.edatagrid('saveRow');
          currTarget = undefined;
        }
      }
    });
  });

  function buildGrid(target) {
    var opts = $.data(target, 'edatagrid').options;
    $(target).datagrid($.extend({}, opts, {
      onDblClickCell: function (index, field) {
        if (opts.editing) {
          $(this).edatagrid('editRow', index);
          focusEditor(field);
        }
      },
      onBeginEdit: function (index, row) {
        if (shortcut) {
          var $dg = $(this);
          shortcut.processEgridEditor($dg, index, row);
        }
      },
      onClickCell: function (index, field) {
        if (opts.editing && opts.editIndex >= 0) {
          $(this).edatagrid('editRow', index);
          focusEditor(field);
        }
      },
      onAfterEdit: function (index, row) {
        opts.editIndex = -1;
        var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
        if (url) {
          $.post(url, row, function (data) {
            if (data.isError) {
              $(target).edatagrid('cancelRow', index);
              $(target).edatagrid('selectRow', index);
              $(target).edatagrid('editRow', index);
              opts.onError.call(target, index, data);
              return;
            }
            data.isNewRecord = null;
            $(target).datagrid('updateRow', {
              index: index,
              row: data
            });
            if (opts.tree) {
              var idValue = row[opts.idField || 'id'];
              var t = $(opts.tree);
              var node = t.tree('find', idValue);
              if (node) {
                node.text = row[opts.treeTextField];
                t.tree('update', node);
              } else {
                var pnode = t.tree('find', row[opts.treeParentField]);
                t.tree('append', {
                  parent: (pnode ? pnode.target : null),
                  data: [{id: idValue, text: row[opts.treeTextField]}]
                });
              }
            }
            opts.onSave.call(target, index, row);
          }, 'json');
        } else {
          opts.onSave.call(target, index, row);
        }
        if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);
      },
      onCancelEdit: function (index, row) {
        opts.editIndex = -1;
        if (row.isNewRecord) {
          $(this).datagrid('deleteRow', index);
        }
        if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);
      },
      onBeforeLoad: function (param) {
        if (opts.onBeforeLoad.call(target, param) == false) {
          return false
        }
//				$(this).datagrid('rejectChanges');
        $(this).edatagrid('cancelRow');
        if (opts.tree) {
          var node = $(opts.tree).tree('getSelected');
          param[opts.treeParentField] = node ? node.id : undefined;
        }
      }
    }));


    function focusEditor(field) {
      var editor = $(target).datagrid('getEditor', {index: opts.editIndex, field: field});
      if (editor) {
        editor.target.focus();
      } else {
        var editors = $(target).datagrid('getEditors', opts.editIndex);
        if (editors.length) {
          editors[0].target.focus();
        }
      }
    }

    if (opts.tree) {
      $(opts.tree).tree({
        url: opts.treeUrl,
        onClick: function (node) {
          $(target).datagrid('load');
        },
        onDrop: function (dest, source, point) {
          var targetId = $(this).tree('getNode', dest).id;
          $.ajax({
            url: opts.treeDndUrl,
            type: 'post',
            data: {
              id: source.id,
              targetId: targetId,
              point: point
            },
            dataType: 'json',
            success: function () {
              $(target).datagrid('load');
            }
          });
        }
      });
    }
  }

  $.fn.edatagrid = function (options, param) {
    if (typeof options == 'string') {
      var method = $.fn.edatagrid.methods[options];
      if (method) {
        return method(this, param);
      } else {
        return this.datagrid(options, param);
      }
    }

    options = options || {};
    return this.each(function () {
      var state = $.data(this, 'edatagrid');
      if (state) {
        $.extend(state.options, options);
      } else {
        $.data(this, 'edatagrid', {
          options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
        });
      }
      buildGrid(this);
    });
  };

  $.fn.edatagrid.parseOptions = function (target) {
    return $.extend({}, $.fn.datagrid.parseOptions(target), {});
  };

  $.fn.edatagrid.methods = {
    focusEditor: function (jq, field) {
      var $dg = $(jq[0]);
      var opts = $.data(jq[0], 'edatagrid').options;
      if (field) {
        var editor = $dg.datagrid('getEditor', {index: opts.editIndex, field: field});
        if (editor) {
          editor.target.focus();
          return;
        }
      }

      var editors = $dg.datagrid('getEditors', opts.editIndex);
      if (editors.length) {
        //editors[0].target.focus();
        $(editors[0].target).textbox('textbox').focus();
      }
    },
    validateRow: function (jq, index) {
      var tr = $.data(jq[0], "datagrid").options.finder.getTr(jq[0], index);
      if (!tr.hasClass("datagrid-row-editing")) {
        return true;
      }
      var vbox = tr.find(".validatebox-text");
      vbox.validatebox("validate");
      //vbox.trigger("mouseleave");
      var r = tr.find(".validatebox-invalid");
      if (r.length === 0) {
        return true;
      }
      $.yvan.msg('有' + r.length + '项校验未通过，请核对后再进行操作');
      r[0].focus();
      return false;
    },
    getEditRowIndex: function (jq) {
      var opts = $.data(jq[0], 'edatagrid').options;
      return opts.editIndex;
    },
    getEditRow: function (jq) {
      var opts = $.data(jq[0], 'edatagrid').options;
      if (opts.editIndex < 0) return;

      //获取到数据行
      var dg = $(jq[0]);
      var rows = dg.datagrid("getRows");
      var row = rows[opts.editIndex];

      //获取到编辑器
      var editors = dg.datagrid('getEditors', opts.editIndex);
      for (var i = 0; i < editors.length; i++) {
        var editor = editors [i];
        if ($.type(editor) === 'undefined') continue;
        if (!editor.hasOwnProperty('field')) continue;
        if (!editor.hasOwnProperty('type')) continue;
        if ($.inArray(editor.type, ['textbox', 'numberbox',
          'numberspinner', 'combobox', 'combotree', 'combogrid',
          'datebox', 'datetimebox', 'searchbox']) >= 0) {
          row[editor.field] = editor.target.textbox('getValue');

        } else if (editor.type === 'checkbox') {
          var cn = editor.target.is(':checked');
          if (cn === true) {
            row[editor.field] = editor.target.val();
          } else if (cn === false) {
            row[editor.field] = editor.target.attr('offval');
          } else {
            cn = editor.target.next().children()[0].className;
            if (cn === 'checkbox-inner') {
              row[editor.field] = editor.target.attr('offval');
            } else if (cn === 'checkbox-inner checkbox-checked') {
              row[editor.field] = editor.target.val();
            } else {
              console.error('未知的checkbox值');
            }
          }
        } else {
          console.error('未知的取值方法：' + editor.type, ', 字段名：' + editor.field);
        }
      }

      //填充未获取到的值
      var columns = dg.edatagrid('getColumnFields');
      for (var i = 0; i < columns.length; i++) {
        if (row.hasOwnProperty(columns[i])) continue;
        row[columns[i]] = null;
      }
      return row;
    },
    setEditRow: function (jq, data) {
      var opts = $.data(jq[0], 'edatagrid').options;
      if (opts.editIndex < 0) {
        $.yvan.msg('没有找到编辑行');
        return;
      }

      var editIndex = opts.editIndex;
      var dg = $(jq[0]);
      var rows = dg.datagrid("getRows");

      $.extend(rows[opts.editIndex], data);
      opts.editIndex = -1;

      setTimeout(function () {
        dg.edatagrid('refreshRow', editIndex);
        dg.edatagrid('editRow', editIndex);
      }, 0);

    },
    options: function (jq) {
      var opts = $.data(jq[0], 'edatagrid').options;
      return opts;
    },
    enableEditing: function (jq) {
      return jq.each(function () {
        var opts = $.data(this, 'edatagrid').options;
        opts.editing = true;
      });
    },
    disableEditing: function (jq) {
      return jq.each(function () {
        var opts = $.data(this, 'edatagrid').options;
        opts.editing = false;
      });
    },
    editRow: function (jq, index) {
      return jq.each(function () {
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;
        var editIndex = opts.editIndex;
        if (editIndex != index) {
          if (dg.edatagrid('validateRow', editIndex)) {
            if (editIndex >= 0) {
              if (opts.onBeforeSave.call(this, editIndex) == false) {
                setTimeout(function () {
                  dg.datagrid('selectRow', editIndex);
                }, 0);
                return;
              }
            }
            dg.datagrid('endEdit', editIndex);
            dg.datagrid('beginEdit', index);
            opts.editIndex = index;

            if (currTarget != this && $(currTarget).length) {
              $(currTarget).edatagrid('saveRow');
              currTarget = undefined;
            }
            if (opts.autoSave) {
              currTarget = this;
            }

            var rows = dg.datagrid('getRows');
            opts.onEdit.call(this, index, rows[index]);
          } else {
            setTimeout(function () {
              dg.datagrid('selectRow', editIndex);
            }, 0);
          }
        }
      });
    },
    addRow: function (jq, index) {
      return jq.each(function () {
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;
        if (opts.editIndex >= 0) {
          if (!dg.edatagrid('validateRow', opts.editIndex)) {
            dg.datagrid('selectRow', opts.editIndex);
            return;
          }
          if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
            setTimeout(function () {
              dg.datagrid('selectRow', opts.editIndex);
            }, 0);
            return;
          }
          dg.datagrid('endEdit', opts.editIndex);
        }
        var rows = dg.datagrid('getRows');

        function _add(index, row) {
          if (index == undefined) {
            dg.datagrid('appendRow', row);
            opts.editIndex = rows.length - 1;
          } else {
            dg.datagrid('insertRow', {index: index, row: row});
            opts.editIndex = index;
          }
        }

        if (typeof index == 'object') {
          _add(index.index, $.extend(index.row, {isNewRecord: true}))
        } else {
          _add(index, {isNewRecord: true});
        }

//				if (index == undefined){
//					dg.datagrid('appendRow', {isNewRecord:true});
//					opts.editIndex = rows.length - 1;
//				} else {
//					dg.datagrid('insertRow', {
//						index: index,
//						row: {isNewRecord:true}
//					});
//					opts.editIndex = index;
//				}

        dg.datagrid('beginEdit', opts.editIndex);
        dg.datagrid('selectRow', opts.editIndex);

        if (opts.tree) {
          var node = $(opts.tree).tree('getSelected');
          rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0);
        }

        opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]);
      });
    },
    saveRow: function (jq) {
      return jq.each(function () {
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;
        if (opts.editIndex >= 0) {
          if (dg.edatagrid('validateRow', opts.editIndex)) {
            if (opts.onBeforeSave.call(this, opts.editIndex) === false) {
              setTimeout(function () {
                dg.datagrid('selectRow', opts.editIndex);
              }, 0);
              return;
            }
            $(this).datagrid('endEdit', opts.editIndex);
          }
        }
      });
    },
    save: function (jq) {
      var dg = $(jq[0]);
      dg.edatagrid('saveRow');
      if (dg.edatagrid('getEditRowIndex') >= 0) {
        return false;
      }
      return dg.datagrid('getRows');
    },
    cancelRow: function (jq) {
      return jq.each(function () {
        var opts = $.data(this, 'edatagrid').options;
        if (opts.editIndex >= 0) {
          $(this).datagrid('cancelEdit', opts.editIndex);
        }
      });
    },
    destroyRow: function (jq, index) {
      return jq.each(function () {
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;

        var rows = [];
        if (index === undefined) {
          rows = dg.datagrid('getSelections');
        } else {
          var rowIndexes = $.isArray(index) ? index : [index];
          for (var i = 0; i < rowIndexes.length; i++) {
            var row = opts.finder.getRow(this, rowIndexes[i]);
            if (row) {
              rows.push(row);
            }
          }
        }

        for (var i = 0; i < rows.length; i++) {
          _del(rows[i]);
        }
        dg.datagrid('clearSelections');

        function _del(row) {
          var index = dg.datagrid('getRowIndex', row);
          if (index == -1) {
            return
          }

          if (index === opts.editIndex) {
            dg.datagrid('refreshRow', index);
            opts.editIndex = -1;
          }
          dg.datagrid('deleteRow', index);
          opts.onDestroy.call(dg[0], index, row);
        }
      });
    }
  };

  $.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
    editing: true,
    editIndex: -1,

    autoSave: false,	// auto save the editing row when click out of datagrid
    url: null,	// return the datagrid data
    saveUrl: null,	// return the added row
    updateUrl: null,	// return the updated row
    destroyUrl: null,	// return {success:true}

    tree: null,		// the tree selector
    treeUrl: null,	// return tree data
    treeDndUrl: null,	// to process the drag and drop operation, return {success:true}
    treeTextField: 'name',
    treeParentField: 'parentId',

    onAdd: function (index, row) {
    },
    onEdit: function (index, row) {
    },
    onBeforeSave: function (index) {
    },
    onSave: function (index, row) {
    },
    onDestroy: function (index, row) {
    },
    onError: function (index, row) {
    }
  });
})(jQuery);