easyUI——datagrid行编辑

一.双击单元格进入编辑
释:当用户双击某个单元格时,先将当前行进入编辑状态,然后获取被双击单元格的编辑器。如果编辑器为空,表明这个单元格不能编辑,直接对当前行取消编辑(不能用endEdit,主要是考虑可能有的字段会因为未通过验证规则而导致无法取消编辑状态);如果不为空,就将输入焦点定位到编辑器上。


onDblClickCell: function(index, field, value){ 

              $(this).datagrid('beginEdit', index);    //必须先开始编辑才能获取到编辑器

              var ed = $(this).datagrid('getEditor', {index:index, field:field});

              if (ed! ==null) {

                  $(ed.target).focus();

              }else{

                  $(this).datagrid('cancelEdit', index);

              }

        },

(先在obj中添加一个属性editIndex,用于记录用户选择的行序号,并将其初始值设为undefined,表示初始没有选择行。)
然后将onDblClickCell的事件代码修改如下:

        onDblClickCell: function(index, field, value){

              if (obj.editIndex ! = index){    //如果重新选择新的行

                  if (obj.endEditing()){      //对原来的行进行判断,如果通过验证就进入到新行

                        $(this).datagrid('beginEdit', index);

                        var ed = $(this).datagrid('getEditor', {index:index, field:field});

                        if (ed! ==null) {

                            $(ed.target).focus();

                            obj.editIndex = index;

                        }
                    } else {                    //否则就取消选择新行

                        $(this).datagrid('unselectRow', index);

                  }

              }

        },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。