easyui datagrid 键盘上下控制选中行示例

扩展datagrid的一个方法keyCtr


代码如下:

$.extend($.fn.datagrid.methods, {
keyCtr : function (jq) {
return jq.each(function () {
var grid = $(this);
grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
switch (e.keyCode) {
case 38: // up
var selected = grid.datagrid('getSelected');
if (selected) {
var index = grid.datagrid('getRowIndex', selected);
grid.datagrid('selectRow', index - 1);
} else {
var rows = grid.datagrid('getRows');
grid.datagrid('selectRow', rows.length - 1);
}
break;
case 40: // down
var selected = grid.datagrid('getSelected');
if (selected) {
var index = grid.datagrid('getRowIndex', selected);
grid.datagrid('selectRow', index + 1);
} else {
grid.datagrid('selectRow', 0);
}
break;
}
});
});
}
});

赞 (0)

相关推荐

  • EasyUI中datagrid在ie下reload失败解决方案

    问题 最近使用EasyUI开发后台系统,测试时发现个奇葩的问题,$('dg').datagrid('reload'); 重新加载表格数据时,ie下一点反应都没有.后来发现其实并不是没有反应,而是浏览器使用了缓存. 解决方案 网上网友总结出来的解决方案有以下几种: 1.在url后加时间戳,使第一次加载和reload中访问的url不一致,使系统无法使用IE缓存.通过测试发现,EasyUI请求时后面已经自带一串随机数_145232xxx,但是ie还是会使用缓存.后来我在请求的js中为url加上rand

  • JQueryEasyUI datagrid框架的基本使用

    JQueryEasyUI datagrid框架的基本使用

    今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引

  • jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

  • jQuery EasyUI学习教程之datagrid点击列表头排序

    jQuery EasyUI学习教程之datagrid点击列表头排序

    这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q

  • JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

    一篇关于JQueryEasyUI学习之datagrid 添加.修改.删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细 <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时,只取htm

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

  • jQuery Easyui学习之datagrid 动态添加、移除editor

    jQuery Easyui学习之datagrid 动态添加、移除editor

    使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, {

  • EasyUi datagrid 实现表格分页

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js 复制代码 代码如下: //源数据 function Async(action,args,callback){   $.ajax({ url: action ,   type:"POST",   dataType:"json",   timeout: 10000,   data: args,   success: function(data){     if(callback){   cal

  • jQuery Easyui datagrid/treegrid 清空数据

    jQuery Easyui datagrid/treegrid 清空数据

    在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者参考: 方法一: var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--) { var index = $('#filegrid').datagrid('

  • easyui datagrid 键盘上下控制选中行示例

    扩展datagrid的一个方法keyCtr 复制代码 代码如下: $.extend($.fn.datagrid.methods, { keyCtr : function (jq) { return jq.each(function () { var grid = $(this); grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) { switch (e.keyCode

  • jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

  • jquery easyui DataGrid简单示例

    一.简单示例 HTML <table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="标题" idfield="ID" checkbox="true" url="@Url.Action("ListData&qu

  • easyui 中的datagrid跨页勾选问题的实现方法

    easyui 中的datagrid跨页勾选问题的实现方法

    easyui的datagrid分页显示数据,如果有需求要求勾选多条数据且不再同一页中,easyui会保存在其他页选中的数据吗? 一开始在网上查阅有人说easyui中没有此方法,需要自己写,但其实至少在1.4版本后只要在datagrid中加入   idField:'id',给每条数据id属性,easyui就默认就会保留之前勾选的信息,如果没有id,才会出现换页后,之前勾选的信息没有的情况.所以说网络是个好东西,但你要有分辨的能力! 下面是部分代码: $weldingBomInstanceGrid=

  • JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

  • jquery easyui datagrid实现增加，修改，删除方法总结

    本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

  • jquery实现效果比较好的table选中行颜色

    jquery实现效果比较好的table选中行颜色

    jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:

  • PHP – EasyUI DataGrid 资料存的方式介绍

    PHP – EasyUI DataGrid 资料存的方式介绍

    继上篇文章 PHP – EasyUI DataGrid 资料取的方式,本篇继续讲述,如何操作 DataGrid,把资料存入资料库,并实现 MVC 架构,将资料层分离.独立运作.本篇文章主要是改良,原 EasyUI DataGrid 的范例  Build CRUD Application with jQuery EasyUI. 在官方范例中已经示范如何操作资料,但其中有个问题就是,你要操作资料的每个动作都需要一支对应的程式才能动作,像是新增.删除.修改以及取得资料,总共至少要有四支对应程式才能运作

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

随机推荐