jQuery EasyUI : confirm/save datagrid inline editing

标签 jquery datagrid inline-editing jquery-easyui

我正在使用 jquery 和 EasyUI 从 SQL 数据库创建表。我已成功通过此 tutorial 后的内联编辑使某些列可编辑。 ,其中可能的单元格值由组合框给出。我有一个 updateURL 的 php 文件,现有内容的更新工作正常。

我的问题如下:到目前为止,要确认单元格的编辑(单击单元格并从组合框中选择一个值后),用户必须单击表格的其他行才能触发更新-脚本。如果表格只有一行并且只有一列是可编辑的,则似乎无法确认更改(例如通过按 Enter 键)。

有什么办法可以确认吗? 感谢您的帮助!

<小时/>

更新:我已经走到这一步了:在数据网格中,要通过组合框编辑的列是通过创建的

<th field="..." data-options="formatter:...,
editor:{type:'combobox',options:{valueField:'...',textField:'...',url:'file.php'‌​,
onSelect: function (record) {*}}}">field</th>

我相信我需要通过命令代替星号 (*) 来保存/完成编辑。我已经使用了endEditsaveRow,但没有成功。这是正确的位置(我用一个简单的警报测试了它),但不是正确的命令/语法。

最佳答案

让我在这里为 Google 留下我的解决方案。使用1.4.4版本测试

基本上你需要重写 editRow 方法,但 EasyUI 似乎设计得不是很好,内部结构完全没有文档记录。另外还有对隐藏的 focusEditor 函数的调用,所以我最终得到了这段代码。它使用 触发 saveRow,并允许您使用 + 在多行编辑器中插入换行符。由于许多意外错误,我还通过单击其他行关闭了保存。

$.fn.edatagrid.methods.editRow = function(jq, index){
    return jq.each(function(){
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;
        var editIndex = opts.editIndex;
        if (editIndex != index){

            // -------------------- ✂ --------------------
            // Lost focus
            if (editIndex != -1) {
                dg.edatagrid('cancelRow');
                return;
            }
            // -------------------- ✂ --------------------

            if (dg.datagrid('validateRow', editIndex)){
                if (editIndex>=0){
                    if (opts.onBeforeSave.call(this, editIndex) == false) {
                        setTimeout(function(){
                            dg.datagrid('selectRow', editIndex);
                        },0);
                        return;
                    }
                }
                dg.datagrid('endEdit', editIndex);
                dg.datagrid('beginEdit', index);
                if (!dg.edatagrid('isEditing', index)){
                    return;
                }
                opts.editIndex = index;

                // -------------------- ✂ --------------------
                // Based on focusEditor() function
                var target;
                var that = this;
                var editor = $(this).datagrid('getEditor', {index:opts.editIndex});
                if (editor){
                    target = editor.target;
                } else {
                    var editors = $(this).datagrid('getEditors', opts.editIndex);
                    if (editors.length){
                        target = editors[0].target;
                    }
                }
                if (target){
                    var field = $(target).hasClass('textbox-f') ? $(target).textbox('textbox') : $(target);
                    field.focus();
                    field.bind('keydown', function(e) {
                        if (e.which == 13 && !event.shiftKey) {
                            $(that).edatagrid('saveRow');
                        }
                    });
                }
                // -------------------- ✂ --------------------

                var rows = dg.datagrid('getRows');
                opts.onEdit.call(this, index, rows[index]);
            } else {
                setTimeout(function(){
                    dg.datagrid('selectRow', editIndex);
                }, 0);
            }
        }
    });
};

关于jQuery EasyUI : confirm/save datagrid inline editing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15088273/

相关文章:

javascript - <ul> 中的响应式 Canvas ?

c# - 在 WPF/C# 中单击并拖动到多选复选框

c# - WPF:DataGrid 在值更改时排序

javascript - Angular 内联编辑表单例

bash - 如何在单行上重新运行 ZSH 中的内联循环(类似 bash 的行为)

javascript - 无法使用 jQuery 更改输入的 defaultValue 属性

javascript - Greasemonkey iframe 内容访问 jQuery

javascript - 括号中缺少 )

c# - xaml DataGrid 绑定(bind)到字典中的字典中的字典

ruby-on-rails - 在Rails 3中进行就地编辑