按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现

//-------------------------------------------------------------------------------

// 当然页面文件中还需要引入的文件如下：

// easyui.css 和其它页面用到的CSS文件

// jquery-1-8-3-min.js, easyui-lang-zh_CN.js, jquery-easyui-min.js, datagrid-detailview.js,  和其它页面用到的JS文件

//-------------------------------------------------------------------------------

//     结合SHIFT,CTRL,ALT键实现单选或多选

//-------------------------------------------------------------------------------

var KEY = { SHIFT:16, CTRL:17, ALT:18, DOWN:40, RIGHT:39, UP:38, LEFT:37};

var selectIndexs = {firstSelectRowIndex:0, lastSelectRowIndex:0};

var inputFlags = {isShiftDown:false, isCtrlDown:false, isAltDown:false}

function keyPress(event){//响应键盘按下事件

    var e = event || window.event;

    var code = e.keyCode | e.which | e.charCode;

    switch(code) {

        case KEY.SHIFT:

        inputFlags.isShiftDown = true;

        $('#dataListTable').datagrid('options').singleSelect = false;

        break;

    case KEY.CTRL:

        inputFlags.isCtrlDown = true;

        $('#dataListTable').datagrid('options').singleSelect = false;

        break;

    /*

    case KEY.ALT:

        inputFlags.isAltDown = true;

        $('#dataListTable').datagrid('options').singleSelect = false;

        break;

    */

    default:

    }

}

function keyRelease(event) { //响应键盘按键放开的事件

    var e = event || window.event;

    var code = e.keyCode | e.which | e.charCode;

    switch(code) {

        case KEY.SHIFT:

        inputFlags.isShiftDown = false;

        selectIndexs.firstSelectRowIndex = 0;

        $('#dataListTable').datagrid('options').singleSelect = true;

        break;

    case KEY.CTRL:

        inputFlags.isCtrlDown = false;

        selectIndexs.firstSelectRowIndex = 0;

        $('#dataListTable').datagrid('options').singleSelect = true;

        break;

    /*

    case KEY.ALT:

        inputFlags.isAltDown = false;

        selectIndexs.firstSelectRowIndex = 0;

        $('#dataListTable').datagrid('options').singleSelect = true;

        break;

    */

    default:

    }

}

2，HTML代码,在页面增加加载数据的位置和在body中增加响应键盘事件：

<body class="body01" onkeydown="javascript:keyPress(event);" onkeyup="javascript:keyRelease(event);"> 

<!-- 数据加载存放位置 -->

<div>

<table id="dataListTable"></table>

</div>

3，在datagrid请求代码的onClickRow事件中增加操作代码，onClickRow单击事件如下：

onClickRow:function(index,row){

    //-------------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选----------------

    if(index != selectIndexs.firstSelectRowIndex && !inputFlags.isShiftDown ){

        selectIndexs.firstSelectRowIndex = index; //alert('firstSelectRowIndex, sfhit = ' + index);

    }

    if(inputFlags.isShiftDown ) {

        $('#dataListTable').datagrid('clearSelections');

        selectIndexs.lastSelectRowIndex = index;

        var tempIndex = 0;

        if(selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex ){

            tempIndex = selectIndexs.firstSelectRowIndex;

            selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex;

            selectIndexs.lastSelectRowIndex = tempIndex;

        }

        for(var i = selectIndexs.firstSelectRowIndex ; i <= selectIndexs.lastSelectRowIndex ; i++){

            $('#dataListTable').datagrid('selectRow', i);

        }

    }

    //-------------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选----------------

}

4，参考的datagrid请求代码：

;

$(function(){

    $('#dataListTable').datagrid({

        url:'xpath/jsonData01.json',

        height:(screen.height == 900 ? 660 : 950),

        nowrap:true,

        autoRowHeight:false,

        striped:true,

        singleSelect:true,

        collapsible:false,

        //checkOnSelect:true,

        //selectOnCheck:true,

        remoteSort:false,

        frozenColumns:[[

            {field:'ck',checkbox:true},

            //{title:'cel02',field:'code',width:80,sortable:true}

            ]],

        columns:[[

            {field:'cel01',title:'列名01',width:100,sortable:true},

            {field:'cel02',title:'列名02',width:100,sortable:true},

            {field:'cel03',title:'列名03',width:150,sortable:true},

            {field:'cel04',title:'列名04',width:200,sortable:true},

            {field:'cel05',title:'列名05',width:100,sortable:true},

            {field:'cel06',title:'紧急度',width:100,sortable:true,

                formatter:function(value,row,index){

                    if("紧急" == $.trim(value)){

                        return '<span class="urgent01">' + value + '</span>';

                    }else{

                        return '<span class="normal01">' + value + '</span>';

                    }

                }

            },

            {field:'cel07',title:'列名07',width:300,sortable:true},

            {field:'cel08',title:'开始时间',width:200,sortable:true,

                formatter:function(value,row,index){ return formatterDate(value);}

            },

            {field:'cel09',title:'结束时间',width:200,sortable:true,

                formatter:function(value,row,index){ return formatterDate(value);}

            },

            {field:'cel10',title:'列名10',width:100,sortable:true}

        ]],

        pagination:true,

        pageNumber:1,

        pageList:[10,20,30,40,50],

        view:detailview,

        detailFormatter:function(index,row){

            var conStyle = ' style="border:0px solid red; padding:10px 10px; background-color:#a4bac1;"';

            var dataCon = '<div id="ddv-' + index + '"' + conStyle + '></div>';

            return dataCon;

            },

        onExpandRow:function(index,row){ //展开事件

            $('#ddv-' + index).panel({

                cache:false,

                border:false,

                href:'detailPage.htm', //展开行的子页面,如果是完整页面也仅取body元素之内的内容

                onLoad:function(){

                    //调整展开行高度

                    $('#dataListTable').datagrid('fixDetailRowHeight',index);

                }

            });

        },

        onSelect:function(index,data){

            //do nothing

        },

        rowStyler:function(index,row){

            /*

            if( index < 4 && (index % 2) == 0){

                return 'background:#CCFF99';

            }

            */

        },

        onClickRow:function(index,row){    //单击行事件

            //---------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选------------

            if(index != selectIndexs.firstSelectRowIndex && !inputFlags.isShiftDown ){

                selectIndexs.firstSelectRowIndex = index; //alert('firstSelectRowIndex, sfhit = ' + index);

            }

            if(inputFlags.isShiftDown ) {

                $('#dataListTable').datagrid('clearSelections');

                selectIndexs.lastSelectRowIndex = index;

                var tempIndex = 0;

                if(selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex ){

                    tempIndex = selectIndexs.firstSelectRowIndex;

                    selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex;

                    selectIndexs.lastSelectRowIndex = tempIndex;

                }

                for(var i = selectIndexs.firstSelectRowIndex ; i <= selectIndexs.lastSelectRowIndex ; i++){

                    $('#dataListTable').datagrid('selectRow', i);

                }

            }

            //---------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选------------

        },

        onLoadSuccess:function(data){

            $('#dataListTable').datagrid('clearSelections');

        },

        onLoadError:function(){

            //alert('error....');

        }

    });     

    //other variables or event initialize here

    //-------------------------------------------

    var p = $('#dataListTable').datagrid('getPager'); //个性化设置分页对象

    $(p).pagination({

        pageNumber:1,

        pageSize:10,

        pageList:[10,20,30,40],

        beforePageText:'第',

        afterPageText:' 页，共{pages}页',

        displayMsg:'当前{from} - {to}条, 共{total}条'

    });

    //-------------------------------------------

});

function formatterDate(objDate){ //格式化日期函数

     var strDate = objDate.year;

    strDate += '-' + objDate.month;

    strDate += '-' + objDate.date;

    strDate += ' ' + objDate.hours;

    strDate += ':' + objDate.minutes;

    strDate += ':' + objDate.seconds;

    return strDate;

}

结果是：

（1），单选，直接单击某行即可单选某条记录；
（2），多选，按住键盘CTRL 或 SHIFT 键开可进行多选，
（A）按CTRL键不放，在easyui的datagrid上单击某行，即可选中单击的行，再次单击取消选中；
（B）在easyui的datagrid上单击某行，按SHIFT键不放，再单击另一行，则首尾两行之间记录全部选中；

按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现的更多相关文章

CListCtrl在处理NM&lowbar;CLICK的时候，怎样推断Ctrl SHIFT ALT键是否按下
百度 NMITEMACTIVATE 在 NM_CLICK 的处理函数中.将 NMHDR 结构强制转换成 NMITEMACTIVATE.这一步MS已经帮助我们完毕了,当中,结构体中的 uKeyFlag ...
判断Ctrl Shift Alt 键当前是否被按下
Control.ModifierKeys.HasFlag(Keys.Shift) 以此类推
转载&colon;android——eclipse如何去除Ctrl+shift+R组合键查找到的&period;class文件
转载自:http://blog.csdn.net/virgilli/article/details/22500409 AS里面的build文件下一堆的.class 文件,当你要定位资源文件的时候,有些 ...
delphi hook alt+F4 ctrl+delete+alt win键等
unit uHook; interface uses Windows, Messages, SysUtils, Variants, Classes, Controls, Forms, Dialogs ...
关于win10输入法ctrl+shift+f和idea组合键冲突的解决办法。
先Ctrl+F,按住Ctrl,再按Shift+F. 因为win10的输入法热键无法关闭(在后期的版本中好像可以了,不过没更新),在IEDA中ctrl+shift+f组合键没法使用,可以按如下按键组合使 ...
Ctrl+Shift+F12切换最大化编辑器
常用快捷键(keymaps:Default情况下) Esc键编辑器(从工具窗口) F1帮助千万别按,很卡! F2(Shift+F2)下/上高亮错误或警告快速定位 F3向下查找关键字出现位置 F4查找变 ...
JavaScript 中禁止用户右键菜单，复制，选取，Ctrl，Alt，Shift&period; 获取宽高，清除浮动
//禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...
Alt+Shift+R组合键，用来在一个java文件中批量的重命名变量。
myeclipse和eclipse集成编译软件,都提供了一个快捷键用来批量重命名变量:Alt+Shift+R组合键,用来在一个java文件中批量的重命名变量.扩展知识:如果想要重命名文件名,又不想手动 ...
Delphi 提示在Delphi的IDE中，按Ctrl+Shift+G键可以为一个接口生成一个新的GUID。
对于Object Pascal语言来说,最近一段时间最有意义的改进就是从Delphi3开始支持接口(interface),接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两 ...

随机推荐

【翻译】ASP&period;NET MVC 5属性路由（转）
转载链接:http://www.cnblogs.com/thestartdream/p/4246533.html 原文链接:http://blogs.msdn.com/b/webdev/archive ...
spring之依赖注入
java 27 - 3 反射之通过反射获取构造方法并使用
类 Constructor<T>:提供关于类的单个构造方法的信息以及对它的访问权限. 通过反射的方法获取构造方法并使用 ps:先忽略泛型 A.1:获取构造方法的数组: public Co ...
ZOJ 1037 Gridland
原题链接题目大意:给出一个格子图,求走完所有节点的最短路径距离. 解法:简单啊,如果都是奇数,可以走一次斜边,其他情况就是长*宽. 参考代码: #include <stdio.h> in ...
c&num;实现每隔规定时间自动执行程序代码
c#实现每隔规定时间自动执行程序代码在一般的项目中我们很少用到c#实现每隔规定时间自动执行程序代码,但是如果你经历的项目多,或者应用程序做的比较多的话,c#实现每隔规定时间自动执行程序代码就用的比 ...
iOS开发中懒加载的使用和限制
1.在开发过程中很多时候,很多控件和对象需要alloc为了,提高开发效率使得懒加载得以产生. 2.下边用代码解释: - (NSMutableArray *)newsArr{ if (!_newsArr ...
js完美继承代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
点击grid单元格弹出新窗口
实现功能:点击指定单元格后会弹出新窗口,并且最后一行合计不会触发单元格触发函数 <script type="text/javascript"> grid.on('cel ...
手把手带你走进MVP +Dagger2 + DataBinding+ Rxjava+Retrofit 的世界
0.0 Android开发现在的变化用一个词来形容就是 :翻天覆地越来越多的项目使用了MVP + Rxjava+Retrofit +Dagger2 + DataBinding等等东西.. 但是这些东 ...
webpack的css样式文件加载依赖
1.需要两个依赖包: npm i style-loader css-loader -D