How to implement cascade in row editing of the datagrid ?, Datagrid implementation

How to implement cascade in row editing of the datagrid ?, Datagrid implementation

It is still a cascade problem, but this time, it is in the datagrid, so the difficulty is definitely higher than the cascade in form.

However, as long as you are familiar with the datagrid API, the problem can be easily solved.

The key point is -- editor, which relies on the datagrid to implement the editing function.

Implement current edits first

For example, to edit a column in the datagrid, You need to configure the editor attribute in the column of that column.

The editor configuration can only specify the type, that is, the type of the edit box. It can be the types configured by easyUI such as combobox and datebox.

If you have additional attributes for these edit boxes, you need to configure another options json in the editor, such as options: {data: [{1: 'A'}, {2: 'B'}]}, etc.

After row editing is implemented, cascade can be implemented based on Row editing.

Achieve aviation editing Cascade

Here, let's talk about a specific requirement. For example, there is a drop-down box for accepting and rejecting the content in the editing line. After selecting the drop-down box, you need to enter the reason for rejecting the content. That is to say, if you choose to accept the content, the reason for rejection is that the column cannot be edited.

How can this problem be solved? The idea is still the same as cascade in form, that is, control in the selected (onSelect) event. This is simple, the key is how to get the reason for rejection and set it to uneditable?

Do you still remember the editor mentioned above? The editor we configured can be obtained through the row index + field name.

For example, if the field in the column of the reason for rejection is reason, We can edit the row index editIndex and field to get the editor of the Modified cell.

var editor = $('#dg').datagrid('getEditor', {index:editIndex, field:'reason'})

Later, you can get easyUI components through editor.tar get, such as combobox. Then call combobox. combobox ('disable') to disable that column.

In the previous example of form-Level Association, we can also use similar ideas. We will not go into detail here.

Will this end? Then we only process cascade control in the selected event. What if it is saved and then edited? At this time, the value already exists in the row and does not trigger the onSelect event. How can we complete these steps?

Complete steps

First, check whether the value in the master combobox is denied each time you start editing. If so, set the cascade item to editable. Otherwise, it cannot be edited.

"Edit start" includes the append method and onRowClick method.

Second, each onSelect event of the primary combobox must check whether the selected item is denied. If so, set the cascade item to editable; otherwise, it cannot be edited.

This completes the cascade of row editing in the datagrid.

Digress

In fact, if you are not familiar with the datagrid API, it is too troublesome to implement cascade.

I did not know the editor API before, and then I manually obtained the elements for Cascade,

Statements like this: $ ("[field = 'isout']", $ (". datagrid-body ")). nextAll (). find ('. textbox input: first '). attr ("disabled", "disabled ");

It is really troublesome and error-prone

In the DEV control Grid, can I bind different data sources to each row in the drop-down list? Is to achieve cascading display of the drop-down box in the Grid

I did it before, but it failed.
It is found that the data source in the drop-down column is bound to the column.
If you want to bind different data sources to each row, you can only select a row to replace the data source.
However, once the data source is changed, the selected data changes.

Finally, I got another drop-down box near the column header. The data source in the drop-down box also changes when the row changes. Select data from the drop-down list and copy the data to the drop-down column of the current row.
Because the data source is not bound to a column at this time, the selected data will not be changed.

How to edit the row in the datagrid and change the edit mode of the combobox

Do you have specific code? I chose the first box and the second box for interaction. The key is that I want to implement it. When I select other values in the first box, change the editing method of the second box. It is difficult to use geteditors to view the original post.>