datagrid行拖拽(参考网上的相关资料)

主页面 datagrid-dnd.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <!--<script src='/front/common.js' type='text/javascript' charset='utf-8'></script>-->
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src='/front/research/dataset/easyui/datagrid-dnd.js' type='text/javascript' charset='utf-8'></script>

    <script src='/front/research/dataset/easyui/datagrid-cellediting.js' type='text/javascript'
            charset='utf-8'></script>
    <!--<script>-->
    <!--var data = {"total":28,"rows":[-->
    <!--{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},-->
    <!--{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},-->
    <!--{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},-->
    <!--{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},-->
    <!--{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},-->
    <!--{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},-->
    <!--{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},-->
    <!--{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},-->
    <!--{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},-->
    <!--{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}-->
    <!--]};-->
    <!--</script>-->
</head>
<body>
<script type="text/javascript">
    $(function () {
        $("#dsMetaDataGrid").datagrid({
            url: '',
            method: 'get',
            title: '数据项',
            fit: true,
            fitColumns: false,
            singleSelect: true,
            rownumbers: true,
            toolbar: [{
                iconCls: 'icon-save',
                text: '保存',
                handler: function () {
                    saveNewSQ();
                }
            }],
            // pagination: true,
            columns: [[
                {field: 'id', title: 'ID', hidden: true},
                {field: 'dataitemCode', title: '标题'},
                {field: 'dataitemName', title: '名称'},
                {
                    field: 'itemDisplay', title: '自定义显示名称', align: "center",
                    editor: 'textbox'
                },
                {field: 'dataType', title: '数据类型', align: "center",},
                {
                    field: 'unit', title: '单位', align: "center",
                    editor: 'textbox'
                },
                {field: 'isPk', title: '是否主键', align: "center"},
                {field: 'isNullable', title: '是否可空', align: "center"},
                {
                    field: 'isDisplay', title: '是否显示', align: "center",
                    editor: {type: 'checkbox', options: {on: 'Y', off: 'N'}}
                },
                {
                    field: 'isFilter', title: '是否过滤条件', align: "center",
                    editor: {type: 'checkbox', options: {on: 'Y', off: 'N'}}
                },
                {
                    field: 'sortRecordCustom', title: '是否支持表头排序', align: "center",
                    editor: {type: 'checkbox', options: {on: 'Y', off: 'N'}}
                }
            ]],
            onLoadSuccess: function (data) {
                $(this).datagrid('enableDnd');
            }
        });

        $("#dsMetaDataGrid").datagrid('enableCellEditing').datagrid('gotoCell', {
            index: 0,
            field: "itemDisplay"
        });

    });

    function saveNewSQ() {
        var gridData = $("#dsMetaDataGrid").datagrid("getData");
        var rows = gridData["rows"];
        var b = true;
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            row.sortSequence = i;
            $.ajax({
                url: '/core/dsmetadata/',
                type: 'put',
                data: row,
                cache: false,
                async: false,
                success: function (result, status, xhr) {
                    if (!result["id"]) {
                        b = b && false;
                    }
                }
            });
        }
        if (!b) {
            $.messager.alert("错误", "保存出错!", "error");
        } else {
//            $.messager.alert("提示", "保存成功!", "info");
            window.location.reload();
        }
    }
</script>

<table id="dsMetaDataGrid"></table>
</body>
</html>
datagrid-dnd.js
(function($){
   $.extend($.fn.datagrid.defaults, {
      dropAccept: 'tr.datagrid-row',
      dragSelection: false,
      onBeforeDrag: function(row){}, // return false to deny drag
      onStartDrag: function(row){},
      onStopDrag: function(row){},
      onDragEnter: function(targetRow, sourceRow){}, // return false to deny drop
      onDragOver: function(targetRow, sourceRow){},  // return false to deny drop
      onDragLeave: function(targetRow, sourceRow){},
      onBeforeDrop: function(targetRow, sourceRow, point){},
      onDrop: function(targetRow, sourceRow, point){},   // point:'append','top','bottom'
   });
   $.extend($.fn.datagrid.methods, {
      _appendRows: function(jq, row){
         return jq.each(function(){
            var dg = $(this);
            var rows = $.isArray(row) ? row : [row];
            $.map(rows, function(row){
               dg.datagrid('appendRow', row).datagrid('enableDnd', dg.datagrid('getRows').length-1);
            });
         });
      },
      _insertRows: function(jq, param){
         return jq.each(function(){
            var dg = $(this);
            var index = param.index;
            var row = param.row;
            var rows = $.isArray(row) ? row : [row];
            $.map(rows, function(row, i){
               dg.datagrid('insertRow', {
                  index: (index+i),
                  row: row
               }).datagrid('enableDnd', index+i);
            });
         });
      },
      _getRowIndexs: function(jq, row){
         var dg = jq;
         var rows = $.isArray(row) ? row : [row];
         var indexs = $.map(rows, function(row){
            return dg.datagrid('getRowIndex', row);
         });
         return $.grep(indexs, function(index){
            if (index >= 0){return true;}
         });
      },
      _deleteRows: function(jq, indexs){
         return jq.each(function(){
            // sort desc
            indexs.sort(function(x,y){
               if (parseInt(x)>parseInt(y)){
                  return -1;
               } else {
                  return 1;
               }
            });
            for(var i=0; i<indexs.length; i++){
               $(this).datagrid('deleteRow', indexs[i]);
            }
         });
      },
      _setSelections: function(jq){
         return jq.each(function(){
            var rows = $(this).datagrid('getRows');
            for(var i=0; i<rows.length; i++){
               if (rows[i]._selected){
                  $(this).datagrid('selectRow', i);
                  rows[i]._selected = undefined;
               }
            }
         });
      },
      clearInsertingFlag: function(jq){
         return jq.each(function(){
            var opts = $(this).datagrid('options');
            if (opts.insertingIndex >= 0){
               var tr = opts.finder.getTr(this, opts.insertingIndex);
               tr.removeClass('datagrid-row-top datagrid-row-bottom');
               opts.insertingIndex = -1;
            }
         });
      }
   });

   var disabledDroppingRows = [];

   function enableDroppable(aa){
      $.map(aa, function(row){
         $(row).droppable('enable');
      });
   }

   $.extend($.fn.datagrid.methods, {
      resetDroppable: function(jq){
         return jq.each(function(){
            var c = $(this).datagrid('getPanel')[0];
            var my = [];
            var left = [];
            for(var i=0; i<disabledDroppingRows.length; i++){
               var t = disabledDroppingRows[i];
               var p = $(t).closest('div.datagrid-wrap');
               if (p.length && p[0] == c){
                  my.push(t);
               } else {
                  left.push(t);
               }
            }
            disabledDroppingRows = left;
            enableDroppable(my);
         });
      },
      enableDnd: function(jq, index){
         if (!$('#datagrid-dnd-style').length){
            $('<style id="datagrid-dnd-style">' +
               '.datagrid-row-top>td{border-top:1px solid red}' +
               '.datagrid-row-bottom>td{border-bottom:1px solid red}' +
               '</style>'
            ).appendTo('body');
         }
         return jq.each(function(){
            var target = this;
            var state = $.data(this, 'datagrid');
            var dg = $(this);
            var opts = state.options;

            var draggableOptions = {
               disabled: false,
               revert: true,
               cursor: 'pointer',
               proxy: function(source) {
                  var p = $('<div style="z-index:9999999999999"></div>').appendTo('body');
                  var draggingRow = getDraggingRow(source);
                  var rows = $.isArray(draggingRow) ? draggingRow : [draggingRow];
                  $.map(rows, function(row,i){
                     var index = dg.datagrid('getRowIndex', row);
                     var tr1 = opts.finder.getTr(target, index, 'body', 1);
                     var tr2 = opts.finder.getTr(target, index, 'body', 2);
                     tr2.clone().removeAttr('id').removeClass('droppable').appendTo(p);
                     tr1.clone().removeAttr('id').removeClass('droppable').find('td').insertBefore(p.find('tr:eq('+i+') td:first'));
                     $('<td><span class="tree-dnd-icon tree-dnd-no" style="position:static">&nbsp;</span></td>').insertBefore(p.find('tr:eq('+i+') td:first'));
                  });
                  p.find('td').css('vertical-align','middle');
                  p.hide();
                  return p;
               },
               deltaX: 15,
               deltaY: 15,
               onBeforeDrag:function(e){
                  var draggingRow = getDraggingRow(this);
                  if (opts.onBeforeDrag.call(target, draggingRow) == false){return false;}
                  if ($(e.target).parent().hasClass('datagrid-cell-check')){return false;}
                  if (e.which != 1){return false;}
               },
               onStartDrag: function() {
                  $(this).draggable('proxy').css({
                     left: -10000,
                     top: -10000
                  });
                  var draggingRow = getDraggingRow(this);
                  setValid(draggingRow, false);
                  state.draggingRow = draggingRow;
                  opts.onStartDrag.call(target, draggingRow);
               },
               onDrag: function(e) {
                  var x1=e.pageX,y1=e.pageY,x2=e.data.startX,y2=e.data.startY;
                  var d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
                  if (d>3){  // when drag a little distance, show the proxy object
                     $(this).draggable('proxy').show();
                     var tr = opts.finder.getTr(target, parseInt($(this).attr('datagrid-row-index')), 'body');
                     $.extend(e.data, {
                        startX: tr.offset().left,
                        startY: tr.offset().top,
                        offsetWidth: 0,
                        offsetHeight: 0
                     });
                  }
                  this.pageY = e.pageY;
               },
               onEndDrag: function(e){
                  var dd = $(this).data('draggable').droppables.filter(function(){
                     var dropObj = $(this);
                     if (dropObj.droppable('options').disabled){return false;}
                     if (dropObj.hasClass('datagrid-row') && !dropObj.hasClass('datagrid-row-over')){
                        return false;
                     }
                     var p2 = dropObj.offset();
                     if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth()
                           && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()){
                        return true;
                     } else {
                        return false;
                     }
                  });
                  var trs = dd.filter(function(){
                     return $(this).hasClass('datagrid-row');
                  });
                  if (trs.length){
                     dd = trs;
                  }
                  $(this).data('draggable').droppables = dd;
               },
               onStopDrag:function(){
                  enableDroppable(disabledDroppingRows);
                  disabledDroppingRows = [];
                  setValid(state.draggingRow, true);
                  opts.onStopDrag.call(target, state.draggingRow);
               }
            };
            var droppableOptions = {
               accept: opts.dropAccept,
               onDragEnter: function(e, source){
                  if ($(this).droppable('options').disabled){return;}
                  var dTarget = getDataGridTarget(this);
                  var dOpts = $(dTarget).datagrid('options');
                  var tr = dOpts.finder.getTr(dTarget, null, 'highlight');
                  var sRow = getDraggingRow(source);
                  var dRow = getRow(this);
                  if (tr.length && dRow){
                     cb();
                  }

                  function cb(){
                     if (opts.onDragEnter.call(target, dRow, sRow) == false){
                        $(dTarget).datagrid('clearInsertingFlag');
                        tr.droppable('disable');
                        tr.each(function(){
                           disabledDroppingRows.push(this);
                        });
                     }
                  }
               },
               onDragOver: function(e, source) {
                  if ($(this).droppable('options').disabled){
                     return;
                  }
                  if ($.inArray(this, disabledDroppingRows) >= 0){
                     return;
                  }
                  var dTarget = getDataGridTarget(this);
                  var dOpts = $(dTarget).datagrid('options');
                  var tr = dOpts.finder.getTr(dTarget, null, 'highlight');
                  if (tr.length){
                     if (!isValid(tr)){
                        setProxyFlag(source, false);
                        return;
                     }
                  }
                  setProxyFlag(source, true);

                  var sRow = getDraggingRow(source);
                  var dRow = getRow(this);
                  if (tr.length){
                     var pageY = source.pageY;
                     var top = tr.offset().top;
                     var bottom = tr.offset().top + tr.outerHeight();
                     $(dTarget).datagrid('clearInsertingFlag');
                     dOpts.insertingIndex = tr.attr('datagrid-row-index');
                     if (pageY > top + (bottom - top) / 2) {
                        tr.addClass('datagrid-row-bottom');
                     } else {
                        tr.addClass('datagrid-row-top');
                     }
                     if (dRow){
                        cb();
                     }
                  }

                  function cb(){
                     if (opts.onDragOver.call(target, dRow, sRow) == false){
                        setProxyFlag(source, false);
                        $(dTarget).datagrid('clearInsertingFlag');
                        tr.droppable('disable');
                        tr.each(function(){
                           disabledDroppingRows.push(this);
                        });
                     }
                  }
               },
               onDragLeave: function(e, source) {
                  if ($(this).droppable('options').disabled){
                     return;
                  }
                  setProxyFlag(source, false);
                  var dTarget = getDataGridTarget(this);
                  $(dTarget).datagrid('clearInsertingFlag');
                  var sRow = getDraggingRow(source);
                  var dRow = getRow(this);
                  if (dRow){
                     opts.onDragLeave.call(target, dRow, sRow);
                  }
               },
               onDrop: function(e, source) {
                  if ($(this).droppable('options').disabled){
                     return;
                  }
                  var sTarget = getDataGridTarget(source);
                  var dTarget = getDataGridTarget(this);
                  var dOpts = $(dTarget).datagrid('options');
                  var tr = dOpts.finder.getTr(dTarget, null, 'highlight');

                  var point = null;
                  var sRow = getDraggingRow(source);
                  var dRow = null;
                  if (tr.length){
                     if (!isValid(tr)){
                        return;
                     }
                     point = tr.hasClass('datagrid-row-top') ? 'top' : 'bottom';
                     dRow = getRow(tr);
                  }

                  $(dTarget).datagrid('clearInsertingFlag');
                  if (opts.onBeforeDrop.call(target, dRow, sRow, point) == false){
                     return;
                  }
                  insert.call(this);
                  opts.onDrop.call(target, dRow, sRow, point);

                  function insert(){
                     var destIndex = parseInt(tr.attr('datagrid-row-index'));

                     if (!point){
                        var indexs = $(sTarget).datagrid('_getRowIndexs', sRow);
                        $(dTarget).datagrid('_appendRows', sRow);
                        $(sTarget).datagrid('_deleteRows', indexs);
                        $(dTarget).datagrid('_setSelections');
                     } else if (dTarget != sTarget){
                        var index = point == 'top' ? destIndex : (destIndex+1);
                        if (index >= 0){
                           var indexs = $(sTarget).datagrid('_getRowIndexs', sRow);
                           $(dTarget).datagrid('_insertRows', {
                              index: index,
                              row: sRow
                           });
                           $(sTarget).datagrid('_deleteRows', indexs);
                           $(dTarget).datagrid('_setSelections');
                        }
                     } else {
                        var dg = $(dTarget);
                        var index = point == 'top' ? destIndex : (destIndex+1);
                        if (index >= 0){
                           var indexs = dg.datagrid('_getRowIndexs', sRow);
                           var destIndex = parseInt(tr.attr('datagrid-row-index'));
                           var index = point == 'top' ? destIndex : (destIndex+1);
                           if (index >= 0){
                              dg.datagrid('_insertRows', {
                                 index: index,
                                 row: sRow
                              });
                              for(var i=0; i<indexs.length; i++){
                                 if (indexs[i] > index){
                                    indexs[i] += indexs.length;
                                 }
                              }
                              dg.datagrid('_deleteRows', indexs);
                              dg.datagrid('_setSelections');
                           }
                        }
                     }
                  }
               }
            }

            if (index != undefined){
               var trs = opts.finder.getTr(this, index);
            } else {
               var trs = opts.finder.getTr(this, 0, 'allbody');
            }
            trs.draggable(draggableOptions);
            trs.droppable(droppableOptions);
            setDroppable(target);

            function setProxyFlag(source, allowed){
               var icon = $(source).draggable('proxy').find('span.tree-dnd-icon');
               icon.removeClass('tree-dnd-yes tree-dnd-no').addClass(allowed ? 'tree-dnd-yes' : 'tree-dnd-no');
            }
            function getRow(tr){
               if (!$(tr).hasClass('datagrid-row')){return null}
               var target = $(tr).closest('div.datagrid-view').children('table')[0];
               var opts = $(target).datagrid('options');
               return opts.finder.getRow(target, $(tr));
            }
            function getDraggingRow(tr){
               if (!$(tr).hasClass('datagrid-row')){return null}
               var target = getDataGridTarget(tr);
               var opts = $(target).datagrid('options');
               var rows = $(target).datagrid('getRows');
               for(var i=0; i<rows.length; i++){
                  rows[i]._selected = undefined;
               }
               if (opts.dragSelection){
                  if ($(tr).hasClass('datagrid-row-selected')){
                     var rows = $(target).datagrid('getSelections');
                     $.map(rows, function(row){
                        row._selected = true;
                     });
                     return rows;
                  }
               }
               var row = opts.finder.getRow(target, $(tr));
               row._selected = $(tr).hasClass('datagrid-row-selected');
               return row;
            }
            function setDroppable(target){
               getDroppableBody(target).droppable(droppableOptions).droppable('enable');
            }
            function getDataGridTarget(el){
               return $(el).closest('div.datagrid-view').children('table')[0];
            }
            function getDroppableBody(target){
               var dc = $(target).data('datagrid').dc;
               return dc.view;
            }
            function isValid(tr){
               var opts = $(tr).droppable('options');
               if (opts.disabled || opts.accept == 'no-accept'){
                  return false;
               } else {
                  return true;
               }
            }
            function setValid(rows, valid){
               var accept = valid ? opts.dropAccept : 'no-accept';
               $.map($.isArray(rows)?rows:[rows], function(row){
                  var index = $(target).datagrid('getRowIndex', row);
                  opts.finder.getTr(target, index).droppable({accept:accept});
               });
            }
         });
      }
      
   });
})(jQuery);
datagrid-cellediting.js
(function($){
    $.extend($.fn.datagrid.defaults, {
        clickToEdit: true,
        dblclickToEdit: false,
        navHandler: {
            '37': function(e){
                var opts = $(this).datagrid('options');
                return navHandler.call(this, e, opts.isRtl?'right':'left');
            },
            '39': function(e){
                var opts = $(this).datagrid('options');
                return navHandler.call(this, e, opts.isRtl?'left':'right');
            },
            '38': function(e){
                return navHandler.call(this, e, 'up');
            },
            '40': function(e){
                return navHandler.call(this, e, 'down');
            },
            '13': function(e){
                return enterHandler.call(this, e);
            },
            '27': function(e){
                return escHandler.call(this, e);
            },
            '8': function(e){
                return clearHandler.call(this, e);
            },
            '46': function(e){
                return clearHandler.call(this, e);
            },
            'keypress': function(e){
                if (e.metaKey || e.ctrlKey){
                    return;
                }
                var dg = $(this);
                var param = dg.datagrid('cell');   // current cell information
                if (!param){return;}
                var input = dg.datagrid('input', param);
                if (!input){
                    var tmp = $('<span></span>');
                    tmp.html(String.fromCharCode(e.which));
                    var c = tmp.text();
                    tmp.remove();
                    if (c){
                        dg.datagrid('editCell', {
                            index: param.index,
                            field: param.field,
                            value: c
                        });
                        return false;
                    }
                }
            }
        },
        onBeforeCellEdit: function(index, field){},
        onCellEdit: function(index, field, value){
            var input = $(this).datagrid('input', {index:index, field:field});
            if (input){
                if (value != undefined){
                    input.val(value);
                }
            }
        },
        onSelectCell: function(index, field){},
        onUnselectCell: function(index, field){}
    });

    function navHandler(e, dir){
        var dg = $(this);
        var param = dg.datagrid('cell');
        var input = dg.datagrid('input', param);
        if (!input){
            dg.datagrid('gotoCell', dir);
            return false;
        }
    }

    function enterHandler(e){
        var dg = $(this);
        var cell = dg.datagrid('cell');
        if (!cell){return;}
        var input = dg.datagrid('input', cell);
        if (input){
            if (input[0].tagName.toLowerCase() == 'textarea'){
                return;
            }
            endCellEdit(this, true);
        } else {
            dg.datagrid('editCell', cell);
        }
        return false;
    }

    function escHandler(e){
        endCellEdit(this, false);
        return false;
    }

    function clearHandler(e){
        var dg = $(this);
        var param = dg.datagrid('cell');
        if (!param){return;}
        var input = dg.datagrid('input', param);
        if (!input){
            dg.datagrid('editCell', {
                index: param.index,
                field: param.field,
                value: ''
            });
            return false;
        }
    }

    function getCurrCell(target){
        var cell = $(target).datagrid('getPanel').find('td.datagrid-row-selected');
        if (cell.length){
            return {
                index: parseInt(cell.closest('tr.datagrid-row').attr('datagrid-row-index')),
                field: cell.attr('field')
            };
        } else {
            return null;
        }
    }

    function unselectCell(target, p){
        var opts = $(target).datagrid('options');
        var cell = opts.finder.getTr(target, p.index).find('td[field="'+p.field+'"]');
        cell.removeClass('datagrid-row-selected');
        opts.onUnselectCell.call(target, p.index, p.field);
    }

    function unselectAllCells(target){
        var panel = $(target).datagrid('getPanel');
        panel.find('td.datagrid-row-selected').removeClass('datagrid-row-selected');
    }

    function selectCell(target, p){
        var opts = $(target).datagrid('options');
        if (opts.singleSelect){
            unselectAllCells(target);
        }
        var cell = opts.finder.getTr(target, p.index).find('td[field="'+p.field+'"]');
        cell.addClass('datagrid-row-selected');
        opts.onSelectCell.call(target, p.index, p.field);
    }

    function getSelectedCells(target){
        var cells = [];
        var panel = $(target).datagrid('getPanel');
        panel.find('td.datagrid-row-selected').each(function(){
            var td = $(this);
            cells.push({
                index: parseInt(td.closest('tr.datagrid-row').attr('datagrid-row-index')),
                field: td.attr('field')
            });
        });
        return cells;
    }

    function gotoCell(target, p){
        var dg = $(target);
        var opts = dg.datagrid('options');
        var panel = dg.datagrid('getPanel').focus();

        var cparam = dg.datagrid('cell');
        if (cparam){
            var input = dg.datagrid('input', cparam);
            if (input){
                input.focus();
                return;
            }
        }

        if (typeof p == 'object'){
            _go(p);
            return;
        }
        var cell = panel.find('td.datagrid-row-selected');
        if (!cell){return;}
        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));
        var field = cell.attr('field');
        var tr = cell.closest('tr.datagrid-row');
        var rowIndex = parseInt(tr.attr('datagrid-row-index'));
        var colIndex = $.inArray(field, fields);

        if (p == 'up' && rowIndex > 0){
            rowIndex--;
        } else if (p == 'down'){
            if (opts.finder.getRow(target, rowIndex+1)){
                rowIndex++;
            }
        } else if (p == 'left'){
            var i = colIndex - 1;
            while(i >= 0){
                var col = dg.datagrid('getColumnOption', fields[i]);
                if (!col.hidden){
                    colIndex = i;
                    break;
                }
                i--;
            }
        } else if (p == 'right'){
            var i = colIndex + 1;
            while(i <= fields.length-1){
                var col = dg.datagrid('getColumnOption', fields[i]);
                if (!col.hidden){
                    colIndex = i;
                    break;
                }
                i++;
            }
        }

        field = fields[colIndex];

        _go({index:rowIndex, field:field});

        function _go(p){
            dg.datagrid('scrollTo', p.index);
            unselectAllCells(target);
            selectCell(target, p);
            var td = opts.finder.getTr(target, p.index, 'body', 2).find('td[field="'+p.field+'"]');
            if (td.length){
                var body2 = dg.data('datagrid').dc.body2;
                var left = td.position().left;
                if (left < 0){
                    body2._scrollLeft(body2._scrollLeft() + left*(opts.isRtl?-1:1));
                } else if (left+td._outerWidth()>body2.width()){
                    body2._scrollLeft(body2._scrollLeft() + (left+td._outerWidth()-body2.width())*(opts.isRtl?-1:1));
                }
            }
        }
    }

    // end the current cell editing
    function endCellEdit(target, accepted){
        var dg = $(target);
        var cell = dg.datagrid('cell');
        if (cell){
            var input = dg.datagrid('input', cell);
            if (input){
                if (accepted){
                    if (dg.datagrid('validateRow', cell.index)){
                        dg.datagrid('endEdit', cell.index);
                        dg.datagrid('gotoCell', cell);
                    } else {
                        dg.datagrid('gotoCell', cell);
                        input.focus();
                        return false;
                    }
                } else {
                    dg.datagrid('cancelEdit', cell.index);
                    dg.datagrid('gotoCell', cell);
                }
            }
        }
        return true;
    }

    function editCell(target, param){
        var dg = $(target);
        var opts = dg.datagrid('options');
        var input = dg.datagrid('input', param);
        if (input){
            dg.datagrid('gotoCell', param);
            input.focus();
            return;
        }
        if (!endCellEdit(target, true)){return;}
        if (opts.onBeforeCellEdit.call(target, param.index, param.field) == false){
            return;
        }

        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));
        $.map(fields, function(field){
            var col = dg.datagrid('getColumnOption', field);
            col.editor1 = col.editor;
            if (field != param.field){
                col.editor = null;
            }
        });

        var col = dg.datagrid('getColumnOption', param.field);
        if (col.editor){
            dg.datagrid('beginEdit', param.index);
            var input = dg.datagrid('input', param);
            if (input){
                dg.datagrid('gotoCell', param);
                setTimeout(function(){
                    input.unbind('.cellediting').bind('keydown.cellediting', function(e){
                        if (e.keyCode == 13){
                            return opts.navHandler['13'].call(target, e);
                            // return false;
                        }
                    });
                    input.focus();
                }, 0);
                opts.onCellEdit.call(target, param.index, param.field, param.value);
            } else {
                dg.datagrid('cancelEdit', param.index);
                dg.datagrid('gotoCell', param);
            }
        } else {
            dg.datagrid('gotoCell', param);
        }

        $.map(fields, function(field){
            var col = dg.datagrid('getColumnOption', field);
            col.editor = col.editor1;
        });
    }

    function enableCellSelecting(target){
        var dg = $(target);
        var state = dg.data('datagrid');
        var panel = dg.datagrid('getPanel');
        var opts = state.options;
        var dc = state.dc;
        panel.attr('tabindex',1).css('outline-style','none').unbind('.cellediting').bind('keydown.cellediting', function(e){
            var h = opts.navHandler[e.keyCode];
            if (h){
                return h.call(target, e);
            }
        });
        dc.body1.add(dc.body2).unbind('.cellediting').bind('click.cellediting', function(e){
            var tr = $(e.target).closest('.datagrid-row');
            if (tr.length && tr.parent().length){
                var td = $(e.target).closest('td[field]', tr);
                if (td.length){
                    var index = parseInt(tr.attr('datagrid-row-index'));
                    var field = td.attr('field');
                    var p = {
                        index: index,
                        field: field
                    };
                    if (opts.singleSelect){
                        selectCell(target, p);
                    } else {
                        if (opts.ctrlSelect){
                            if (e.ctrlKey){
                                if (td.hasClass('datagrid-row-selected')){
                                    unselectCell(target, p);
                                } else {
                                    selectCell(target, p);
                                }
                            } else {
                                unselectAllCells(target);
                                selectCell(target, p);
                            }
                        } else {
                            if (td.hasClass('datagrid-row-selected')){
                                unselectCell(target, p);
                            } else {
                                selectCell(target, p);
                            }
                        }
                    }
                }
            }
        }).bind('mouseover.cellediting', function(e){
            var td = $(e.target).closest('td[field]');
            if (td.length){
                td.addClass('datagrid-row-over');
                td.closest('tr.datagrid-row').removeClass('datagrid-row-over');
            }
        }).bind('mouseout.cellediting', function(e){
            var td = $(e.target).closest('td[field]');
            td.removeClass('datagrid-row-over');
        });

        opts.isRtl = dg.datagrid('getPanel').css('direction').toLowerCase()=='rtl';
        opts.OldOnBeforeSelect = opts.onBeforeSelect;
        opts.onBeforeSelect = function(){
            return false;
        };
        dg.datagrid('clearSelections');
    }

    function disableCellSelecting(target){
        var dg = $(target);
        var state = dg.data('datagrid');
        var panel = dg.datagrid('getPanel');
        var opts = state.options;
        opts.onBeforeSelect = opts.OldOnBeforeSelect || opts.onBeforeSelect;
        panel.unbind('.cellediting').find('td.datagrid-row-selected').removeClass('datagrid-row-selected');
        var dc = state.dc;
        dc.body1.add(dc.body2).unbind('.cellediting');
    }

    function enableCellEditing(target){
        var dg = $(target);
        var opts = dg.datagrid('options');
        var panel = dg.datagrid('getPanel');
        panel.attr('tabindex',1).css('outline-style','none').unbind('.cellediting').bind('keydown.cellediting', function(e){
            var h = opts.navHandler[e.keyCode];
            if (h){
                return h.call(target, e);
            }
        }).bind('keypress.cellediting', function(e){
            return opts.navHandler['keypress'].call(target, e);
        });
        panel.panel('panel').unbind('.cellediting').bind('keydown.cellediting', function(e){
            e.stopPropagation();
        }).bind('keypress.cellediting', function(e){
            e.stopPropagation();
        }).bind('mouseover.cellediting', function(e){
            var td = $(e.target).closest('td[field]');
            if (td.length){
                td.addClass('datagrid-row-over');
                td.closest('tr.datagrid-row').removeClass('datagrid-row-over');
            }
        }).bind('mouseout.cellediting', function(e){
            var td = $(e.target).closest('td[field]');
            td.removeClass('datagrid-row-over');
        });

        opts.isRtl = dg.datagrid('getPanel').css('direction').toLowerCase()=='rtl';
        opts.oldOnClickCell = opts.onClickCell;
        opts.oldOnDblClickCell = opts.onDblClickCell;
        opts.onClickCell = function(index, field, value){
            if (opts.clickToEdit){
                $(this).datagrid('editCell', {index:index,field:field});
            } else {
                if (endCellEdit(this, true)){
                    $(this).datagrid('gotoCell', {
                        index: index,
                        field: field
                    });
                }
            }
            opts.oldOnClickCell.call(this, index, field, value);
        }
        if (opts.dblclickToEdit){
            opts.onDblClickCell = function(index, field, value){
                $(this).datagrid('editCell', {index:index,field:field});
                opts.oldOnDblClickCell.call(this, index, field, value);
            }
        }
        opts.OldOnBeforeSelect = opts.onBeforeSelect;
        opts.onBeforeSelect = function(){
            return false;
        };
        dg.datagrid('clearSelections')
    }

    function disableCellEditing(target){
        var dg = $(target);
        var panel = dg.datagrid('getPanel');
        var opts = dg.datagrid('options');
        opts.onClickCell = opts.oldOnClickCell || opts.onClickCell;
        opts.onDblClickCell = opts.oldOnDblClickCell || opts.onDblClickCell;
        opts.onBeforeSelect = opts.OldOnBeforeSelect || opts.onBeforeSelect;
        panel.unbind('.cellediting').find('td.datagrid-row-selected').removeClass('datagrid-row-selected');
        panel.panel('panel').unbind('.cellediting');
    }


    $.extend($.fn.datagrid.methods, {
        editCell: function(jq, param){
            return jq.each(function(){
                editCell(this, param);
            });
        },
        isEditing: function(jq, index){
            var opts = $.data(jq[0], 'datagrid').options;
            var tr = opts.finder.getTr(jq[0], index);
            return tr.length && tr.hasClass('datagrid-row-editing');
        },
        gotoCell: function(jq, param){
            return jq.each(function(){
                gotoCell(this, param);
            });
        },
        enableCellEditing: function(jq){
            return jq.each(function(){
                enableCellEditing(this);
            });
        },
        disableCellEditing: function(jq){
            return jq.each(function(){
                disableCellEditing(this);
            });
        },
        enableCellSelecting: function(jq){
            return jq.each(function(){
                enableCellSelecting(this);
            });
        },
        disableCellSelecting: function(jq){
            return jq.each(function(){
                disableCellSelecting(this);
            });
        },
        input: function(jq, param){
            if (!param){return null;}
            var ed = jq.datagrid('getEditor', param);
            if (ed){
                var t = $(ed.target);
                if (t.hasClass('textbox-f')){
                    t = t.textbox('textbox');
                }
                return t;
            } else {
                return null;
            }
        },
        cell: function(jq){       // get current cell info {index,field}
            return getCurrCell(jq[0]);
        },
        getSelectedCells: function(jq){
            return getSelectedCells(jq[0]);
        }
    });

})(jQuery);



原文地址:https://www.cnblogs.com/time-on/p/7839387.html