Jquery Easyui Open Line edit mode, delete and change operation

Jquery Easyui Open Line edit mode and delete operation first

HTML code:

  <table id= "dd" >  </table>

Introducing JS files and CSS Styles

<script src= "Http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type= "Text/javascript" ></script>    <script src= "http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/ Jquery.easyui.min.js "type=" Text/javascript "></script>    <link href=" http://www.cnblogs.com/ Resources/jquery-easyui-1.2.3/themes/default/easyui.css "rel=" stylesheet "        type=" Text/css "/>    <link href= "Http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/icon.css" rel= "stylesheet"        type= "text/css "/>    <script src=" Http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js " Type= "Text/javascript" ></script>

<script type= "Text/javascript" > $ (function () {var DataGrid;//define Global variables DataGrid var edit Row = undefined; Define Global variables: currently edited row DataGrid = $ ("#dd"). DataGrid ({url: ' usercenter.aspx ',//requested data source I Concls: ' Icon-save ',//Icon pagination:true,//Show paging pagesize:15,//page size Pageli ST: [15, 30, 45, 60],//Page size drop-down options The value of this entry is a multiple of pagesize fit:true,//datagrid adaptive width fitcolumn:fa LSE,//Column adaptive width striped:true,//row background Exchange nowap:true,//column content is automatically folded to the second row for a long border:fals E, IDfield: ' ID ',//primary key columns: [[///Display column {field: ' id ', title: ' Number ', width:10                     0, Sortable:true, checkbox:true}, {field: ' UserName ', Title: ' Username ', width:100, Sortable:true, Editor: {type: ' Validatebox ', options: {Required:true}}}, {field: ' Re Alname ', title: ' real name ', width:100, editor: {type: ' Validatebox ', options: {required:true}} }, {field: ' email ', title: ' Mailbox ', width:100, editor: {type: ' Validatebox ', Options: {Required:true}}]], Queryparams: {action: ' query '},//                    Query Parameters Toolbar: [{text: ' Add ', Iconcls: ' Icon-add ', handler:function () {//Add List action button Add, modify, delete etc. Add the first to determine if there is a line to open the edit, if there is the opening edit the line end edit if (editrow! = undefined) {Datagrid.dat                    Agrid ("EndEdit", Editrow);                        }//Add if there is no row being edited, insert a row in the first row of the DataGrid if (Editrow = = undefined) {                            Datagrid.datagrid ("InsertRow", {index:0,//index start with 0                        Row: {}}); Put the newly inserted line in the accountStatus Datagrid.datagrid ("BeginEdit", 0);                    Assigns a value to the currently edited row Editrow = 0;                     }}}, '-', {text: ' delete ', iconcls: ' Icon-remove ', handler:function () {                     Delete First gets 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 it?", funct                                 Ion (R) {if (r) {var ids = [];                                 for (var i = 0; i < rows.length; i++) {Ids.push (rows[i].id); }//The selected rows are stored in an array and separated into strings,//This example is just a foreground operation with no data                             Library to interact so it just pops up the ID alert (ids.join (', ')) to pass in the background;                   }      });                     } else {$.messager.alert ("prompt", "Please select the row to delete", "error");                     }}}, '-', {text: ' Modify ', Iconcls: ' Icon-edit ', handler:function () {                     Modify to get the selected row var rows = Datagrid.datagrid ("getselections"); If you select only one row, you can modify it, otherwise do not operate if (rows.length = = 1) {//Modify the open edit line before calling EndEdit The Onafteredit event will be triggered if (editrow! = undefined) {Datagrid.datagrid ("EndE                         Dit ", Editrow); }//When there is no edit row if (Editrow = = undefined) {//gets to the current                             Select row subscript var index = Datagrid.datagrid ("Getrowindex", Rows[0]);               Open edit Datagrid.datagrid ("BeginEdit", index);              Assigns the currently opened edit line to the global variable editrow editrow = index; When the editing state of the currently selected row is turned on,//should cancel all the selection rows of the current list, or you cannot select another row to edit the DataGrid after double-clicking.                         DataGrid ("Unselectall"); }}}, '-', {text: ' Save ', Iconcls: ' Icon-save ', hand Ler:function () {///save to end the currently edited line, automatically trigger the Onafteredit event if you want to interact with the background, you can submit data through Ajax to the background DataGrid.                 DataGrid ("EndEdit", Editrow);                     }}, '-', {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 The method triggers this event console.info (RowData);                Editrow = undefined;  }, Ondblclickrow:function (RowIndex, RowData) {//double-click to open Edit line if (editrow! =                    Undefined) {Datagrid.datagrid ("EndEdit", Editrow);                        } if (Editrow = = undefined) {Datagrid.datagrid ("BeginEdit", RowIndex);                    Editrow = RowIndex;        }                }            });    }); </script>

Jquery Easyui Open Line edit mode, delete and change operation