dataGrid支持键盘操作

最新推荐文章于 2024-02-01 23:15:53 发布
最新推荐文章于 2024-02-01 23:15:53 发布
阅读量854 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： datagrid EasyUi EasyUi方向键 datagrid方向键 datagrid键盘监听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011798443/article/details/90717207
博主分享了一个困扰自己一周的表格操作方法。该表格支持动态combobox选择作为搜索条件，还支持用键盘TAB（shift+TAB）键切换单元格，且只需修改少量代码即可使用，旨在避免更多人卡在该问题上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 支持动态combobox选择（搜索条件）

  2. 支持键盘TAB（shift+TAB）键切换单元格

  3. 修改一点点代码就可以使用

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>dataGrid键盘监听</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>

<body>
	<h2>订单</h2>

	<div style="margin:20px 0;"></div>
		<div id="tb" style="height:auto">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
			onclick="append()">新增行</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
			onclick="removeit()">删除行</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
			onclick="accept()">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true"
			onclick="reject()">撤销</a>
	</div>
	<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:1200px;height:auto"
			data-options="
                title: '新增订单',
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				data: [
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' },
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' },
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' },
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' },
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' },
                {shopId:'',productAlias:'',shopName:'',OrderNum:'',OrderUnit:'',number:'',price:'',Unit:'',pushprice:'',remake:'' }
                ],
				onClickCell: onClickCell
			">
		<thead>
			<tr>
               
				<th data-options="field:'productAlias',width:200,align:'center',editor:{
                                    type:'combobox',
                                    options:{
                                                valueField:'shopId',
                                                textField:'productAlias',
                                                 loader : nickname,
                                                mode : 'remote',
                                                onSelect: selNickName,
                                              required:true                              
                    }}">下单名称</th>
				<th data-options="field:'shopName',width:200,align:'center',editor:{
                        type:'combobox',
                        options:{
                            valueField: 'shopId',
                            textField: 'shopName',  
                            loader : shopname,
                            mode : 'remote',                            
                            required:true
                        }}">标准名称</th>
				<th data-options="field:'OrderNum',width:80,align:'center',editor:{type:'numberbox',options:{precision:2}}">下单数量</th>
                <th data-options="field:'OrderUnit',width:80,align:'center',editor:'textbox'">下单单位</th>
				<th data-options="field:'number',width:80,align:'center',editor:{type:'numberbox',options:{precision:2}}">销售数量</th>
				<th data-options="field:'price',width:80,align:'center',editor:{type:'numberbox',options:{precision:2}}">销售单价</th>
				<th data-options="field:'Unit',width:80,align:'center',editor:'textbox'">销售单位</th>
				<th data-options="field:'pushprice',width:80,align:'center',editor:{type:'numberbox',options:{precision:2}}">采购价格</th>
                <th data-options="field:'remake',width:200,align:'center',editor:'textbox'">备注</th>

               
			</tr>
		</thead>
	</table>
 
	<script type="text/javascript">
    
		var pfields = undefined; //属性集合
var pgrid = undefined;
$.extend($.fn.datagrid.methods, {
    editCell: function(jq, param) {
        return jq.each(function() {
            
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
            var arr = new Array();
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                if (col.editor != undefined) {
                    arr.push(fields[i]);
                }
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            pfields = arr;
            $(this).datagrid('beginEdit', param.index);
            var ed = $(this).datagrid('getEditor', param);
            if (ed) {
                if ($(ed.target).hasClass('textbox-f')) {
                    $(ed.target).textbox('textbox').focus();
                } else {
                    $(ed.target).focus();
                }
            }
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
                    
                 if (col.editor == "textbox") {  //获取焦点           
                        $(".textbox-text").focus();
                        $(".textbox-text").select();
                    }
            }
        });
    }
});





var editIndex = undefined;
var pfield = "";

function endEditing() {
    if (editIndex == undefined) {
        return true
    }
    if (pgrid.datagrid('validateRow', editIndex)) {      
        pgrid.datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

//单击编辑单元格
function onClickCell(index, field) {
    if (endEditing()) {
        $(this).datagrid('selectRow', index).datagrid('editCell', {
            index: index,
            field: field
        });
        editIndex = index;
        pfield = field;
    }
    pgrid = $(this);
      
}

//新增一行
function append(){
    if (endEditing()){
        $('#dg').datagrid('appendRow',{productAlias:""});
        editIndex = $('#dg').datagrid('getRows').length-1;
        
    }
}

//保存
function accept(){
    if (endEditing()){
        $('#dg').datagrid('acceptChanges');
    }
   var rows = $("#dg").datagrid("getRows"); 
    for(var i=0;i<rows.length;i++){
        if(rows[i].shopName=="" || rows[i].shopName==null){
            return;
        }else{
        console.log("保存的数据",rows)
        }
    } 
}

//需要定义 grid editIndex pfield pfields
$(document).keydown(function(event) {

    //判断单元格编辑状态
 if (event.keyCode == 9 && (!event.shiftKey) /*||event.keyCode ==39*/ ) { //tab 和 向右方向键
        
        var e = event
        if (e.preventDefault) { //屏蔽浏览器快捷键
            e.preventDefault();
            e.stopPropagation()
        } else {
            e.returnValue = false;
            e.cancelBubble = true
        }
       pgrid.datagrid('endEdit', editIndex); //结束编辑
        pgrid.datagrid('cancelEdit', editIndex); //取消编辑
         pgrid.datagrid('refreshRow', editIndex);  //刷新
        for (var j = 0; j < pfields.length; j++) {
            if (pfield == pfields[j]) {
                if (j == pfields.length - 1) { //最后一列时换行
                    editIndex = editIndex + 1;
                    pfield = pfields[0];
                    break;
                }
                pfield = pfields[j + 1];
                break;
            }
        }
         if (editIndex == pgrid.datagrid('getData').rows.length) { //当到最后一行时 换列
            append(); //新增一行
           /* editIndex = 0;
            for (var j = 0; j < pfields.length; j++) {
                if (pfield == pfields[j]) {
                    if (j == pfields.length - 1) {
                        pfield = pfields[0];
                        break;
                    }
                    pfield = pfields[j + 1];
                    break;
                }
            }*/
        }
        setTimeout("pgrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:pfield});", 100)
    } else if (event.keyCode == 9 && event.shiftKey) { //shift tab 向左移动
        var e = event
        if (e.preventDefault) {
            e.preventDefault();
            e.stopPropagation()
        } else {
            e.returnValue = false;
            e.cancelBubble = true
        }
       pgrid.datagrid('endEdit', editIndex); //结束编辑
        pgrid.datagrid('cancelEdit', editIndex); //取消编辑
         pgrid.datagrid('refreshRow', editIndex);  //刷新
        for (var j = 0; j < pfields.length; j++) {
            if (pfield == pfields[j]) { //最前一列时换行
                if (j == 0) {
                    editIndex = editIndex - 1;
                    pfield = pfields[pfields.length - 1];
                    break;
                }
                pfield = pfields[j - 1];
                break;
            }
        }
        setTimeout("pgrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:pfield});", 100)
    }
});
//end

/**下单名称**/
var nickname = function (param, success, error) {
		var q = param.q || "";
        //console.log(param.q)
		if (q.length <= 0) {
			//console.log("q.length <= 0");
			return false;
		}
		$.ajax({
			url: "http://wechat.superms.cn/AreasComputer/BasicInformation/AliasSearch",
			type: "get",
			data: {buyerOrgId:'ON201905200011',search: q},//后台使用param这个变量接收传值的
			dataType: "json",
			success: function (res) {
				if(res.Code==200){
				console.log('数据',res); //返回的是数组对象data
				success(res.Result);//调用loader的success方法，将items添加到下拉框中,这里是难点啊，之前后台已经返回数据了，但就是不添加到下拉框
			}else{
               success(res.Result)
            }
			}
		});
	}  
    
/**标准名称**/
var shopname = function (param, success, error) {
		var q = param.q || "";
        //console.log(param.q)
		if (q.length <= 0) {
			//console.log("q.length <= 0");
			return false;
		}
		$.ajax({
			url: "http://wechat.superms.cn/AreasComputer/BasicInformation/SearchShop",
			type: "get",
			data: {buyerOrgId:'ON201905200011',search: q},//后台使用param这个变量接收传值的
			dataType: "json",
			success: function (res) {
            if(res.Code==200){
				console.log('数据',res); //返回的是数组对象data
				success(res.Result);//调用loader的success方法，将items添加到下拉框中,这里是难点啊，之前后台已经返回数据了，但就是不添加到下拉框
			}else{
                success(res.Result)
            }
            
            }
		});
	} 
 
 /**选中下单名称**/
var selNickName = function (param){
    $(this).textbox('textbox').keydown(function (event) {
        if (event.keyCode == 13) { //监听回车（选择以后在更新行数据）
            console.log("param",param); 
             pgrid.datagrid('endEdit', editIndex);
            $('#dg').datagrid('updateRow',{
                index: editIndex,
                row: {
                   shopId:param.shopId,
                   productAlias:param.productAlias,
                   shopName:param.shopName,
                   OrderNum:param.OrderNum,
                   OrderUnit:param.OrderUnit,
                   number:param.number,
                   price:param.price,
                   Unit:param.Unit,
                   pushprice:param.pushprice,
                   remake:param.remake
                }
            });
        }
    });
}    
    
  
    
/**选中标准名称**/
var selShopName = function (param){
    console.log("param",param);
         pgrid.datagrid('endEdit', editIndex);
    $('#dg').datagrid('updateRow',{
        index: editIndex,
        row: {
           shopId:param.shopId,      
           shopName:param.shopName,
           OrderNum:param.OrderNum,
           OrderUnit:param.OrderUnit,
           number:param.number,
           price:param.price,
           Unit:param.Unit,
           pushprice:param.pushprice,
           remake:param.remake
        }
    });

}    

	</script>
</body>

</html>

 这个表的操作，困了我一个星期，为了不让更多的人卡在这个问题上，所以我分享出来了。

easyui datagrid中添加上下左右按键跳到下一个单元格进行编辑，回车键跳到下一行最开始的单元格编辑的偷懒写法（仅供参考）
weixin_45901262的博客
09-19 364
【代码】easyui datagrid中添加上下左右按键跳到下一个单元格进行编辑，回车键跳到下一行最开始的单元格编辑的偷懒写法（仅供参考）
Datagrid键盘事件响应
05-03
当Datagrid获得焦点后，用户可以通过键盘进行操作。例如，按下"0-1"、"A-Z"、"Enter"、"Backspace"等键，Datagrid可以通过`KeyPress`、`KeyDown`或`KeyUp`事件来捕获这些按键。`KeyPress`事件处理程序通常用于处理...
DataGrip快捷键中文版
04-25
DataGrip快捷键中文版,官方文档格式。完全官方一致。windows系统版本。Intellij DataGrid最好用的数据库工具，只有学会了使用它的快捷键，才知道有多好用，多强大！
datagrid系列之-加入快捷键
weinichendian的博客
04-15 1677
function onBeginEdit(index,row){ var flag = false; var subj = $("#subjCode").val(); var subjCode = new Array(); subjCode.push(subj.split(",")); var subjRow= row.pkAccsubj.subjcode; for(va...
easyui datagrid 键盘上下控制选中行
weixin_30755393的博客
03-31 147
扩展datagrid的一个方法keyCtr $.extend($.fn.datagrid.methods, {keyCtr : function (jq) {return jq.each(function () {var grid = $(this);grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bin...
DataGrip的快捷键---（简陋版）
最新发布
m0_52526152的博客
02-01 686
如果你改了数据表，记得也要按‘Ctrl+enter’才能提交成功（commit），不然没提交相当于没改。#执行当前行，或执行系统当前自动圈住的/自己鼠标选中。只需要知道这一个就够了。有需要的我后面在补上去。
EasyUI_Datagrid编辑-键盘上下键选择行，锁定编辑单元格所在的列
haichao118的专栏
01-19 700
Datagrid行编辑， 通常我们是单击某一行进行编辑. 但是当我们在录入单据的时候，每次录入一行数据就要用鼠标去点击，就不方便了。 思路： 编辑的时候，使用jQuery为行里面的元素绑定一个keydown事件就好了。 一般都是textbox，或combobox，他们生成的html元素都是 <input type='text' /> 只是渲染的不同 具体可以查看DOM元素 代码： 在onBeginEdit时候，给元素绑定事件 onBeginEdit: f...
datagrid键盘操作.zip
05-31
"datagrid键盘操作.zip"这个压缩包文件显然是针对如何在EasyUI的DataGrid上实现键盘监听事件进行的示例讲解。 EasyUI是一个轻量级的JavaScript库，它基于jQuery，为开发者提供了一系列的UI组件，如DataGrid、Form、...
EasyUi datagrid键盘快捷操作指南
EasyUI框架提供的DataGrid组件，支持一系列的键盘事件监听，通过这些事件，开发者能够捕捉用户的键盘操作并作出相应的响应。以下是一些常用的键盘事件： 1. **onKeyDown**: 当用户按下键盘上的任意键时触发。 2. **...
easyui datagrid 键盘上下控制选中行示例
09-04
EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括Datagrid，它是一个强大的数据表格组件，支持各种操作如分页、排序、过滤等。在某些情况下，用户可能希望通过键盘而非鼠标来导航和选择Datagrid中的行，这可以...
easyui datagrid实现实现上下左右和回车切换单元格
05-19
能够直接使用
easyui datagrid中实现上下左右、回车切换单元格
12-14
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
EasyUI_Datagrid编辑-键盘上下键选择行(一)
生面别开
07-23 2515
Datagrid行编辑， 通常我们是单击某一行进行编辑. 但是当我们在录入单据的时候，每次录入一行数据就要用鼠标去点击，就不方便了。 思路： 编辑的时候，使用jQuery为行里面的元素绑定一个keydown事件就好了。  一般都是textbox，或combobox，他们生成的html元素都是  只是渲染的不同 具体可以查看DOM元素 代码： 在onBe
WPF DataGrid 自带默认快捷键及如何屏蔽
qq_34118521的博客
08-28 1669
WPF 的 DataGrid控件，自带有很多快捷键，详细信息可以看官方文档： https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/default-keyboard-and-mouse-behavior-in-the-datagrid-control 有时候，我们需要屏蔽某些快捷键，避免和其它自定义快捷键冲突，如把"F...
easyui datagrid 单元格 编辑时 事件 修改另一单元格
weixin_30596165的博客
03-23 722
1 //datagrid 列数据 2 $('#acc').datagrid({ 3 columns : [ [ 4 { 5 field : 'fee_lend', 6 title : '收费A', 7 width : 100, 8 editor : "numberbox" 9 }, { 10 field : '...
DataGrid添加按钮
weixin_30544657的博客
01-10 265
众所周知EasyUI的DataGrid提供了一种非常方便的数据展示方式，但是表格内并没有提供可以进行动作触发的功能，比如在表格的某行内添加一个按钮对该行数据进行相应的操作。这里介绍一种在单元格中添加按钮的方法。 先看DataGrid表代码： <table id="testgrid" title="考试列表" class="easyui-datagrid" style="width:1...
Easyui datagrid editor回车切换单元格
xdpcxq的专栏
04-15 868
{field:'wzbm',title:'物资匹配表编码',width:100,align:'center',editor : {type : 'validatebox'}},{field:'name',title:'物资匹配表名称',width:100,align:'center',editor : {type : 'validatebox'}},','info');$.messager.alert('错误', '请选择要删除的行!$.messager.alert('提示','请选择数据！
datagrid加入键盘监听事件
zhanyu1984的专栏
03-21 811
(function ($) { $.fn.ggrid = function (options) { $(this).datagrid(options); var grid = this; //键盘监听 $(window).keydown(function (event) { var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值