将以下脚本保存为 easyui-datagrid-moverow.js

var DatagridMoveRow = (function($){

    function DatagridMoveRow(gridTarget){
this.el = gridTarget;
this.$el = $(this.el);
this.rowIndex = -1;
this.rowsCount = this.$el.datagrid('getData').rows.length;
return this;
} DatagridMoveRow.prototype = {
getRowindex: function(){
var selectRowIndex = this.$el.datagrid('getSelectedIndex');
if(selectRowIndex == -1){
this.rowIndex = 0 ;
}else{
this.rowIndex = selectRowIndex;
}
},
moveUp: function(){ this.getRowindex(); if(this.rowIndex ==0){
return false;
} var i = --this.rowIndex;
if(i>-1){
this.$el.datagrid('selectRow',i);
}else{
this.rowIndex = 0;
} return false;
},
moveDown: function (){
this.getRowindex(); if(this.rowIndex == this.rowsCount -1 ){
return false;
}
var i = ++this.rowIndex;
this.$el.datagrid('selectRow',i);
}
} return DatagridMoveRow; })(jQuery);

定义调用方法:

var moveRow = function(target){
var options = $(target).datagrid('options'); if(options.moveRow){
var dmr = new DatagridMoveRow(target);
$(document).on('keydown.datagridrow',function(e){
if(e.keyCode == 38){ //up
dmr.moveUp();
}else if(e.keyCode == 40) {// down
dmr.moveDown();
}
});
}
}

  

  

在初始化datagrid 的 onLoadSuccess 事件中

onLoadSuccess:function(){
// 上下方向键移动
moveRow(this);
}

这样就OK啦!

为easyui datagrid 添加上下方向键移动的更多相关文章

  1. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  2. EasyUI datagrid添加右键菜单项

    js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), / ...

  3. EasyUI DataGrid 添加排序

    这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...

  4. easyui datagrid 每条数据后添加操作按钮

    easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)

    前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...

  6. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  7. Easyui datagrid 怎么添加操作按钮,rowStyler

    说明:本篇文章主要是展示怎么设置easyUI datagrid的格式,包括行样式和列样式,以及添加操作按钮列 开发环境 vs2012  asp.net mvc4 c# 1.效果图 3.HTML代码 & ...

  8. EasyUI datagrid 日期时间格式化

    EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...

  9. 让easyui datagrid支持bootstrap的tooltip

    让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...

随机推荐

  1. [译] MYSQL索引最佳实践

    近日整理文档时发现多年前的这个文档还是蛮实用的,然后在网络搜索了一下并没有相关的译文,所以决定把它翻译过来,如有不当的地方请多包涵和指正.原文地址:https://www.percona.com/fi ...

  2. Java Maps的9个常见问题

    一般来说,Map是一种由键值对组成的数据结构,其中键(key)在Map中是不能重复的: 本篇文章总结了9个最常见的问题(关于Java Map及其实现类): 出于简单考虑,在代码例子中我将不使用泛型,因 ...

  3. SQL Server连接SQL Server、SQL Server连接ORACLE 链接服务器

    夸数据库访问有很多种方式,其中部分用作接口访问,这里要介绍的是MSSQL访问另一台MSSQL,MSSQL访问ORACLE,其它暂不介绍. 1.MSSQL访问另一台MSSQL: a.展开服务器对象--& ...

  4. partproble在RHEL 6下无法更新分区信息

    在RHEL5.x版本下面,在添加磁盘分区等操作后,一直使用partproble命令使内核重新读取分区表信息,从而不用重新启动.但是最近在RHEL 6(Red Hat Enterprise Linux ...

  5. 关于UNPIVOT 操作符

    UNPIVOT 操作符说明 简而言之,UNPIVOT操作符就是取得一个行的数据集合,然后把每一行都转换成多个行数据.为了更好地理解,请看下图: 图1 从上图中,你能发现UNPOVOT操作符,取得了两行 ...

  6. 获取session、request、parmeter的方法

    package com.hanqi.action; import java.util.Map; import com.opensymphony.xwork2.ActionContext; public ...

  7. CentOS 7 网卡子接口的创建

    OS:CentOS 7 在linux上创建vlan需要加载802.1q模块: 1.检测OS是否已经加载802.1q模块 [root@controller ~]# modinfo 8021q filen ...

  8. Linux 多线程条件变量同步

    条件变量是线程同步的另一种方式,实际上,条件变量是信号量的底层实现,这也就意味着,使用条件变量可以拥有更大的自由度,同时也就需要更加小心的进行同步操作.条件变量使用的条件本身是需要使用互斥量进行保护的 ...

  9. 仿哔哩哔哩应用客户端Android版源码项目

    这是一款高仿哔哩哔哩安卓客户端,跟官方网的差不多吧,界面也几乎是一样的,应用里面也加了一些弹出广告,大家可以参考一下吧,安装测试包在源码文件那里,大家可以多多参考一下. 哔哩哔哩弹幕网是国内知名的弹幕 ...

  10. javaScript事件(五)事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...