FineUI 官方论坛

标题: 如何在Grid在的文本框中实现回车后跳转到下一行文本框？ [打印本页]
作者: Mr.Wu    时间: 2013-1-3 06:34
标题: 如何在Grid在的文本框中实现回车后跳转到下一行文本框？
在FineUI官网Demo中，http://fineui.com/demo/#/demo/grid/grid_edit.aspx演示了使用Tab键遍历所有的文本输入框。
如果想要用回车（Enter）来遍历所有的文本输入框，不知该如何实现?
请大家指点一下！谢谢。
[attach]1544[/attach]
作者: 黑冰.cn    时间: 2013-1-3 14:33
http://fineui.com/demo/#/demo/other/custom_postback.aspx
作者: Mr.Wu    时间: 2013-1-3 16:30
好的，我试下在Grid中能不能实现，谢谢了。
作者: Mr.Wu    时间: 2013-1-6 00:39
试了一下，还是无法使用在Grid中的模板列……
作者: sanshi    时间: 2013-1-6 02:21
-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

可以下载源代码自己编译。

也可以自己修改页面的JavaScript代码：
  1. <script type="text/javascript">
  2.         var gridClientID = '<%= Grid1.ClientID %>';

  4.         function registerSelectEvent() {
  5.             var grid = X(gridClientID);
  6.             grid.el.select('.x-grid-tpl input').on('click', function (evt, el) {
  7.                 el.select();
  8.             });
  9.         }

  11.         function registerEnterEvent() {
  12.             var grid = X(gridClientID);
  13.             grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
  14.                 if (evt.getKey() == evt.ENTER) {
  15.                     var nextRow = Ext.get(el).parent('.x-grid3-row').next();
  16.                     if (nextRow) {
  17.                         nextRow.query('.x-grid-tpl input')[0].select();
  18.                     }
  19.                 }
  20.             });
  21.         }

  23.         function onReady() {
  24.             var grid = X(gridClientID);

  26.             grid.on('viewready', function () {
  27.                 registerSelectEvent();

  29.                 registerEnterEvent();
  30.             });
  31.         }

  33.         function onAjaxReady() {
  34.             registerSelectEvent();

  36.             registerEnterEvent();
  37.         }
  38.     </script>
复制代码
作者: Mr.Wu    时间: 2013-1-6 09:00
sanshi 发表于 2013-1-6 02:21
-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

可以下载源代码自己编译。

老大威武！我把JS代码复制到aspx页面，一测试就成功了！太感谢了！大力支持FineUI！
希望有同样回车换行需求的FineUI爱好者参考此贴！！！
作者: 过往烟云    时间: 2013-1-9 15:07
sanshi 发表于 2013-1-6 02:21
-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

可以下载源代码自己编译。

衍生上下键操作
作者: Mr.Wu    时间: 2013-1-14 04:07
本帖最后由 Mr.Wu 于 2013-1-14 04:11 编辑

再次遇到了一个问题：点击按钮绑定Grid数据后，无法执行前台JS焦点跳转函数，怎么办？
[attach]1630[/attach]
代码：
        protected void btnSearch_click(object sender, EventArgs e)
        {
            //绑定数据
            BindGrid();
            //跳转到第一个考生录入框
            PageContext.RegisterStartupScript("registerGridSelectFirstEvent()");
        }

前台JS:         
         //设置Grid分数模板列第一行被选中
           function registerGridSelectFirstEvent() {
               var grid = X(gridClientID);
               grid.el.query('.x-grid-tpl input')[0].focus();
               grid.el.query('.x-grid-tpl input')[0].select();            
         }


作者: 罗厚付    时间: 2013-6-3 08:02
这个在实际的项目中我也会用到,为了方便快速录入,提高用户体验.收藏一下.
作者: 舞柯庶    时间: 2013-6-4 18:27
{:soso_e179:}
作者: 洋哥哥    时间: 2013-10-13 21:58
功能真的很实用



欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4