In-line editing of the Easyui DataGrid

This JS code is written by others, may not be the best, but I personally feel that the first to help others solve functional problems is particularly good. I made a few changes to use on my own project, here to share. Backstage with the tinkphp because all are check and delete and change is relatively simple, here is not affixed. The staff was very friendly and friendly.

　　

$ (function () {var DataGrid;//define global variable Datagridvar editrow = undefined;//define Global variables: currently edited row DataGrid = Tskupluaddpacket.datagrid ({url:thinkphp[' MODULE '] + '/tskuplu/getpacketlist ',//requested data source Iconcls: ' Icon-save ',//Icon pagination:true,//Show paging pagesize:15,//Page size pagelist: [15, 30, 45, 60],//Page size drop-down option this item is a multiple of pagesize fit:true,//da Tagrid Adaptive width fitcolumn:false,//Column adaptive width striped:true,//row background Exchange nowap:true,//column content is automatically folded to the second row border:false, Idfiel D: ' Packetid ',//primary key sortname: ' Packetid ',//Sort field Sortord ER: ' desc ',//Sort by columns: [[///Display column {field: ' Packetid ', title: ' ID ', width:100, Sortab                                Le:true, Checkbox:true}, {field: ' Packunit ', title: ' Packing unit ', width:100, Sortable:true,                        Editor: {type: ' Validatebox ', options: {Required:true}}}, {field: ' Packqty ', Title: ' Package count ', Width:100, Editor: {type: ' Validatebox ', options: {required:true}} }, {field: ' Packspec ', Title: ' Package specification ', width:100, editor: {type: '                     Validatebox ', options: {Required:true}}]], Queryparams: { Pluid: $ (' #addpluid '). Val ()},//query parameter toolbar: [{text: ' Add ', Iconcls: ' Icon-add ', handler:f                                                                         Unction () {//Add List action button Add, modify, delete etc.//add if there is no row being edited, insert one row if (Editrow = = undefined) in the first row of the DataGrid {  Datagrid.datagrid ("InsertRow", {index:                   0,//index start with 0 row: {}});                        Open the newly inserted line edit state Datagrid.datagrid ("BeginEdit", 0);//Assign values to the currently edited line Editrow = 0;    }                }                }, '-',            {text: ' delete ', iconcls: ' Icon-remove ', handler:function () {//delete                         First get select row var rows = Datagrid.datagrid ("getselections"); Select the row to delete if (Rows.length > 0) {$.messager.confirm ("hint", "Are you sure you want to delete?", function (r) {if ( R) {var ids = [];for (var i = 0; i < rows.length; i++) {Ids.push (ROWS[I].PA                                        Cketid);                                        }//the selected rows into an array and separates them into strings,//This example is just that the foreground operation is not interacting with the database so it just pops up the Id//alert to be passed in to the background (Ids.join (', '));                                            $.ajax ({url:thinkphp[' MODULE ') + '/tskuplu/deletepacket ',                                                Type: ' POST ', data: {                                            Ids:ids.join (', ')}, Beforesend:fUnction () {$.messager.progress ({                                                Text: ' In Process ... '}); }, Success:function (data) {$. Messager.progress (' close '), if (data >0) {Datagrid.datagrid (' reload ')                                                    ;                                                        $.messager.show ({title: ' Action Reminder ', Msg:data + ' data was successfully deleted!                                                    })} else if (data = =-999) { $.messager.alert (' delete failed ', ' Sorry, you don't have permission!                                                ', ' warning '); } else {$.messager.alert (' delete failed ', ' No data deleted! ', ' warning');                                                                        }                                            }                                        });                         }                                });                         } else {$.messager.alert ("prompt", "Please select the row to delete", "error"); }}}, '-', {text: ' Modify ', Iconcls: ' Icon-edit ', hand Ler:function () {//Modify to get the selected row var rows = Datagrid.datagrid ("getselections");//If only one row is selected, you can modify it, otherwise do not operate if (rows.length = = 1) {//when there is no edit row if (Editrow = = undefined) {//Gets the subscript of the current selection row var index = Datagrid.datagrid ("Getrowindex", rows[0]);// Turn on edit datagrid.datagrid ("BeginEdit", index);//Assign the currently open edit line to the global variable Editroweditrow = index;//when the current selection line's edit state is enabled,//                            All selection rows of the current list should be canceled, or you can no longer select another row for editing Datagrid.datagrid ("Unselectall") after double-clicking; }                        }                    }                }, '-',                {text: ' Save ', Iconcls: ' Icon-save ', handler:function () {//warranty                           The current edited line is ended at save time, and the Onafteredit event is automatically triggered if you want to interact with the background to submit the data via AJAX to the backend Datagrid.datagrid ("EndEdit", Editrow);                    Editrow = undefined;                         }}, '-', {text: ' Cancel edit ', Iconcls: ' Icon-redo ', handler:function () {                         Cancels the current edit line undefined the current edit row to roll back the changed data, deselect the row editrow = undefined;                         Datagrid.datagrid ("RejectChanges");                    Datagrid.datagrid ("Unselectall");                     }}, '-'], onafteredit:function (RowIndex, RowData, changes) {//endedit This method triggers this event  var row = Datagrid.datagrid ("GetData"). Rows[rowindex]; Gets the value of a row var inserted = Datagrid.datagrid (' getChanges ', ' inserted '); var updated = Datagrid.datagrid (' getChanges ', '     Updated '); if (Inserted.length < 1 && updated.length <1) {                   Editrow = undefined;                    Datagrid.datagrid (' Unselectall '); return;                    }var url = '; ' if (inserted.length>0) {url=thinkphp[' MODULE '] + '/tskuplu/addpacket ';                    }if (updated.length>0) {url=thinkphp[' MODULE '] + '/tskuplu/updatepacket ';  } $.ajax ({url:url, type:                           ' POST ', data: {' Pluid ': $ (' #addpluid '). Val (), ' Packetid ': Rowdata.packetid, ' packunit ': rowdata.packunit, ' Packqty ': Rowdata.packqty, ' Packspec ': Rowdata.packspec}, Befo Resend:function () {$.messager.progress ({text: ' In process ... '} )                       },                       Success:function (data) {$.messager.progress (' close ');                                  if (Data > 0) {datagrid.datagrid ("acceptChanges"); $.messager.show ({title: ' Action Tip ', msg: ' Tim                                            Added success '});                                Editrow = undefined;                                 Datagrid.datagrid ("Reload");                           $ (' #addcheck '). val (1); } else if (data = = -999) {$.messager.alert (' Add failed ', ' Sorry! You don't have permission!                           ', ' warning ');                                } else {Datagrid.datagrid ("BeginEdit", Editrow); $.messager.alert (' Warning action ', ' unknown error! Please re-refresh after submission!                           ', ' warning ');                         } datagrid.datagrid ("Unselectall");            }        });//////////////////}, Ondblclic Krow:function (RowIndex, RowData) {//double-click to open Edit line if (Editrow = = undefined) {Datagrid.datagrid ("Beg                            Inedit ", RowIndex);                    Editrow = RowIndex;          }                }        }); });