easyui的datagrid中editor和combogrid的结合使用

在easyui中，datagrid是使用频率非常高的一种控件，因此也有了各种各样的功能需求，这里我简单介绍一下我在datagrid中editor类型是combogrid的使用经历。
下面是我的效果图片：
1



2



3



4



点击修改 begineditor，点击完成endeditor。  由于分类 和价格 单位 是一体的，即每一种分类都有与之对应的价格和单位，所以我希望选择分类的时候能够看到相应的价格和单位，分类变了，价格和单位也发生相应的变化。我认为使用combogrid比较合适。
通过官方文档，（http://www.jeasyui.com/documentation/index.php#）

editor

string,objec

ndicate the edit type. When string indicates the edit type, when object contains two properties: type: string, the edit type, possible types are: text,textbox,numberbox,numberspinner, combobox,combotree,combogrid,datebox,datetimebox, timespinner,datetimespinner, textarea,checkbox,validatebox. options: object, the editor options corresponding to the edit type.

 
官方文档说type 可以是combogrid，但是我使用的时候，没有起作用，不知是easyui的版本问题还是什么其他问题。
查了一下资料，扩展了一下：
$.extend($.fn.datagrid.defaults.editors,{
combogrid: {
init: function(container,options){
var input = $('<inputtype="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function(target){
$(target).combogrid('destroy');
},
getValue: function(target){
return $(target).combogrid('getValue');
},
setValue: function(target,value){
$(target).combogrid('setValue', value);
},
resize: function(target,width){
$(target).combogrid('resize',width);
},
}
});
下面是datagrid的field，注意$data是ajax从后台检索的数据。
{field:'reusingClass',title:'分类',align:'center',width:80,
editor:{
type:'combogrid',
options:{
data:$data,
panelWidth:450,
idField:'id',
textField:'name',
required:true,
editable:false,
columns:[[
{field:'id',title:'编号',width:60},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:120},
{field:'unitName',title:'单位',width:100}
]],
}},},
 
这个时候combogrid就可以用了，
我们可以看一下combogrid的定义，idField:'id', textField:'name',这个时候我们选择了分类，datagrid显示的值是idfield对应的id，并不是我们想象中的name.如图所示:

分类显示了编号，这时候我们就需要调整了。
 
Combobox 有一个formatter方法，它可以调整combobox值
{field:'name',title:'名称',width:'24%',editor:{
type:'combobox',
options:{
mode : "remote",
url : getListUrl,
panelWidth : 350,
valueField : "id",
textField : "name",
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
},
}}这样菜品的值就是textfield的值
 
经过调查发现combogrid没有类似的方法，那就要想别的方法了。
1.  可以给combogrid扩展formatter方法。这是一个思路，但我没有成功。
2. 把得到的id转化为名称。
方法1：
{field:'reusingClass',title:'分类',align:'center',width:80,
formatter:function(value){
if(!$data&& $data.length>0  ){
for(vari=0;i<$data.length,i++){
if($data[i].id== value){
return$data[i].name;
}else{return value;}
},
 
方法2：
editor:{
type:'combogrid',
options:{
data:$data,
panelWidth:450,
idField:'id',
textField:'name',
required:true,
editable:false,
columns:[[
{field:'id',title:'编号',width:60},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:120},
{field:'unitName',title:'单位',width:100}
]],
onSelect:function(index,row){
testName = row.name;
testReusingclassesId = row.id;
testPrice = row.price;
testUnitName = row.unitName;
}
}},},
在combogrid中加一个onSelect事件，把需要的值记录下来，在endedit的时候，刷新一下这条记录
onEndEdit：function(index,row)
{       if(testPrice !=""){
row.price = Number(testPrice);
}
if(testUnitName !=""){
row.unit = testUnitName;
}
if(testReusingclassesId !=""){
row.reusingClassId =testReusingclassesId;
}
if(testName !=""){
row.reusingClass = testName;
}
$(" #orderDetailsList").datagrid('refreshRow', index);
testPrice = "";
testUnitName = "";
testReusingclassesId = "";
testName="";
}
注意：var testPrice ="";
var testUnitName ="";
var testReusingclassesId ="";
var testName ="";
注意这几个变量的命名范围。