Column editor attribute in datagrid

[officecode]

I am now trying to automatically generate a non-hidden column form by clicking on the row in the datagrid. Since some columns have editors set up, some don't, so I use eval to generate them dynamically.
The sample code is as follows:

Code:

        var frm = $('#dlg>form');
	var fields = $('#test').datagrid('getColumnFields');
	fields.forEach(function(v){
		var col = $('#test').datagrid('getColumnOption',v);
                if(col.title && !col.hidden){
			var el = '<p><input id="' + v + '" name="' + v + '"></p>';
			$(el).appendTo(frm);
			if(col.editor){
				var comp = "$('#' + v).";
				if(typeof col.editor == 'string'){
					comp += col.editor;
                                }else{
					comp += col.editor.type;
                                }
				comp += "({label:'" + col.title + "',labelAlign:'right',[b]onChange:function(){}[/b]})"
				eval(comp);
                        }else{
				$('#' + v).textbox({label:col.title,labelAlign:'right',disabled:true})
                        }
		}
	});
	frm.children('p').css('float','left');
	frm.form('load',row);

But there is a problem with this: if you add the onChange event code to eval, it's too complicated. The key is, in the onChange event, how to call the setValue method of the datagrid editor component? My goal is to fill the data into the editor once the form data has changed.
I really don't want to use eval. Is there any better way to solve this problem? Looking forward to your help, thank you!

[stworthy]

Please refer to this example http://code.reloado.com/akahad/edit#preview

[officecode]

Well, this example gave me a lot of inspiration, thank you.
But the question is, how do I write code in the form's onChange event? Because, to assign the value in input to the cell in the datagrid, you still need to get the editor of the datagrid column, otherwise you can not use the editor's setValue method.

[stworthy]

You can attach the 'onChange' event on each field component.

Code:

var opts = {
	label: col.title,
	labelAlign: 'right',
	width: '100%',
	field: field,
	onChange: function(value){
		//...
	}
}

Or retrieve the editor value in the form component.

Code:

frm.form({
	onChange:function(target){
	  var editor = $(target);
	  //...
	}
})

[officecode]

You can attach the 'onChange' event on each field component.
Or retrieve the editor value in the form component.

I understand this.
The key is how to use the setValue method, because I have to know the type of the editor.

Code:

frm.form({
	onChange:function(target){
		  var editor = $(target);
   		  var v = $(target).val();
		  //How to write the value of this variable v to the datagrid editor through the setValue method?
	}
})

Sorry, my English is not good, I don't know if you understand what I mean, thank you.

[stworthy]

Please look at this example http://code.reloado.com/akahad/2/edit#preview

[officecode]

Please look at this example http://code.reloado.com/akahad/2/edit#preview

This example is very good, thank you for your reply.
I also tested for a long time, as if it was more difficult to handle in the form's onChange event.
There is a suggestion: if possible, add a field attribute to all form components to directly bind fields in the datagrid. This property not only automatically inherits the column properties in the datagrid, but also makes synchronous modifications on the data.