Datagrid editors in form

[mazvv]

I try to use datagrid with editors in form to save data using post method. My code is:

Code:

<form action="my_url" method="post">
<div class="easyui-panel container" border="false"> 
	<table class="easyui-datagrid" border="false" checkOnSelect="false" selectOnCheck="false"
			singleSelect="true" rownumbers="true" idField="_features_rid" style="height:240px"
			data-options="onSelect:function(rowIndex, rowData){
				$(this).datagrid('beginEdit', rowIndex);
				var ed = $(this).datagrid('getEditor', {index:rowIndex,field:'_features_values_rid'});
				$(ed.target).combobox({
					name:'test[]',
					valueField:'rid',
					textField:'value',
					url:'<?php echo site_url('be/be_features_values/do_dropdown')?>',
					multiple:true,
					width:250,
					onBeforeLoad:function(param){param.rid=rowData._features_rid;}
				});
				$(ed.target).combobox('reload');
			}"
			url="<?php echo site_url('be/be_cars_modifications/do_features/'.($rid?$rid:''));?>">
		    <thead>  
		        <tr>  
					<th field="name" width="150" sortable="false"><?php echo lang('be_cars_modifications_feature_name')?></th>
		        	<th field="_features_values_rid" width="260" sortable="false" data-options="formatter:function(value,row,index){return row.value;},editor:{type:'combobox'}"><?php echo lang('be_cars_modifications_feature_value')?></th>
		        </tr>  
		    </thead>
	</table>
</div>
</form>

this code works fine. But when i try submit form post data is empty. As I see controls from editors are hidden inputs without names. How I can set names for editors controls to post data by submiting form?
Thank you.

[stworthy]

Here is the better solution to post your changed records to server.
End all your editing records, get all these changed records and then post them to server. The code looks like this:

Code:

// call 'endEdit' method to end all your editing records
var params = {};
var rows = $('#dg').datagrid('getChanges','updated');
for(var i=0; i<rows.length; i++){
	var row = rows[i];
	params[row.field] = row.value;
}
$.post(yoururl, params, function(result){
	if (result.success){	// if post successfully, accept changes
		$('#dg').datagrid('acceptChanges');
	}
}, 'json');

[mazvv]

Thanks for quick response.
But your solution is not suitable for me. For some reason I need to have inputs with names from datagrid editors, because this datagrid is a small part of big form with other controls. In my first post I simply have removed other form inputs from code.

[stworthy]

Ok, if you really want to add 'name' property into combobox editor, please override the 'init' function:

Code:

$.extend($.fn.datagrid.defaults.editors.combobox,{
	init: function(container, options){
		options = options || {};
		var combo = $('<input type="text">').attr('name',options.name).appendTo(container);
		combo.combobox(options);
		return combo;
	}
});

Now define the 'combobox' editor with 'name' property, just like this:

Code:

<th field="...", data-options="
		editor:{
			type:'combobox',
			options:{
				name:'test[]',
				valueField:'rid',
				textField:'value',
				url:'<?php echo site_url('be/be_features_values/do_dropdown')?>',
				multiple:true,
				width:250,
				onBeforeLoad:function(param){param.rid=rowData._features_rid;}
			}
		}
	">...</th>

[mazvv]

I have find very simple solution

Code:

<div class="easyui-panel container" border="false">
	<table class="easyui-datagrid" border="false" checkOnSelect="false" selectOnCheck="false"
			singleSelect="true" rownumbers="true" idField="_features_rid" style="height:240px"
			data-options="onSelect:function(rowIndex, rowData){
				$(this).datagrid('beginEdit', rowIndex);
				var ed = $(this).datagrid('getEditor', {index:rowIndex,field:'_features_values_rid'});
				$(ed.target).combobox({
					editable:false,
					valueField:'rid',
					textField:'value',
					url:'<?php echo site_url('be/be_features_values/do_dropdown')?>',
					multiple:true,
					width:250,
					onBeforeLoad:function(param){param.rid=rowData._features_rid;},
					onSelect:function(record){
						$('<input type=hidden>').attr('name','_features_values_rid['+rowData._features_rid+'][]').val(record.rid).appendTo($(this).parent());
					},
					onUnselect:function(record){
						$(this).parent().find('input[type=hidden][name=\'_features_values_rid['+rowData._features_rid+'][]\'][value='+record.rid+']').remove();	
					}
				});
				$(ed.target).combobox('reload');
			}"
			url="<?php echo site_url('be/be_cars_modifications/do_features/'.($rid?$rid:''));?>">
		    <thead>  
		        <tr>  
					<th field="name" width="150" sortable="false"><?php echo lang('be_cars_modifications_feature_name')?></th>
		        	<th field="_features_values_rid" width="260" sortable="false" data-options="formatter:function(value,row,index){return row.value;},editor:{type:'combobox'}"><?php echo lang('be_cars_modifications_feature_value')?></th>
		        </tr>  
		    </thead>
	</table>
</div>

in onSelect and onUnselect events I simply manage inputs. Seems it's works fine.

PS: Thanks for great support