How to dynamically add and remove editor_jquery from datagrid in jQueryEasyui Learning

The Edit function is relatively simple when you use easyui to edit rows. However, if you want to dynamically change other values based on the value of a box or disable a box during editing, the following describes how to add and remove the editor dynamically in easyuidatagrid. If you are interested, it is easier to use easyui to edit the editor, however, it is troublesome to dynamically change other values or disable a box during editing based on the value of a box.

For example, when a row is added, each value is manually input. The first value cannot be modified. Let's take a look at how to achieve this effect.

Easyui itself does not provide such detailed functions, so we need to expand it ourselves:

When editing, remove the editor attribute of the first column. When adding the editor attribute, add the attribute of the first column.

// Extended datagrid: add and delete editor dynamically $. extend ($. fn. datagrid. methods, {addEditor: function (jq, param) {if (param instanceof Array) {$. each (param, function (index, item) {var e = $ (jq ). datagrid ('getcolumnoption ', item. field); e. editor = item. editor ;}) ;}else {var e =$ (jq ). datagrid ('getcolumnoption ', param. field); e. editor = param. editor ;}, removeEditor: function (jq, param) {if (param instanceof Array) {$. each (param, function (index, item) {var e = $ (jq ). datagrid ('getcolumnoption ', item); e. editor ={};}) ;}else {var e =$ (jq ). datagrid ('getcolumnoption ', param); e. editor = {};}}});

Call:

Remove:

$ ("# Dg"). datagrid ('removeedit', 'cardno'); // here, cardNo is the field value of the column to be removed from the editor.

Add:

$ ("# Dg "). datagrid ('addiditor ', [// Add cardNo column editor {field: 'cardno', editor: {type: 'textbox', options: {required: true, validType: 'length [3, 3] ', invalidMessage:' enter a 3-digit number! '}}}]

Other operations can be expanded accordingly.