EasyUI编辑单元格扩展方法快捷键触发，上下键选择行。单击单元格启动编辑，键盘上下键tab键shift切换编辑的单元格

时间 2020-08-22
标签 easyui 编辑单元格扩展方法快捷键触发下键选择单击启动键盘 tab shift 切换繁體版
原文原文链接
此扩展方法是在官网提供的表格编辑单元格功能上进行进一步的功能扩展，
加入了键盘快捷键的操做javascript
没启动编辑的时候，按下键盘上下键能够切换选中的行
单击单元格启动编辑单元格，
按下键盘↑键，可编辑的单元格变为当前单元格上方的单元格
按下键盘↓键，可编辑的单元格变为当前单元格下方的单元格
按下键盘Tab键，可编辑的单元格变为当前单元格右侧的单元格
按下键盘Shift键，可编辑的单元格变为当前单元格右侧的单元格
按下键盘Enter键，结束编辑，从新出发上下键选择列的功能
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--  换成您当前项目的对应路径-->
    <link rel="stylesheet" type="text/css" href="easyui/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/mobile.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    //建立数据表格的假数据data 
        var data = [
            {
                productid: "FI-SW-01",
                productname: "Koi",
                unitcost: "10",
                status: "P",
                listprice: "36.5",
                attr1: "Large",
                itemid: "EST-1"
            },
            {
                productid: "FI-SW-01",
                productname: "Koi",
                unitcost: "10",
                status: "P",
                listprice: "36.5",
                attr1: "Large",
                itemid: "EST-1"
            },
            {
                productid: "FI-SW-01",
                productname: "Koi",
                unitcost: "10",
                status: "P",
                listprice: "36.5",
                attr1: "Large",
                itemid: "EST-1"
            },]
        $.extend($.fn.datagrid.methods, {
        //编辑单元格方法  此处和官网提供的扩展方法一致，没有作修改  查阅网址[http://www.jeasyui.net/extension/202.html][1]
            editCell: function (jq, param) {
                return jq.each(function () {
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));//获取列的字段，包括冻结列
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field) {
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });

            },
            //单元格内整行数据的切换选择
            keyCtrLine:function(jq){
                var elem=jq.selector//获取当前datagrid的id
                var dg = $("#"+elem.replace("#",''));
                $(document).unbind("keydown");//取消以前定义的文档流对键盘按下的监听事件
                //只要在当前页面进行上下键的操做，就会被监听，触发列数据的选择
                $(document).bind('keydown', function (e) {
                    if(editIndex==undefined){
                        switch (e.keyCode) {
                            case 38: // up
                                var selected = dg.datagrid('getSelected');
                                if (selected) {
                                    var index = dg.datagrid('getRowIndex', selected);
                                    //判断选中的行的下标不能等于0，不等于0时才可上移
                                    if(index != 0){
                                        dg.datagrid('selectRow', index - 1);
                                    }
                                } else {
                                    var rows = dg.datagrid('getRows');
                                    dg.datagrid('selectRow', rows.length - 1);
                                }
                                break;
                            case 40: // down
                                var selected = dg.datagrid('getSelected');
                                if (selected) {
                                    var index = dg.datagrid('getRowIndex', selected);
                                    var rows = dg.datagrid('getRows');
                                    if(index < (rows.length-1)){
                                        dg.datagrid('selectRow', index + 1);
                                    }else {
                                    dg.datagrid('selectRow', 0);
                                    }
                                }else {
                                    var rows = dg.datagrid('getRows');
                                    dg.datagrid('selectRow',0);
                                    
                                }
                            break;
                        }
                    }
                });
            },
            //单元格启动编辑状态时快捷键的监听事件
           keyCtrCell: function (jq) {
                var elem=jq.selector
                var dg = $("#"+elem.replace("#",''));
                var allFields = dg.datagrid('getColumnFields');    
                $(document).unbind("keydown");
                $(document).bind('keydown', function (e) {
                    console.log(e.keyCode)
                    if(editIndex!=undefined){
                        switch (e.keyCode) {
                        case 38: // up ↑键被按下
                            //判断正在编辑的单元格是否是在第一行
                            if(editIndex != 0){
                                dg.datagrid('endEdit', editIndex);
                                //onClickCell(editIndex-1,editField)
                                dg.datagrid('editCell', { index: editIndex-1, field: editField });
                                editIndex = editIndex-1;
                                editField = editField;
                            }
                        break;
                        case 40: // down ↓键被按下
                        var rows = dg.datagrid('getRows');
                            //判断正在编辑的单元格是否是在最后第一行
                            if(editIndex < (rows.length-1)){
                                dg.datagrid('endEdit', editIndex);
                                //onClickCell(editIndex+1,editField)
                                dg.datagrid('editCell', { index: editIndex+1, field: editField });
                                editIndex = editIndex+1;
                                editField = editField;
                            }
                        break;
                        case 16://left shift键被按下
                            //判断正在编辑的单元格是否是在第一列
                            if(editField!=allFields[0]){
                                var i=allFields.indexOf(editField);
                                dg.datagrid('endEdit', editIndex);
                                dg.datagrid('editCell', { index: editIndex, field: allFields[i-1] });
                                editIndex = editIndex;
                                editField = allFields[i-1];
                               // onClickCell(editIndex,allFields[i-1]);
                            }
                        break;
                        case 9://right tab键被按下
                        //判断正在编辑的单元格是否是在第一列
                            if(editField!=allFields[allFields.length-1]){
                                var i=allFields.indexOf(editField);
                                dg.datagrid('endEdit', editIndex);
                                dg.datagrid('editCell', { index: editIndex, field: allFields[i+1] });
                                editIndex = editIndex;
                                editField = allFields[i+1];
                                //onClickCell(editIndex,allFields[i+1]);
                            }
                        break;
                        case 13://enter 回车键被按下
                        //取消当前编辑的单元格触发数据表格的行数据选择功能
                            dg.datagrid('endEdit', editIndex);
                            editIndex = undefined;
                            editField = undefined;
                            dg.datagrid("keyCtrLine")
                        break;
                        }
                    }
                });
            }
        });
        //定义全局变量，存储当前被操做的数据表格ID:keyCodeListionDG;所在行索引:editIndex;列头:editField;
        var editIndex = undefined;
        var editField = undefined;
        var keyCodeListionDG=undefined;
        function endEditing(obj) {
            if (editIndex == undefined) { return true }
            //validateRow 验证指定的行，有效时返回 true。
            if (obj.datagrid('validateRow', editIndex)) {
                obj.datagrid('endEdit', editIndex);
                editIndex = undefined;
                editField = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickCell(index, field) {
            var dg = $(this);
            if (endEditing(dg)) {
                dg.datagrid('selectRow', index).datagrid('editCell', { index: index, field: field });
                editIndex = index;
                editField = field;
                keyCodeListionDG=this.id
                $("#"+keyCodeListionDG).datagrid("keyCtrCell")
            }
        }
        $(function () {
            $("#dg").datagrid({
                data: data,
                frozenColumns: [[
                    { field: "ck", checkbox: true },
                ]],
                iconCls: 'icon-edit',
                singleSelect: true,
                onClickCell: onClickCell,
                onLoadSuccess:function(){
                //能够在表格初次加载成功的时候就调用行快捷键方法，也能够在须要的时候调用
                    $("dg").datagrid("keyCtrLine")
                }
            })
            $("#dg1").datagrid({
                data: data,
                frozenColumns: [[
                    { field: "ck", checkbox: true },
                ]],
                iconCls: 'icon-edit',
                singleSelect: true,
                onClickCell: onClickCell,
                onLoadSuccess:function(){
                    //$("dg1").datagrid("keyCtrLine")
                }
            })
        })
    </script>
</head>

<body>
    <table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80,editor:'text'">Item ID</th>
                <th data-options="field:'productid',width:100,editor:'text'">Product</th>
                <th
                    data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">
                    List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
                <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
                <th
                    data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">
                    Status</th>
            </tr>
        </thead>
    </table>
    <table id="dg1" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80,editor:'text'">Item ID</th>
                <th data-options="field:'productid',width:100,editor:'text'">Product</th>
                <th
                    data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">
                    List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
                <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
                <th
                    data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">
                    Status</th>
            </tr>
        </thead>
    </table>
</body>

</html>