Jqgrid implements row editing, column Association of form editing, and jqgrid form

Jqgrid implements row editing, column Association of form editing, and jqgrid form

I believe everyone has encountered this problem. For example, columns A, B, and C, column B and column C are all drop-down boxes, however, the value of column C is determined by the value of Column B, that is, the value in Column C changes dynamically, and the change is based on the value you choose in column B. This article provides a practical and convenient implementation method. First look at the figure:

In this example, if the class is normal, only the class is displayed in the class column; otherwise, the class is displayed in the evening. It can be viewed as two-column linkage.

The core code is:

OnSelectRow: function (id) {if (id & id! = LastSel) {jQuery ("# TblClassTypeId "). restoreRow (lastSel); lastSel = id;} var editkey = $ ('# TblClassTypeId '). jqGrid ('getcell ', id, 'Id _ key'); var editparameters = {keys: true, extraparam: {"editkey": editkey}, oneditfunc: function () {$ ('#' + id + '_ WorkerId '). attr ('readonly', true) ;}}; jQuery ("# TblClassTypeId "). editRow (id, editparameters); $ ('#' + id + '_ isalwaysday '). change (function () {var selectvalue = $ (this ). val (); var classTypeCol =$ ('#' + id + '_ ClassType'); classTypeCol. empty (); if (selectvalue = "yes") {classTypeCol. append ("<option value = \" White shift \ "> White shift </option>");} else {classTypeCol. append ("<option value = \" White shift \ "> White shift </option> "). append ("<option value = \" evening shift \ "> evening shift </option> ");}});},

In row editing mode, when the trigger action is set to onSelectRow. In this case, the Id of the input cell space is id + "_ colName ". The id is the row id. After obtaining the Control Id, you can add the select change event. In this event, you can associate columns. As shown in the above Code, the drop-down options are relatively simple, so I chose to assign values directly. If there are many drop-down options, you can use ajax to obtain them from the server.

It is easy to implement column Association in the row editing mode. Compared with the formaterr, unformat, custom_element, and custom_value of columns introduced on the Internet, it is indeed much simpler.

Next, let's take a look at the association of the form editing mode, and the implementation is also very simple. Click Add in. The following page is displayed:

The core code is:

// Add {beforeShowForm: function (formid) {$ ('# WorkerId', formid ). removeAttr ("readonly", "readonly"); $ ('# IsAlwaysDay', formid ). change (function () {var selectvalue = $ (this ). val (); var classTypeCol = $ ('# ClassType', formid); classTypeCol. empty (); if (selectvalue = "yes") {classTypeCol. append ("<option value = \" White shift \ "> White shift </option>");} else {classTypeCol. append ("<option value = \" White shift \ "> White shift </option> "). append ("<option value = \" evening shift \ "> evening shift </option>") ;}}, reloadAfterSubmit: true ,},

In the beforeShowForm event corresponding to the Add button, get the control Id $ (# colName, formId). formId is automatically sent to us by jqgird. After obtaining the Control Id, the subsequent implementation method is very similar. The problem is solved.

I also checked a lot of information about this implementation method, and compared different implementation methods. I always want to find a quick and easy implementation method. Of course, this is just a demo. In actual practice, all these codes can be encapsulated and reconstructed to simplify implementation.

OK. I hope it will help you. Here, I would like to thank this brother, like Han: Teddy xiaojian bear, in this article, jqGrid row editing is an implementation method of select-Level 3 Association, which inspired me to implement this article.

-In jqGrid cell/row editing mode, how does getRowData obtain data rows?

Refer to the source code of jqGrid. The implementation of getRowData is to traverse tr to obtain the innerhTML of td. GetRowData is affected in cell and row editing mode. It is okay in form editing mode because the form does not directly modify jqGrid to generate an input object, but generates an Edit object in the new control. To getRowData returns the actual data row in cell and row editing mode, rather than containing html code, refer to the following.
For cell editing, You need to restore or save the cell, and then call the getRowData method to implement the following:
1. Add the beforeEditCell event to the grid and declare the row numbers and column numbers of the two window fields in the variable record cell beforeEditCell: function (rowid, cellname, v, iRow, iCol) {lastrow = iRow; lastcell = iCol;} 2. Save/restore the cell $ ("# grid") before calling getRowData to obtain data "). jqGrid ("saveCell", lastrow, lastcell); // Save the cell and switch to text mode. // or ==>// $ ("# grid "). jqGrid ("restoreCell", lastrow, lastcell); // restores a cell and switches to the text mode var recs =$ ("# grid "). jqGrid ("getRowData"); for the row editing mode, the principle is the same, restore the row being edited or save the data to memory 1, when editRow is called, The oneditfunc event processing function is passed to save the id of the row being edited $ ('# list4 '). jqGrid ('editrow', rowid, true, function (rowid) {window. rowid = rowid;}); 2. Before calling getRowData to obtain data, save/restore the row jQuery ("# grid_id") that is being edited "). saveRow (rowid, false, 'clientarray'); // ==> or restore // jQuery ("# grid_id "). restoreRow (rowid); var recs =$ ("# grid "). jqGrid ("getRowData ");

The jqGrid cell is a drop-down box. Can the two-level Association of selected Rows be implemented?

JqGrid constructs a list with several columns as the drop-down list. Who can give me some ideas to achieve the second-level linkage in the drop-down box of the currently selected row (for example, select one row? Previously, we wanted to use setCell, but this method changed the value of the entire column rather than the value of a drop-down box. Answer 1: help me answer 2: Check whether FindControl can find the control. No answer 3: reference the reply from silentwins on the second floor: Check whether FindControl can find the control. No, I am not too clear, for more details, see. Answer 4: I will do it myself. Answer 5: Please help me with your answers. Answer 6: it will not expire. Answer 7: reference the reply from silentwins on the second floor: Check whether the FindControl can find the control. This is definitely not a problem... Generally, it is Request. parms [your column name]. Answer 8: I have solved the problem through the onCellSelect () and afterCellSelect () events. Answer 10: Evaluate the code in a realistic Column