Write a Jquery.easyui-based editable form plugin

The recent project front end uses Jquery+easyui to do, for a few months, think Easyui is a very good open source front-end UI Framework,

Although occasionally encounter some small problems, but with many years of front-end development of the strength of the accumulation have been solved, of which the more typical is

This Easyui.editgrid plug-in, is based on the Easyui.datagrid extension. In fact, it can be achieved only with Easyui.datarid.

Similar functionality, but very slow, user experience is very poor, so abandoned the original easyui.datagrid in the editing function of the architecture

Its extensible implementation of its editable part, is now the Easyui.editgrid.

Description: Default left and right keyboard toggle row and column (can be set), enter keyboard toggle element (can be set)

: Http://files.cnblogs.com/dint/jquery_easyuiplus_editgrid.zip

The concrete realization, the familiar Easyui.datagrid friend should be able to see clearly, the use method and the Easyui.datagrid are basically the same, but expands some methods and the event:

1Window. Jlbh=1;2Window._autorefresh=false;3 function Delete_fn_row (jlbh) {4var rows = $ (' #dg-dint '). EditGrid (' getRows '));5          for(var i = 0, il = rows.length; i < il; i++) {6             if(Rows[i]. JLBH = =jlbh) {7var Rinx = $ (' #dg-dint '). EditGrid (' Getrowindex ', Rows[i]);8$ (' #dg-dint '). EditGrid (' DeleteRow '), Rinx);9                  Break;Ten             } One         } A     } - $ (function () { -     //Initialize Control-set its column name, bind field, etc. the$ (' #dg-dint '). EditGrid ({ -Title: ' Jquery.easyui.editgrid Demo-http://www.cnblogs.com/dint/', -Rownumbers:true, -Showfooter:true, +height:330, -width:1000, +Remotesort:true, ASingleselect:true, at onappendrow:function (nrow) { -Nrow. Jlbh=window. JLBH; -Window. jlbh++; -             }, - kboard:{ -Autonewrow:true, inKleft:37, -ktop:38, tokright:39, +Kdown:40 -             }, the onrowblur:function (RowIndex, rowdata) { *                if(window._autorefresh===false){ $var crow=$ (' #dg-dint '). EditGrid (' GetRowData ', RowIndex);Panax Notoginseng                   if(!parsefloat (Crow. INTCCC)) { -$ (' #dg-dint '). EditGrid (' Tooltiptim ', RowIndex, ' column ' must be greater than 0 ' value must be larger than 0!!!! ‘); the                      return false; +                   } A                } the             }, + columns: [[ -                 { $Title: ' DELETE ', field: ' Delxxxxxx ', width:100, align: ' center ', $ Formatter:function (Val, RowData, RowIndex) { -                        return"<a href= ' # ' onclick=\" Delete_fn_row (' "+ rowdata.jlbh +" ') \ "> Delete </a>" -                     } the                 }, -{title: ' Change the value of this column can be submitted to backstage ', field: ' AAA ', width:150, align: ' center ', sortable:true, editor:{WuyiType: ' Text ', the options:{ - onchange:function (n,o,row) { Wuvar rowIndex =parseint ($ ( This). Parents (' td[field=aaa] '). Parent (). attr (' Datagrid-row-index '), 10); -Row. Aaa=N; About                             //Request background Data $$ (' #dg-dint '). EditGrid (' PostData '), -                              {  -M: ' Postdat-aaa ', - D:n, A Rindex:rowindex +                              },  the' Default.aspx ', function (d) { -var data=Json.parse (d); $var rowObj0 = $ (' #dg-dint '). DataGrid (' GetRows ') [ This. Mdata.rindex]; therowobj0.intbbb=data. INTBBB; theRowobj0.intccc=data. INTCCC; therowobj0.ggg=data. GGG therowobj0.fff=data. FFF; -Window._autorefresh=true;
The UI can be displayed when rows are refreshed after assigning a value to the row
 in$ (' #dg-dint '). EditGrid (' Refreshrow '), This. Mdata.rindex); the$ (' #dg-dint '). EditGrid (' BeginEdit '), This. Mdata.rindex); the$ (' #dg-dint '). EditGrid (' Rowfocus '), This. Mdata.rindex); AboutWindow._autorefresh=false; the                              }); the                        } the                   } +                 } }, -                 { theTitle: ' must be greater than 0 columns ', field: ' INTCCC ', width:100, align: ' center ', editor: {BayiType: ' Numberbox ' the                     } the                 }, -                 { -Title: ' This column is numeric column can only enter Number ', field: ' Intbbb ', width:150, align: ' center ', editor: { theType: ' Numberbox ', options: { themin:0, theValidtype: ' intbbb ', the onchange:function (n,o,row) { -                                  the                             } the                         } the                     }94                 }, the                  the                 { theTitle: ' Date Selection column ', field: ' Dteddd ', width:100, align: ' center ', editor: {98Type: ' Datebox ' About                     } -                 },101{title: ' Eeee ', field: ' EEE ', width:100, align: ' center ' },102                 {103Title: ' Custom Selection column ', field: ' FFF ', width:100, align: ' center ', editor: {104Type: ' Selectbox ', the options: {106 onselecthandler:function () {107Alert This. value+ ' ^_^ can do a lot of things here, like pop up a selection of dialog box ');108                             }109                         } the                     }111                 }, the{title: ' Gggg ', field: ' GGG ', width:100, align: ' center ', editor:{type: ' Text '} },113{title: ' HHHH ', field: ' HHH ', width:100, align: ' center ' }, the{title: ' IIII ', field: ' III ', width:100, align: ' center ', editor:{type: ' Text '}}, the{title: ' Jjjj ', field: ' Jjj ', width:100, align: ' center ' }, the{title: ' Kkkk ', field: ' KKK ', width:100, align: ' center ', editor:{type: ' Text '}},117{title: ' Llll ', field: ' LLL ', width:100, align: ' center ' },118{title: ' MMMM ', field: ' MMM ', width:100, align: ' center ', editor:{type: ' Text '}  },119{title: ' NNNN ', field: ' NNN ', width:100, align: ' center ' }, -{title: ' Oooo ', field: ' OOO ', width:100, align: ' center ', editor:{type: ' Text '}  },121{title: ' Pppp ', field: ' PPP ', width:100, align: ' center ' },122{title: ' QQQQ ', field: ' QQQ ', width:100, align: ' center ', editor:{type: ' Text '} },123{title: ' RRRR ', field: ' RRR ', width:100, align: ' center ' },124{title: ' SSSS ', field: ' SSS ', width:100, align: ' center ', editor:{type: ' Text '} }, the{title: ' Tttt ', field: ' TTT ', width:100, align: ' center ' },126{title: ' Uuuu ', field: ' UUU ', width:100, align: ' center ', editor:{type: ' Text '} },127{title: ' VVVV ', field: ' VVV ', width:100, align: ' center ', editor:{type: ' Text '} }, -{title: ' Wwww ', field: ' WWW ', width:100, align: ' center ' },129{title: ' XXXX ', field: ' XXX ', width:100, align: ' center ', editor:{type: ' Text '} }, the{title: ' YYYY ', field: ' YYY ', width:100, align: ' center ' },131{title: ' ZZZZ ', field: ' ZZZ ', width:100, align: ' center ', editor:{type: ' Text '} } the             ]]133         });134         //Enable keyboard operation, if you do not execute this sentence, you cannot use the keyboard to switch focus between cells135$ (' #dg-dint '). EditGrid (' Keyboardinit '));136         137         //Loading Data138$.post (' Default.aspx?m=data ', function (d) {139var data=Json.parse (d); $             for(Var i=0,il=data.length;i<il;i++){141$ (' #dg-dint '). EditGrid (' Appendrow '), Data[i]);142            }143$ (' #dg-dint '). EditGrid (' Allbeginedit '));144         });145         146});

：

Write a Jquery.easyui-based editable form plugin