Jquery使用多个组合框进行内联编辑

时间:2015-04-24 06:06:36

标签: jquery

有一个easyui jquery数据网格支持内联编辑。该行有4个要编辑的字段,两个文本框和两个组合框。两个文本框甚至一个组合框编辑工作正常。

但是在编辑另一个组合框时,组合框之间会出现冲突,结果不合适。 ie)在一个下拉列表中选择的值在另一个下拉列表中设置。

看起来有些配置问题,但无法找出确切的根本原因。

任何人都可以指出一些方向,我可以找到一些例子,其中两个或多个组合框用于内联编辑。

以下是代码段。这是我的数据网格。



<table id="result_grid" class="easyui-datagrid" 
   data-options="url:'conf.json',method:'get',onClickCell: onClickCell">
	<thead>
		<tr>
			<th data-options="field:'gen',editor:'numberbox'">Generation</th>
			<th data-options="field:'comments',editor:'textbox'">Comments</th>
			<th data-options="field:'id',
						formatter:function(value,row){
							return row.txt;
                        },
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'id',
                                textField:'txt',
                                method:'get',
                                url:'nonCache.json',
                                required:true								
                            }
                        }">Nonvolatile Cache</th>
			<th data-options="field:'id',
						formatter:function(value,row){
							return row.txt;
                        },
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'id',
                                textField:'txt',
                                method:'get',
                                url:'mktName.json',
                                required:true								
                            }
                        }">Marketing Name</th>
		</tr>
	</thead>
</table>
&#13;
&#13;
&#13;

这是从jquery(Jquery demo)示例中获取的相应java脚本。

&#13;
&#13;
var editIndex = undefined;
function endEditing() {
	if (editIndex == undefined) {
		return true;
	}
	if ($('#result_grid').datagrid('validateRow', editIndex)) {
		var ed = $('#result_grid').datagrid('getEditor', { 
          index : editIndex, field : 'id' 
        });
		var txt = $(ed.target).combobox('getText');
		$('#result_grid').datagrid('getRows')[editIndex]['txt'] = txt;
		$('#result_grid').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickCell(index, field) {
	if (editIndex != index) {
		if (endEditing()) {
			$('#result_grid').datagrid('selectRow', index).datagrid('beginEdit', index);
			var ed = $('#result_grid').datagrid('getEditor', {index : index, field : field});
			($(ed.target).data('textbox') ? $(ed.target).textbox('textbox')
					: $(ed.target)).focus();
			editIndex = index;
		} else {
			$('#result_grid').datagrid('selectRow', editIndex);
		}
	}
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

easyui jquery演示页面中给出的代码段不正确。可以从Github code获取正确的代码。

我已经编辑了endEditing函数,如下所示,

组合1:

var ed = $('#ana_rev_grid').datagrid('getEditor', {
    index : editIndex,
    field : 'mktNameId'
});
$('#ana_rev_grid').datagrid('getRows')[editIndex]['mktNameTxt'] = $(
                ed.target).combobox('getText');

组合2:

var ped = $('#ana_rev_grid').datagrid('getEditor', {
    index : editIndex,
    field : 'prodTypeId'
});
$('#ana_rev_grid').datagrid('getRows')[editIndex]['prodTypeTxt'] = $(
                ped.target).combobox('getText');