jQuery EasyUI：确认/保存数据网格内联编辑

Posted 2023-02-22

【中文标题】jQuery EasyUI：确认/保存数据网格内联编辑

【英文标题】：jQuery EasyUI: confirm/save datagrid inline editing

【发布时间】：2013-02-11 20:30:00

【问题描述】：

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

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

有什么方法可以确认吗？ 感谢您的帮助！

---

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

创建的

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

我相信我需要通过命令代替星号 (*) 来保存/完成编辑。我用过endEdit、saveRow，但没有成功。这是正确的地方（我用一个简单的警报对其进行了测试），但不是正确的命令/语法。

【问题讨论】：

据我所知，内联编辑功能是在these javascripts创建的。但是我太初学者了，不知道如何修改它们才能以其他方式保存编辑，而不是单击另一行。

【参考方案1】：

为什么不使用网格附带的工具栏（带有保存/确认按钮）。点击按钮后，您可以显式触发 edatagrid 的更新事件。

在您自己引用的链接中，您可以找到示例，

http://www.jeasyui.com/tutorial/app/crud2.php

【讨论】：

是的，我知道可以添加一个按钮 - 但这需要在表格上方/下方有一个完整的工具栏。由于我有多个表格，在彼此上方/下方的垂直线上，其中一些只有一行，我希望避免失去每个表格的工具栏所需的垂直空间。但我不知道必须如何修改 edatagrid-javascript（如果这是要查看的地方）。不过，感谢您的帮助！

否则，你可以显式调用datagrid的endEdit方法。如果combobox是最后一个编辑器列，在combobox的Onselect事件中，你可以调用endEdit。这将触发更新。

这就是我想要做的，也是我目前失败的地方。我已经做到了这一点：<th field="..." data-options="formatter:..., editor:type:'combobox',options:valueField:'...',textField:'...',url:'file.php',onSelect: function (record) *">Status</th> 星号（*）在哪里我已经放置了endEdit，saveRow，但无济于事。这是正确的地方（我用一个简单的alert 对其进行了测试），但不是正确的命令。

我已经更新了问题的进度。感谢您的帮助，@Sagitha。

P.S. @Sagitha，对不起，我不能赞成你的回答，我还没有足够的声誉。还是谢谢！

【参考方案2】：

解决了！

需要打星号的代码是：

var selectedrow = $('#dg_id').datagrid('getSelected');
var rowIndex = $('#dg_id').datagrid('getRowIndex', selectedrow);
$('#dg_id').datagrid('endEdit',rowIndex);

希望这对其他人也有帮助。

【参考方案3】：

让我把我的解决方案留给 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);
            
        
    );
;