2015-04-24 38 views
0

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

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

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

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

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

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

这是从jquery的(Jquery demo)例如采取了相应的Java脚本。

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

回答

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'); 
相关问题