Easyui DataGrid Edit Mode detailed

One, build the editor

From the API, it is necessary to provide several methods to extend a new type of editor. A checkbox type editor is needed in the project, but it is not available in Easyui, so we can solve it by extending the editor, which is expanded as follows

Press CTRL + C to copy the code<textarea></textarea>Press CTRL + C to copy the code

When the new edits are expanded, they are used the same way as the system's default editor:

Second, get the editor

The DataGrid passes through the call BeginEdit to the corresponding index of the row to begin editing, which enters edit mode. by EndEdit or Cancleedit end edit mode, EndEdit submits a data change record, Cancleedit reverts to the initial data.

Geteditors and Geteditor return the specified line to the current editor, geteditor the underlying call geteditors method. Geteditors returns an array of editor objects.

Three, editor events

There are three requirements in a project

1, according to the different operation results, render different edit control operation mode, as shown, the user selects Group 1, the date control range must be to day, the right date control provides a day selection display. The user selects Group 6, the date control range is available to the month, and the right date control provides a monthly selection display.

2, the start date exists in the list, and the end date must control that the start date cannot be greater than the end date or the end date cannot be greater than the start date

3, the corresponding year is extracted according to the start date selected by the user.

What can be achieved in response to these two requirements?

Let's start by knowing what events are available in the DataGrid in edit mode and how to extend a new data validation rule

Events are available in the API:

Extended Data validation Rules:

 1 $.extend ($.fn.validatebox.defaults.rules, {2//Verify start date can only be less than End date 3 Sdatecompare: {4 validator:function ( Value, param) {5 var end = Param[0]; 6 if (typeof end = = ' String ') {7 end = $ (PA             RAM[0]);//End Date Selector 8} 9 if (!end.datebox ("GetValue")) {Ten return true;11             }12 var endDate = new Date (End.datebox ("GetValue")); var curdate = new Date (value); 14         Return Curdate < enddate;15},16 message: ' Start date must be less than End Date '},18 edatecompare: {19  Validator:function (value, param) {var start = param[0];21 if (typeof start = = ' String ')  {start = $ (param[0]);//start date Selector23}24 if (!start.datebox ("GetValue") | | !value) {return true;26}27 var startdate = new Date (Start.datebox ("GetValue") ); var curdate = new Date (value), $.fn.validatebox.defaults.rules.edatecompare.message = ' End date must be greater than start date '; 30 return curdate > STARTDATE;31},32 message: "33},34});

With the above two basic knowledge, these three needs are handled smoothly. The first requirement is to render different interfaces based on different data. Here I see the onbeforeedit, literally, before you start editing, the official explanation is that the user is triggered when they start editing a row of data. That is, before this event fires, the DataGrid does not have a built or initial editor control, and we know that the DataGrid edit is rendered by the options in the editor in the column properties, so it's not a good idea to change the options here, So in Onbeforeedit I knocked on the JS code:

1 var zselected = Fazgl.grdtnz.datagrid ("getselected"); 2 var ksopts = $ (this). DataGrid ("Getcolumnoption", "F_ksrq"); 3 var jsopts = $ (this). The DataGrid ("Getcolumnoption", "F_jsrq"), 4 var rendmodes = ["Year", ' Month '];//easyui calendar expands a mod The e attribute, used to display the selection to month or to day 5 $.extend (ksOpts.editor.options, {Mode:rendmodes[zselected.f_sfft]}); 6 $.extend ( JsOpts.editor.options, {Mode:rendmodes[zselected.f_sfft]});

By verifying that this idea is perfectly correct, the need to present different interfaces according to different data is reasonably handled. The first requirement ends here, now focusing on the second requirement, the start date must be less than the end date, the data validation rules extended from above Sdatecompare and edatecompare, we know that we need to pass in a selector of the comparison date control. How do we do that? Looking back at the API, which has onbeginedit such an event, through the lookup source, learned that the DataGrid in the event when the corresponding edit control has been created, that through the DataGrid to provide methods Geteditors or Geteditor get the editor, where the target is not the need for selector! So I knocked down the following code in Onbeginedit:

1             var editors = $ (this). DataGrid ("Geteditors", Index), 2             var ed_ksrq = editors[0];//Start Date Editor 3             var ed_jsrq = Ed itors[1];//End Date Editor 4             //easyui Date control extends from the textbox, all need to get the options corresponding to the textbox to join the validation Rule 5             var ksopts = $ (ed_ksrq.target ). Datebox ("TextBox"). Validatebox ("Options"); 6             ksopts.validtype = Ksopts.validtype | | {};//If the editor is initially set, the corresponding editor validtype is null, here is the null Judge 7             $.extend (Ksopts.validtype, {sdatecompare: [Ed_jsrq.target]}); 8             var jsopts = $ (ed_jsrq.target). Datebox ("TextBox"). Validatebox ("Options"); 9             Jsopts.validtype = Jsopts.validtype | | {};10             $.extend (Jsopts.validtype, {edatecompare: [Ed_ksrq.target]});

After testing, the idea is completely correct, and the dynamic join validation rule is successfully implemented. With the above experience, there is no difficulty with the third requirement, the DataGrid provides Onendedit (before destroying the editor), Onafteredit (after destroying the editor), returns a changes object with the changed data stored in it, So I wrote the following code in Onendedit:

1  var nrow = {}; 2  3             //Determine if there is a change start date 4  5             if (changes["F_KSRQ"]) {6  7                 var kary = changes. F_ksrq.split ("-"); 8  9                 var date = new Date (parseint (kary[0]), parseint (Kary[1])-1);                 nrow["F_nian"] = Date.getfullyear () ;                 nrow["F_ksy"] = kary[1];14                 nrow. F_KSRQ = row. F_KSRQ + "-" + "n";             }18           //Update data             : $ (this). DataGrid ("UpdateRow", {                 index:index,24 25< C17/>row:nrow26             });             nrow = null;

This Oncanceledit this event is not explained, but according to the API also understand when the call, what can be done, but also waiting for the right needs to be explained!

Easyui DataGrid Edit Mode detailed