Easyui modify other column values dynamically while in edit state.

1 the first is to customize a method uodatecolumn Update column values2       3     /**  4 * Custom Modify column Value method5                  */  6 $.extend ($.fn.datagrid.methods, {7 updatecolumn:function (datagrid,data) {8 Datagrid.each (function () {9 //Get configuration data from the cacheTen var gridobj=$.data (this, "DataGrid");  One var opts=gridobj.options;  A //Get Row data - var row=opts.finder.getrow (this,data.index);  - data.row=data.row| |  {};  the var update=false;  - //Determine if updates are required - For (var updatecolumn in Data.row) { - if (Data.row[updatecolumn]!==row[updatecolumn]) { + update=true;  - Break ;  +                                 }   A                             }   at if (update) { - var tr=opts.finder.gettr (this,data.index);  - var view=opts.view.renderrow.call (opts.view,this,["attr1"],true,data.index,data.row);  - if (Tr.hasclass ("datagrid-row-editing")) { - //Find all columns that need to update values - tr.find (' div '). each (function (i) { in if (data.row[$ (this). Parent (). attr (' field ')]!=undefined) { - if ($ (this). attr (' class '). IndexOf (' datagrid-editable ')!=-1) { to var ed=$.data (this, "datagrid.editor");  + if (ed!=undefined) { - Ed.actions.setValue (ed.target,data.row[$ (this). Parent (). attr (' Fiel  d ')]);  the }else{ * $ (this). HTML (data.row[$ (this). attr (' field ')]);  $                                                 }                                             Panax Notoginseng }else{ - $ (this). HTML (data.row[$ (this). attr (' field ')]);  the$ (this). addclass ("datagrid-editable"); +                                             }   A                                         }   the                                     });  +                                 }   -                             }   $                         });  $                     }   -});

Here, there is another need to be aware of, we will not be in the editing state of the column set the value of the addition of class:datagrid-editable;

So in Easyui.min.js, this class is scanned for the end-of-edit method to get the editor object, but we can't get it here.

So in the source code we have added the following processing methods:

if (ed!=undefined) {var t=$ (ed.target), Var _6eb=t.data ("TextBox"), T.textbox ("TextBox"): T;_6eb.triggerhandler ("Blur ") var _6ec=ed.actions.getvalue (ed.target); if (ROW[_6EA]!=_6EC) {row[_6ea]=_6ec;_6e8=true;_6e9[_6ea]=_6ec;}} else{$ (This). Removeclass ("datagrid-editable"), Var _6cv=$ (this). html (); if (ROW[_6EA]!=_6CV) {row[_6ea]=_6cv;_6e8= TRUE;_6E9[_6EA]=_6CV;}}

In fact, it is more explicit to rewrite the EndEdit. This avoids the understanding of the source code.

Use the Easyui table in the HTML page to declare the table:

<Prename= "Code"class= "html">$ (' #demo '). DataGrid ({fitcolumns:true, iconcls: ' Icon-edit ', singleselect:t                Rue, url: ' Js/datagrid_data1.json ', method: ' Get ', Onclickrow:onclickrow,                         Onendedit:onendedit, Columns: [[{field: ' Itemid ',                        Title: ' Item ID ', width:20, align: ' center ',                        Checkbox:true}, {field: ' ProductID ',  Title: ' ProductID ', width:20, Sortable:true, align:                        ' Center '}, {field: ' ListPrice ', title: ' List price ',                            WIDTH:20, align: ' center ', editor: { Type: ' NumberBox ', Options: {Precision:2, GR Oupseparator: ', '}}}, {Fie LD: ' UnitCost ', title: ' UnitCost ', width:20, sortabl                    E:true, Editor: {type: ' textbox '} }, {field: ' Attr1 ', title: ' Attr1 ', width:20                        , Sortable:true, editor:{type: ' Datebox '                        }}, {field: ' Status ', title: ' Status ',                        Width:20, Sortable:true, align: ' left ',    editor:{                        Type: ' ComboBox ', options:{Valuefield: ' I d ', TextField: ' Text ', Data:[{id:1,text: ' One '},{id:2,text: ' number second ' }]                            }                        }                    }]                ]            });

Declare some events that are open for editing

var editindex = undefined;                function endediting () {if (Editindex = = undefined) {return true} if ($ (' #demo '). DataGrid (' Validaterow ', Editindex)) {$ (' #demo '). DataGrid (' EndEdit ', Editindex                    );                    Editindex = undefined;                return true;                } else {return false; }} function Onclickrow (index) {if (Editindex! = index) {if (end                        Editing ()) {$ (' #demo '). DataGrid (' SelectRow ', Index). DataGrid (' BeginEdit ', index); var ed = $ (' #demo '). DataGrid (' Geteditor ', {index:index, fi                        Eld: ' ListPrice '}); if (ed) {Ed.target.textbox ({inputevents: $.extend ({}, $.fn.tex Tbox.defaults.iNputevents, {keydown:function (e) {if (E.keyco                                            De = = () {var row = $ (' #demo '). DataGrid (' getselected '); $ (' #demo '). DataGrid (' Updatecolumn ', {index:index,row:{attr1: ' 2016-01-12 ', Status: ' 1 ', UnitCost: ' 33 '}})                                        ;                        }                                    }                                })                            });                    } editindex = index; } else {setTimeout (function () {$ (' demo '). DataGrid (' SelectRow ', editind                        ex);                    }, 0);            }}} function Onendedit (index, row) {console.log (row); }

Easyui modify other column values dynamically while in edit state.