为easyui datagrid 添加上下方向键移动
将以下脚本保存为 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 添加上下方向键移动的更多相关文章
- EasyUI DataGrid 添加 Footer
做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...
- EasyUI datagrid添加右键菜单项
js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), / ...
- EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...
- easyui datagrid 每条数据后添加操作按钮
easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)
前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- Easyui datagrid 怎么添加操作按钮,rowStyler
说明:本篇文章主要是展示怎么设置easyUI datagrid的格式,包括行样式和列样式,以及添加操作按钮列 开发环境 vs2012 asp.net mvc4 c# 1.效果图 3.HTML代码 & ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
随机推荐
- linux下svn命令使用大全(share)
转自:http://blog.chinaunix.net/uid-22566367-id-1965771.html 1.将文件checkout到本地目录 svn checkout path(path ...
- 0021 Java学习笔记-面向对象-包、构造器
封装 面向对象的三大特征: 封装 继承 多态 封装: 将对象的状态信息隐藏,不允许外部程序直接访问 通过该类提供的方法来访问和操作 有啥用: 隐藏类的实现细节 在方法中加入控制逻辑,限制对成员变量的不 ...
- Linux 性能优化工具 perf top
1. perf perf 是一个调查 Linux 中各种性能问题的有力工具. NAME perf - Performance analysis tools for Linux SYNOPSIS per ...
- Ubuntu14.02.2下安装JDK并配置Jetty服务器
首先第一步先取得JDK的安装文件,由于我的系统是64位的,所以安装包是jdk-7u80-linux-x64.gz 上传到unbuntu服务器下 执行tar -xvf jdk-7u80-linux-x6 ...
- Django初体验(一):自定义表单提交
注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义表单.对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CS ...
- Windows Azure 虚拟机备份
如果我们要在Windows Azure的虚拟机上进行一些“重要且高危”的操作,我们通常会想到使用快照或者备份功能.但是在Windows Azure上是没有虚拟机快照功能的,尽管我们可以对虚拟机的磁盘文 ...
- [每日菜单]lunch menu for Wednesday, February 24 2016
HIGHLIGHTS ** Boiled Broccoli原味西兰花 Steamed Turbot with Chili剁椒蒸多宝鱼 * Rye Bread黑麦面包 CHINESE CU ...
- POJ1384Piggy-Bank[完全背包]
Piggy-Bank Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 10787 Accepted: 5258 Descr ...
- struts2配置详解
01.Struts 2基本结构 使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...
- poj 3264
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 44594 Accepted: 20931 ...