easyUI可编辑表格编辑器添加事件

最新推荐文章于 2021-09-12 13:34:41 发布

liupq66

最新推荐文章于 2021-09-12 13:34:41 发布

阅读量2.6k

点赞数 1

分类专栏： EasyUI 文章标签： jquery easyui 编辑器编辑器事件

本文链接：https://blog.csdn.net/liupq66/article/details/73332718

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在使用easyUI的可编辑表格时，可以为编辑器添加键盘事件处理，这样就可以直接通过键盘进行操作，大大提升编辑效率。比如说在编辑完一行时，可以按下回车就自动添加新行而不用去点击添加行按钮，在编辑到一半想取消编辑时，可以按键盘的方向键↑从而取消编辑。
为编辑器添加事件，有两种方式。
方式一：通过api获取对应的编辑器jQuery对象，为该对象添加事件
方式二：通过类选择器选中对应的编辑器，再为它添加事件（当前编辑行有一个class是其他行没有的）

需要注意的是，方式一通过api获取编辑器的jQuery对象时，api是通过editor.target来获取的，但在1.5版本的easyUI中，这是获取不到真正的编辑器对象的，通过浏览器的开发者工具查看代码发现，每个编辑器大概都是这种结构

<input type="text" class="datagrid-editable-input textbox-f" style="display: none;">
<span class="textbox textbox-invalid" style="width: 322px; height: 24px;">
    <input id="_easyui_textbox_input2" type="text"  class="textbox-text validatebox-text validatebox-invalid textbox-prompt" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 320px;" title="">
    <input type="hidden" class="textbox-value" value=""></span>

editor.target 获取到的实际上是<input type="text" class="datagrid-editable-input textbox-f" style="display: none;">而真正用于输入的对象是span标签里面第一个input，所以应该为这个input添加事件而不是editor.target。

方式一代码：

var editors = $("#keyEventGrid").datagrid("getEditors",index);
for(var i=0; i<editors.length; i++){
        var editor = editors[i];
        $(editor.target.siblings("span").children("input"))
                .on("keydown",function(e){
                        var code = e.keyCode || e.which;
                        if(code == 13){
                            addRow("keyEventGrid");//添加新行
                        }else if(code == 38){
                            cancelRow("keyEventGrid");//取消编辑行
                        }
            })
}

方式二：

$(".datagrid-row-editing .textbox-text").on("keydown",function(e){
        var code = e.keyCode || e.which;
        if(code == 13){
                addRow("keyEventGrid");
        }else if(code == 38){
                cancelRow("keyEventGrid");
        }
});

完整示例代码

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可编辑表格编辑器自定义事件</title>
        <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
        <script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
        <script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></sctipr>
        <style type="text/css">
            /**
             * 解决在编辑时看不到内容的问题，这是由于使用easyUI的bootstrap主题导致的
             */
            .datagrid-row.datagrid-row-editing.datagrid-row-selected{
                background: #F3F3F3;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <table id="keyEventGrid" style="width: 100%;height: 400px;"></table>
                    <div id="gridToolbar" class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <a class="btn btn-sm btn-primary pull-right" onclick="addRow('keyEventGrid')">增加</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(function(){
                $("#keyEventGrid").edatagrid({
                    toolbar:"#gridToolbar",
                    singleSelect:true,
                    fitColumns:true,
                    columns:[[
                        {field:"userName",title:"用户名",width:80,eidtor:{type:"textbox",options:{required:true}}},
                        {field:"age",title:"年龄",width:40,editor:"numberbox",align:"right"},
                        {field:"cell",title:"手机",width:60,editor:{type:"textbox",options:{required:true}}},
                        {field:"qq",title:"QQ",width:60,editor:"textbox"}
                    ]],
                    onAdd:function(index,row){
                        //使第一个编辑器获取焦点
                        $(".datagrid-row-editing .textbox-text")[0].focus();
                        //使用方式一或方式二注册事件
                    },
                    onSave:function(index,row){
                        //在添加新行时，onSave事件会被触发执行
                        //可以在这里添加一个保存的方法，在添加新行时，将上一行编辑的内容保存到数据库
                        //也可以直接在edatagrid添加一个saveUrl属性,这样不用写保存方法，也可以保存，缺点是保存时只能将row数据传到后台而不能添加其他数据
                        //当然，每编辑一行就保存一行的做法可能不太好，可以不处理这个保存的事件，在工具栏上添加一个保存按钮，当编辑完所有行时，点击保存按钮一次性保存
                    }
                });
            });

            function addRow(grid){
                $("#"+grid).edatagrid("addRow");
            }

            function cancelRow(grid){
                $("#"+grid).edatagrid("cancelRow");
            }
        </script>

    </body>
</html>

liupq66

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI可编辑表格编辑器添加事件

在使用easyUI的可编辑表格时，可以为编辑器添加键盘事件处理，这样就可以直接通过键盘进行操作，大大提升编辑效率。比如说在编辑完一行时，可以按下回车就自动添加新行而不用去点击添加行按钮，在编辑到一半想取消编辑时，可以按键盘的方向键↑从而取消编辑。
复制链接

扫一扫