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

来源：互联网发布：手绘卡通地图软件编辑：程序博客网时间：2024/06/05 05:37

在使用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>

阅读全文

0 0