按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_CLICK的时候，怎样推断Ctrl SHIFT ALT键是否按下
百度 NMITEMACTIVATE 在 NM_CLICK 的处理函数中.将 NMHDR 结构强制转换成 NMITEMACTIVATE.这一步MS已经帮助我们完毕了,当中,结构体中的 uKeyFlag ...
- 判断Ctrl Shift Alt 键当前是否被按下
Control.ModifierKeys.HasFlag(Keys.Shift) 以此类推
- 转载:android——eclipse如何去除Ctrl+shift+R组合键查找到的.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. 获取宽高，清除浮动
//禁用右键菜单 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),接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两 ...
随机推荐
- tomcat错误信息解决方案【严重:StandardServer.await: create[8005]
1.独立运行的tomcat.exe没有关闭,关闭tomcat图标并结束掉tomcat进程.(我是这个原因,在开始菜单里找到tomcat,然后stop它) 2.安装了其他的软件占用了8080端口,tom ...
- php header示例代码(推荐)
<?php /*** Function: PHP header() examples (PHP) ** Desc: Some examples on how to use the header( ...
- 【仿携程JQuery日期价格表】
今天比较闲所以就花点时间又写了点东西. 相信这种价格表大家不会陌生 现在我就模仿它做一个简单版本的.效果如下 首先需要两个时间控件,我这里用的是HTML5里面的时间控件,这个没限制喜欢用什么就用什么 ...
- Modernizr.js介绍与使用
Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback.所以,我们要明白的 ...
- CentOS 6.4 安装SecurectCRT并破解
经过验证此方法使用于Centos 系列. 相关说明: 上篇发了个Linux(Ubuntu) 下 SecureCRT 7 30天循环破解在启动的时候会多输入一次确认窗口, 后来maz-1网友留言说可以用 ...
- Nginx禁止通过IP,未绑定域名访问服务器
这几天查看CNZZ统计后台看到,我的IP被两个未知的域名绑定了,为了避免被天朝和谐掉, 可以在Nginx上设置禁止通过IP访问服务器,只能通过绑定域名访问(同时设置未绑定域名返回500错误或者跳转到我 ...
- RAC 安装完成后 节点间通信不依赖于SSH
RAC 安装完成后,想修改ssh 的端口.google了一下.原文https://community.oracle.com/thread/2444594?tstart=0 原文说的是11g,10g也好 ...
- 补充：学会Twitter Bootstrap不再难
博客园的兄弟姐妹们很给力,自从这篇文章写出后,有人可能会对2.x版本升级到3.x版本的区别有些好奇和模糊.现在将官方给出的说明贴上去: 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bo ...
- 使用pdb调试python
python pdb调试 python -m pdb myscript.py #注意这会重启myscript.py,这样启动的话,代码每一行都是一个节点 也可以在程序中这么设置断点: import p ...
- Java 内存区域
Java虚拟机锁管理的内存包括以下几个运行时数据区域: 1.程序计数器: 程序计数器是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节码解释器工作时 ...