将以下脚本保存为 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. Adobe Flash player 10 提示:Error#2044:未处理的IOErrorEvent. text=Error#2036:加载未完成 的解决方法

    在“我的电脑”上单击鼠标右键,选择管理,在管理窗口的左栏中打开“服务和应用程序”,点击“服务”,在右边窗口中双击打开名称为“Smart Card”的服务,“常规”->“启动类型”选为自动,“登录 ...

  2. Computer Network and Internet(1)

    计算机网路相关的教材很少,TCP/IP,HTTP 协议非常多,很难找到一个合适的材料去学习. <计算机网络>自上而下方法是这个方面的经典之作. 1.what is internet? 1. ...

  3. 自动化部署教程(一) redhat安装jenkins

    自动化部署教程(一)  redhat安装jenkins 源配置: sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.or ...

  4. sql server 常见错误代码15000 - 15999含义解析

    错误 15000 - 15999 SQL Server 2008 R2 其他版本 错误 严重性 是否记录事件 说明(消息正文) 15001 16 否 对象 '%ls' 不存在或不是此操作的有效对象. ...

  5. Linux下使用NDK编译FFMPEG(libstagefright)

    这个月要负责一个项目,使用FFMPEG渲染视频,主要是Android端的,由于性能要求,要使用硬解码,但网上大多数教程都是没有libstagefright的,所以个人觉得,生成的so库文件也是没有开启 ...

  6. Java api 入门教程 之 JAVA的Random类

    在实际的项目开发过程中,经常需要产生一些随机数值,例如网站登录中的校验数字等,或者需要以一定的几率实现某种效果,例如游戏程序中的物品掉落等. 在Java API中,在java.util包中专门提供了一 ...

  7. my_strlen()

    int my_strlen(const char* S){ int i=0; while('\0'!=*(S+i)){ i++; } return i; }

  8. 根据网站所做的SEO优化整理的一份文档

    今日给合作公司讲解本公司网站SEO优化整理的一份简单文档 架构 ########################################## 1.尽量避免Javascript和flash导航. ...

  9. 10、WGET

    这个我看过比较好的  http://www.cnblogs.com/peida/archive/2013/03/18/2965369.html WGET 支持HTTP和FTP协议,断点续传功能,自动递 ...

  10. PhpSms 稳定可靠的php短信发送库

    可能是目前最聪明.优雅的PHP短信发送库了.从此不再为各种原因造成的个别短信发送失败而烦忧! phpsms的任务均衡调度功能由toplan/task-balancer提供. GitHub地址:http ...