easyui datagrid shift 多选

<!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")[0].onkeydown = keyPress;
        $("body")[0].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 = 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++) {
                $(‘#datagrid‘).datagrid(‘selectRow‘, i);
            }
        }
    }
    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;
                $(‘#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 = 0;
                $(‘#datagrid‘).datagrid(‘options‘).singleSelect = true;
                break;
            case KEY.CTRL:
                inputFlags.isCtrlDown = false;
                selectIndexs.firstSelectRowIndex = 0;
                $(‘#datagrid‘).datagrid(‘options‘).singleSelect = true;
                break;
            default:
        }
    }
</script>

</body>
</html>
时间: 2024-10-13 20:03:44

easyui datagrid shift 多选的相关文章

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

之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返回的总是错误的,各种查找后,网上说是配置了idField的缘故,要么就不配这个属性,要么就配置正确的:如此想到,自己在追加行时是没有ID的,只有保存后才会将ID填上去,我便把那个属性去掉了,测试OK

Easyui datagrid 隐藏多选框 checkbox

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

EasyUI DataGrid单选如何取消选中

EasyUI DataGrid在多选时,选中某行,可以取消:而在单选时,并不能取消选中某一行. 可以通过修改源码来完成. 在其源码中找到 opts.singleSelect==true 将代码做如下修改(参考版本是jQuery EasyUI 1.4.1) 修改前: _5df(_5da,_5db); 修改后 if(tr.hasClass("datagrid-row-selected")){ _5e0(_5da,_5db); }else{ _5df(_5da,_5db); } 注意:不同版

jquery easyui datagrid 获取Checked选择行(勾选行)数据

原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSelections:取得所有选中行数据,返回元素记录的数组数据. getChecked:取得checkbox选择行的数据,返回元素记录的数组数据. getSelected跟getSelections是选中行,而且getChecked是选择行. 选中行的意思就是,我们单击到某一个行,这个时候该行的背景色为

jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据

//easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行://注意datagrid中需要配置idField属性,一般为数据的主键 $.ajax({ type: 'GET', url:url, async:false, success: function (dt) { var grid = $('#list'); grid.datagrid('reload');//刷新表格数据 grid.datagrid({ onLoadSuccess:function(){ grid.

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

(转)easyui datagrid 部分参数说明

easyui datagrid 部分参数 数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节. undefined frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动. undefined fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动. false autoRowHe

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option