如何在Grid在的文本框中实现回车后跳转到下一行文本框？

Mr.Wu

在FineUI官网Demo中，http://fineui.com/demo/#/demo/grid/grid_edit.aspx演示了使用Tab键遍历所有的文本输入框。
如果想要用回车（Enter）来遍历所有的文本输入框，不知该如何实现?
请大家指点一下！谢谢。

黑冰.cn

http://fineui.com/demo/#/demo/other/custom_postback.aspx

Mr.Wu

好的，我试下在Grid中能不能实现，谢谢了。

Mr.Wu

试了一下，还是无法使用在Grid中的模板列……

sanshi

-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

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

也可以自己修改页面的JavaScript代码：

1. <script type="text/javascript">
   
2.         var gridClientID = '<%= Grid1.ClientID %>';
   
3. 
   
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.         }
   
10. 
    
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.         }
    
22. 
    
23.         function onReady() {
    
24.             var grid = X(gridClientID);
    
25. 
    
26.             grid.on('viewready', function () {
    
27.                 registerSelectEvent();
    
28. 
    
29.                 registerEnterEvent();
    
30.             });
    
31.         }
    
32. 
    
33.         function onAjaxReady() {
    
34.             registerSelectEvent();
    
35. 
    
36.             registerEnterEvent();
    
37.         }
    
38.     </script>

复制代码

Mr.Wu

sanshi 发表于 2013-1-6 02:21
-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

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

老大威武！我把JS代码复制到aspx页面，一测试就成功了！太感谢了！大力支持FineUI！
希望有同样回车换行需求的FineUI爱好者参考此贴！！！

过往烟云

sanshi 发表于 2013-1-6 02:21
-增强grid/grid_edit.aspx示例，现在可以通过回车键遍历所有的文本框。

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

衍生上下键操作

Mr.Wu

再次遇到了一个问题：点击按钮绑定Grid数据后，无法执行前台JS焦点跳转函数，怎么办？

代码：
        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();            
         }

罗厚付

这个在实际的项目中我也会用到,为了方便快速录入,提高用户体验.收藏一下.

舞柯庶

{:soso_e179:}