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 ="";

注意这几个变量的命名范围。