jQuery EasyUI: confirm/save datagrid inline editing

Question

I am using jquery & EasyUI to create a table from a SQL database. I have managed making some of the columns editable via inline editing following this tutorial, where the possible cell values are given by a combobox. I have a php file for the updateURL and the updating of existing content is working fine.

My question is the following: So far, to confirm the editing of a cell (after clicking into the cell and selecting a value from the combobox), the user has to click on some other row of the table to trigger the update-script. If the table has only one row and only one of the columns is editable, there seems to be no possibility to confirm the change (e.g. by pressing enter).

Is there any way for such confirmation? Thanks for any help!

---

Update: I have come this far: In the datagrid, the column which is to be edited via the combobox is created via

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

I believe I need to save/finish the editing via a command in place of the asterik (*). I have used endEdit, saveRow, but with no success. It is the right place (I tested it with a simple alert), but not the right command/syntax.

Answer 1

Solved!

The code that needs to go for the asterisk is:

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

Hope this is of help for others, too.

Answer 2

Let me leave my solution here for Google. Tested with version 1.4.4

Basically you need to override editRow method, but EasyUI seems to be not very well designed and internals are totally undocumented. Also there's a call to hidden focusEditor function, so I ended up with this code. It triggers saveRow with <Enter> and allows you to insert line break in multiline editor with <Shift> + <Enter>. I also turned off saving by clicking other row due to many accidental errors.

$.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);
            }
        }
    });
};

Answer 3

Why dont you use a toolbar(with save/ confirm buttons) attached with the grid. On click on the buttons, you can explicitly trigger the update events of the edatagrid.

In the link which you referred itself, you can find the example,

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