easyui cell Editing blur编辑器自动保存

  easyui datagrid cell editing编辑器如何失去焦点后自动保存,easyui datagrid cell editing示例点击这里查看,然后点击左边的导航“Cell Editing in DataGrid”查看效果。

 

  easyui datagrid cell editing的官方示例,编辑器失去焦点后,如果当前点击的对象不在datagrid的数据容器内容,如点击了datagrid数据区域外的对象,如datagrid的表头,编辑器是不会自动变为不可编辑状体的,要想点击非数据区域的对象后也能自动保存,需要修改官方datagrid-cellediting.js源代码才行。官方datagrid-cellediting.js下载点击这里

  下载js文件后,找到下面的代码进行修改,需要修改2处。

1)大概62行下面增加标注的代码

            onCellEdit: function (index, field, value) {
                var input = $(this).datagrid('input', { index: index, field: field });
                if (input) {
                    if (value != undefined) {
                        input.val(value);
                    }
//////////////////////////添加编辑器失去焦掉执行的事件,注意使用计时器延时执行,否则会出现点击同一行其他单元格进入编辑编辑状态后,执行focusout调用endEdit又被还原非编辑状态的问题
                    var dg = $(this);
                    input.bind('focusout', function (e) {
                        window.blurTimer = setTimeout(function () { dg.datagrid('endEdit', index) }, 100)
                    });
//////////////////////////
                }
            }

2)259行,点击其他单元格进入编辑状态的话,清楚计时器。点击非数据区域不进入此函数,所以计时器有效,会结束上一次编辑状态。

        function editCell(target, param) {
            clearTimeout(window.blurTimer);//增加这句清除计时器,以下的其他代码一样
            var dg = $(target);
            var opts = dg.datagrid('options');
//.......原来的代码
        }

 


原创文章,转载请注明出处:easyui cell Editing blur编辑器自动保存

评论(0)Web开发网
阅读(534)喜欢(1)不喜欢(1)easyui开发技巧