<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>IndexV6</title>

    <link href="/Plugs/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />

    <link href="/Plugs/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />

    <script src="/Plugs/jquery-easyui-1.4.3/jquery.min-1.11.3.js"></script>

    <script src="/Plugs/jquery-easyui-1.4.3/jquery.easyui.min-1.4.3.js"></script>

    <script src="/Plugs/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN-1.0.js"></script>

    <script src="/Plugs/jquery-easyui-1.4.3/pengbg/pengbgEasyuiControl.js"></script>

</head>

<body>

<h2>IndexV6</h2>

<table class="easyui-datagrid" title="" style="width: 408px"

       data-options="url:'/Test/Data',onClickRow:fun,

             singleSelect: true,

            " id="datagrid">

    <thead>

        <tr>

            <th data-options="field:'ck',checkbox: 'true'"></th>

            <th data-options="field:'UpdateUser'"></th>

        </tr>

    </thead>

</table>

<script>

    $(document).ready(function () {

        $("body")[].onkeydown = keyPress;

        $("body")[].onkeyup = keyRelease;

    });

    function fun(index, row) {

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

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

        }

        if (inputFlags.isShiftDown) {

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

            selectIndexs.lastSelectRowIndex = index;

            var tempIndex = ;

            if (selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex) {

                tempIndex = selectIndexs.firstSelectRowIndex;

                selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex;

                selectIndexs.lastSelectRowIndex = tempIndex;

            }

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

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

            }

        }

    }

    var KEY = { SHIFT: , CTRL: , ALT: , DOWN: , RIGHT: , UP: , LEFT:  };

    var selectIndexs = { firstSelectRowIndex: , lastSelectRowIndex:  };

    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;

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

                break;

            case KEY.CTRL:

                inputFlags.isCtrlDown = true;

                $('#datagrid').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 = ;

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

                break;

            case KEY.CTRL:

                inputFlags.isCtrlDown = false;

                selectIndexs.firstSelectRowIndex = ;

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

                break;

            default:

        }

    }

</script>

</body>

</html>

easyui datagrid shift 多选的更多相关文章

  1. EasyUI datagrid默认勾选checkbox时注意事项

    在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...

  2. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  3. easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决

    系统业务需要,导入的列表数据默认全部选中,且不可取消选中行.全部店铺优惠券发放过后导入的数据全部清空.如图所示: 一.初始化页面默认全部选中“selectAll”,全部不选中“unselectAll” ...

  4. easyui datagrid去掉全选按钮

    第一步: F12查看元素,选中全选按钮,把全选按钮的class里边加上display:none属性.找到对应的class,即.datagrid-header-check. 第二步: 在加载 表格的时候 ...

  5. EasyUI DataGrid Checkbox 多选 获取选中行中的内容

    <table id='grid' class='easyui-datagrid' style='width:950px;height:405px' url='Ajax-index.php?mod ...

  6. EasyUI DataGrid 根据ID选中行（转载）

      转载来源: https://blog.csdn.net/chq00788/article/details/51505519 function selectRows(){ //获取需要选中的记录ID ...

  7. easyui datagrid 去掉 全选checkbox

    在加载 表格的时候添加事件:onLoadSuccess 在事件中写入下面句,用空代替原有HTML 达到取消效果. $(".datagrid-header-check").html( ...

  8. Easyui datagrid 隐藏多选框 checkbox

    在加载 表格的时候添加事件:onLoadSuccess 在事件中写入下面句,用空代替原有HTML 达到取消效果. $(".datagrid-header-check").html( ...

  9. EasyUI DataGrid单选如何取消选中

    EasyUI DataGrid在多选时,选中某行,可以取消:而在单选时,并不能取消选中某一行. 可以通过修改源码来完成. 在其源码中找到 opts.singleSelect==true 将代码做如下修 ...

随机推荐

  1. WINDOWS7,8和os x yosemite 10.10.1懒人版双系统安装教程

    安装过程 磁盘划分 懒人版如果不是整盘单系统或者双硬盘双系统安装我们需要在当前系统磁盘划分两块磁盘空间,一个用来做安装盘,一个作为系统盘. 我这里是单硬盘,想从最后一个盘符压缩出80GB的空来安装黑苹 ...

  2. linux并发连接数查看

    1.查看Webserver(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) pri ...

  3. epoll()无论涉及wait队列分析

    事件1. epfd-file->eventpoll->wq: struct eventpoll {     ...     wait_queue_head_t wq;     //用于ep ...

  4. SQL入门学习3-数据更新

    4-1 数据的插入(INSERT语句的使用方法) 使用INSERT语句可以向表中插入数据(行).原则上,INSERT语句背刺执行一行数据插入. CREATE TABLE 和INSERT 语句,都可以设 ...

  5. 使用Eclipse设定Android开发环境

    使用Eclipse设定Android开发环境 花了大概几天的时间最终搭建好了开发Android的环境了! 我是使用Eclipse +ADT顺利地搭建Android开发环境的. 如今Google以及An ...

  6. [Visual Studio]透过Visual Studio 2012的选择性贴上将XML与JSON直接转成对应的类别

    原文:[Visual Studio]透过Visual Studio 2012的选择性贴上将XML与JSON直接转成对应的类别 在开发专案时若碰到要串接服务或是他人的API,常常避免不了都要面对XML或 ...

  7. Linux NetHogs监控工具介绍（转）

    NetHogs介绍 NetHogs是一款开源.免费的,终端下的网络流量监控工具,它可监控Linux的进程或应用程序的网络流量.NetHogs只能实时监控进程的网络带宽占用情况.NetHogs支持IPv ...

  8. uva 592 Island of Logic （收索）

      Island of Logic  The Island of Logic has three kinds of inhabitants: divine beings that always tel ...

  9. 惊人go语言（image网站开发）

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 有过python web开发经验的朋友.相信对它的便利性肯定印象很深刻. 事实上利用go语言对 ...

  10. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...