Row editing in datagrid

For specific examples, visit the official website. The demo and documentation on the official website are very useful.

The following is the code obtained from the official website. Here we only look at JS and analyze it below.

       var editIndex = undefined;        function endEditing(){            if (editIndex == undefined){return true}            if ($('#dg').datagrid('validateRow', editIndex)){                var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});                var productname = $(ed.target).combobox('getText');                $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;                $('#dg').datagrid('endEdit', editIndex);                editIndex = undefined;                return true;            } else {                return false;            }        }        function onClickRow(index){            if (editIndex != index){                if (endEditing()){                    $('#dg').datagrid('selectRow', index)                            .datagrid('beginEdit', index);                    editIndex = index;                } else {                    $('#dg').datagrid('selectRow', editIndex);                }            }        }        function append(){            if (endEditing()){                $('#dg').datagrid('appendRow',{status:'P'});                editIndex = $('#dg').datagrid('getRows').length-1;                $('#dg').datagrid('selectRow', editIndex)                        .datagrid('beginEdit', editIndex);            }        }        function removeit(){            if (editIndex == undefined){return}            $('#dg').datagrid('cancelEdit', editIndex)                    .datagrid('deleteRow', editIndex);            editIndex = undefined;        }        function accept(){            if (endEditing()){                $('#dg').datagrid('acceptChanges');            }        }        function reject(){            $('#dg').datagrid('rejectChanges');            editIndex = undefined;        }        function getChanges(){            var rows = $('#dg').datagrid('getChanges');            alert(rows.length+' rows are changed!');        }

Focus on JS. We can see that a variable editindex is defined first, which records the current row index for editing.

As you can imagine, this variable will be assigned a value at the start of editing, and will be restored to undefined at the end of editing, this is the public variable for communication between methods.

The following describes the most important method-endediting. We can see that this method is used in the following methods, which is very important.

So what is endediting used? First look at the name to guess, this method is probably used to end the editing, then look at the code

The Edit can be terminated only after the verification is passed. True is returned. Because the edit is terminated, the editindex is set to undefined. Otherwise, false is returned.

This method verifies the "Terminate edit" Operation and performs some final work, such as translating some code and setting editindex to undefined.

This confirms what we have just observed. This method should be used together with other methods, that is, the so-called method that requires "Terminating editing". Let's take a look at them first.

Onclickrow (INDEX)

This is the onclickrow event processing function provided by the DataGrid. This function is triggered when a row is clicked. In row editing, we want to change the row to editable when a row is clicked.

It's easy:

$('#dg').datagrid('beginEdit', index)

If one row is already being edited, then click the clickrow of another row? Determine whether the editindex and index are equal.

If they are not equal, you need to "Terminate the editing" of the current editing line, and then "start editing" the row that is newly clicked. If the values are equal, select the current edit row.

        function onClickRow(index){            if (editIndex != index){                if (endEditing()){                    $('#dg').datagrid('beginEdit', index);                    editIndex = index;                } else {                    $('#dg').datagrid('selectRow', editIndex);                }            }        }

The next several methods are actually centered around editindex. The appenrow method of the DataGrid can assign an initial value to the new row.

The acceptchanges method needs to be called in accept. This method is used to accept previous changes. That is to say, this method actually saves the changed value.

If you do not call this method, even if you "Stop editing", but if you press the "cancel" button, no rows in acceptchanges are restored. In addition, you can also use getchanges to view the number of changes that have not been accept

Understanding this demo actually masters the editing of the DataGrid in most cases and lays a good foundation for the more complex DataGrid.

Row editing in datagrid