`

easyUI 中datagrid 上下左右移动编辑器

阅读更多
easyUI 中datagrid 上下左右移动编辑器

[color=darkred]
//键盘控制
$.extend($.fn.datagrid.methods, {
    keyCtr : function (jq) {
        return jq.each(function () {
            var grid = $(this);
            grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
            	if(SampleInfo.editorIndex == -1){
            		return;
            	}
            	var keyCode = e.keyCode;
            	//当键盘按下键为左右键时,把网格键盘按下的事件默认动作去除,要不然会影响按左右键选择文本框值
            	if( keyCode == 37 || keyCode == 39){
            		e.preventDefault();
                	e.stopPropagation();
            	}
            	rows = $dg.datagrid('getRows');
            	if(SampleInfo.editorField == ''){
            		SampleInfo.editorField = 'formalStyleNo';
            	}
                switch (keyCode) {
                case 38: // up	
                	var editors = grid.datagrid('getEditors',SampleInfo.editorIndex);
                    if (editors) {
                    	if(rows.length>SampleInfo.editorIndex && SampleInfo.editorIndex>=1){
                    		SampleInfo.editorIndex--;
                    		
                    	}else{
                    		SampleInfo.editorIndex = rows.length-1;
                    	}
                    	grid.datagrid('beginEdit',SampleInfo.editorIndex);
                    	//单元格聚焦
                    	var ed = grid.datagrid('getEditor',{index:SampleInfo.editorIndex,
                    										field:SampleInfo.editorField});
                    	if(ed != null && ed != ""){
                       	 $(ed.target).focus();
                       	 $(ed.target).select(); 
                    	}
                    } else {
                    }
                    break;
                case 40: // down
                	var editors = grid.datagrid('getEditors',SampleInfo.editorIndex);
                    if (editors) {
                    	if(rows.length-1>SampleInfo.editorIndex){
                    		SampleInfo.editorIndex++;
                    		
                    	}else{
                    		SampleInfo.editorIndex = 0;
                    	}
                    	grid.datagrid('beginEdit',SampleInfo.editorIndex);
                    	//单元格聚焦
                    	var ed = grid.datagrid('getEditor',{index:SampleInfo.editorIndex,
                    										field:SampleInfo.editorField});
                    	if(ed != null && ed != ""){
                       	 $(ed.target).focus();
                       	 $(ed.target).select(); 
                    	}
                    }
                    break;
                case 37: // left
                	var editors = grid.datagrid('getEditors',SampleInfo.editorIndex);
                    if (editors) {
                    	if(rows.length-1>SampleInfo.editorIndex){
                    		SampleInfo.editorIndex++;
                    		
                    	}else{
                    		SampleInfo.editorIndex = 0;
                    	}
                    	grid.datagrid('beginEdit',SampleInfo.editorIndex);
                    	//单元格聚焦
                    	if(SampleInfo.editorField == 'formalStyleNo'){
                    		SampleInfo.editorField = 'formalCategoryNo';
                    	}else if(SampleInfo.editorField == 'formalColorNo'){
                    		SampleInfo.editorField = 'formalStyleNo';
                    	}else if(SampleInfo.editorField == 'formalCategoryNo'){
                    		SampleInfo.editorField = 'formalColorNo';
                    	}
                    	var ed = grid.datagrid('getEditor',{index:SampleInfo.editorIndex,
                    										field:SampleInfo.editorField});
                    	if(ed != null && ed != ""){
                       	 $(ed.target).focus();
                       	 $(ed.target).select(); 
                    	}
                    }
                    break;
                case 39: // right
                	var editors = grid.datagrid('getEditors',SampleInfo.editorIndex);
                    if (editors) {
                    	if(rows.length-1>SampleInfo.editorIndex){
                    		SampleInfo.editorIndex++;
                    		
                    	}else{
                    		SampleInfo.editorIndex = 0;
                    	}
                    	grid.datagrid('beginEdit',SampleInfo.editorIndex);
                    	//单元格聚焦
                    	if(SampleInfo.editorField == 'formalStyleNo'){
                    		SampleInfo.editorField = 'formalCategoryNo';
                    	}else if(SampleInfo.editorField == 'formalColorNo'){
                    		SampleInfo.editorField = 'formalStyleNo';
                    	}else if(SampleInfo.editorField == 'formalCategoryNo'){
                    		SampleInfo.editorField = 'formalColorNo';
                    	}
                    	var ed = grid.datagrid('getEditor',{index:SampleInfo.editorIndex,
                    										field:SampleInfo.editorField});
                    	if(ed != null && ed != ""){
                       	 $(ed.target).focus();
                       	 $(ed.target).select(); 
                    	}
                    }
                    break;
                case 13: // enter键
                	removeDataGridCommon(itemStyle.dataGridItemStyle);
        			itemStyle.dealItemStyleProc(); 
                    break;
                case 113: //F2保存键
                	parent.operaItemStyleInsert();
                	var c = parent.billOrder.ItemStylePanel ;
                	c.panel('close',true);

                }
            });
           
        });
    }
});
[/color]

分享到:
评论

相关推荐

    easyui帮助手册datagrid

    21. **editors**:定义行编辑时的编辑器,用于实现单元格级别的编辑功能。 22. **view**:数据表格的视图配置,可以定制显示效果。 EasyUI Datagrid 的这些配置选项提供了强大的灵活性,可以满足各种复杂的数据...

    datagrid键盘操作.zip

    "方向键.txt"可能是一个文本文件,详细解释了如何使用上下左右四个方向键来控制DataGrid。通常,向上键可以用来选择上一行,向下键选择下一行,左键和右键可能用于在多选模式下切换选择状态或在编辑模式下移动光标。...

    Datagrid键盘事件响应

    由于单元格不是一个直接可用的类,所以不能直接在VS.NET的代码编辑器中找到对应的KeyDown、KeyPress、KeyUp事件。实际上,单元格的键盘事件是通过Datagrid的事件和数据绑定机制间接处理的。如果你需要自定义单元格的...

    easyUI的一个实例,直接导入myeclipse中使用

    它集成了多种工具,如代码编辑器、调试器、版本控制等,为开发者提供了一站式的开发平台。将 EasyUI 实例导入 MyEclipse 可以方便地进行代码编写、测试和调试。 在这个"easyui Demo"中,我们可以期待以下知识点: ...

    easyui行编辑实例(仅前台Html代码,无后台代码)

    3. 行编辑模式:在EasyUI中,可以设置datagrid为行编辑模式,通过添加`editable`属性和相关的编辑器配置实现。在本实例中,用户可以通过点击某行的编辑按钮来激活编辑状态,对数据进行修改。 4. HTML代码:这个实例...

    EasyUi中文帮助文档

    3. 数据绑定:EasyUi与jQuery插件DataGrid相结合,可以方便地实现表格数据的动态加载、编辑和保存。 4. 强大的表单处理:支持各种表单控件,如文本输入框、选择框、日期选择器等,并提供验证功能,确保数据的完整性...

    jQuery EasyUI 1.4.5 版 API 中文.pdf

    4. **1.10.4 CellEditing in DataGrid(单元格编辑表格)**:针对数据表格中的单元格提供了编辑功能。 5. **1.10.5 ColumnsExtension for DataGrid(列扩展表格)**:增加了对数据表格列的扩展功能。 6. **1.10.6 ...

    easyui源代码 jquery-easyui-1.2.2

    9. **响应式布局**:虽然 `jquery-easyui-1.2.2` 版本相对较旧,但EasyUI的后续版本已经考虑到了移动设备的支持,提供了响应式布局,使应用程序能在不同屏幕尺寸上良好显示。 通过深入研究 `src` 中的源代码,...

    jQuery_EasyUI

    - **概念**:介绍EasyUI中各种布局管理器的使用方法。 - **组件**:包括Panel、Tabs、Accordion、Layout等。 ##### 知识点3:Menu and button 菜单和按钮 - **概念**:介绍EasyUI中菜单和按钮的使用方法。 - **组件...

    jQuery EasyUI 1.4.5 版 API 中文版 (真实可用)

    在jQuery EasyUI 1.4.5中,DataGrid是最常用的数据展示组件之一。它支持分页、排序、过滤和编辑功能,可以与后台数据库无缝对接,实现数据的动态加载。DataGrid的API包括配置项设置(如columns定义列,pagination...

    easyui开发者文档中文版

    1. **jQuery 基础**:EasyUI 建立在 jQuery 库之上,因此熟悉 jQuery 的基本操作和选择器是使用 EasyUI 的前提。理解如何选择、操作DOM元素以及处理事件是至关重要的。 2. **组件库**:EasyUI 提供了众多组件,如...

    easyui--6.完整案列演示

    例如,datagrid组件可以轻松实现分页、排序、过滤和编辑功能。 3. **主题支持**:EasyUI 提供多种预设主题,允许开发者根据项目需求快速定制界面风格,同时支持自定义主题,以满足个性化需求。 4. **易用性**:...

    jquery-easyui-1.2.6

    1. `easyloader.js`:EasyUI的加载器,负责按需加载相关的组件和资源,优化页面性能,避免一次性加载过多文件导致页面加载慢。 2. `licence_gpl.txt`和`license_commercial.txt`:分别代表GPL和商业许可协议,明确了...

    Easyui未混淆源码1.3

    1. **jQuery Datagrid**: Datagrid 是 Easyui 中非常重要的一个组件,用于展示结构化的数据。它支持分页、排序、过滤、编辑等功能,提供了多种操作列和行的API。在未混淆的源码中,你可以看到如何构建数据模型、配置...

    EasyUI后台管理系统模板和H5手机模板

    3. **组件库**:EasyUI 提供了大量的UI组件,如数据网格(datagrid)、下拉选择框(combobox)、日期选择器(datebox)、树形控件(tree)、分页(pagination)等,这些组件可以帮助开发者快速实现常见的交互功能。...

    easyui模板.rar

    - 表格(datagrid):可实现分页、排序、过滤、编辑等功能,适用于展示大量结构化数据。 - 对话框(dialog):提供弹出式窗口,常用于表单填写、信息提示等场景。 - 树形控件(tree):用于展示层次结构的数据,...

    jqueryeasyui中文API

    - **Column参数**: 配置Datagrid中列的属性,如显示的字段名、宽度、编辑器类型等。 - **事件**: Datagrid的事件,如单元格编辑完成、选择行、排序完成等事件。 - **方法**: 提供了编程接口来动态操作Datagrid,...

    Easyui.zip

    例如,数据网格(datagrid)用于展示大量数据,可以进行排序、筛选和编辑;窗口(window)可以创建弹出式对话框;表单(form)支持数据验证和提交等。 3. **主题和样式**:Easyui 提供了多种预设主题,可以通过修改...

    jQuery EasyUI 1.4.2 版 API 中文版

    7. **插件扩展**:除了核心组件,jQuery EasyUI 社区还提供了许多第三方插件,如图表(chart)、富文本编辑器(editor)等,这些插件进一步扩展了框架的功能。 8. **兼容性**:EasyUI 考虑到了浏览器的兼容性问题,...

    easyUI 各个功能

    8. **插件扩展**:EasyUI 社区提供了许多第三方插件,如拖放排序、树形选择器、富文本编辑器等,进一步增强了框架的功能。 9. **主题定制**:EasyUI 支持多种预设主题,同时也允许开发者自定义样式,满足不同项目的...

Global site tag (gtag.js) - Google Analytics