Datagrid的行内编辑，Combobox的级联。

 

选择一个省份，市区的信息会发生相应的变化。主要是第一个combobox的值发生变化的时候，访问服务器，获得数据并赋值给第二个combobox,获取数据就是一个ajax时间，在第一个combobox中获得第二个combobox对象：

.$.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid('getEditor',{
index:$rowIndexForAddress,//当前正在编辑的行的index
field:'country',//第二个combobox的列名
});
$(ed.target).combobox('clear');
$(ed.target).combobox('loadData',data);
},'json');

$rowIndexForAddress可以在onbeforeedit中获得， 在onafteredit中清空。
2. $.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){
var row = $("#"+frm+" #addresstest").datagrid('getSelected');
var rindex = $("#"+frm+" #addresstest").datagrid('getRowIndex', row);
var ed = $("#"+frm+" #addresstest").datagrid('getEditor', {
index : rindex,
field : 'country',
});
$(ed.target).combobox('clear');
$(ed.target).combobox('loadData', data);
},'json');
推荐第一种方法。第二种方法有bug,问题存在这一句上：var row = $("#"+frm+" #addresstest").datagrid('getSelected'); datagrid中有两条数据，你修改了第一条，第一条处于编辑状态， 你再点击第二条。然后再回到第一条。这个时候 row是第二条， index是1（本应该是0）；

{field:'province',title:'省份',align:'center',width:100,
editor:{
type:'combobox',
options:{
valueField:'code',
textField:'name',
editable:false,
panelHeight:'100',
required:true,
queryParams:{parentid:'0'},
url:ctx+'region/ajaxRegionList.html',
onChange:function(newValue,oldValue){
$.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid('getEditor',{
index:$rowIndexForAddress,
field:'country',
});
$(ed.target).combobox('clear');
$(ed.target).combobox('loadData',data);
},'json');
},
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox('options');
return row[opts.textField];
},
onSelect:function(record){
$protext=record.name;
},
}},
},
{field:'country',title:'市区',align:'center',width:100,
editor:{
type:'combobox',
options:{
valueField:'code',
textField:'name',
editable:false,
panelHeight:'100',
required:true,
onChange:function(newValue,oldValue){
$.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){
var ed=$("#"+frm+"#addresstest").datagrid('getEditor',{
index:$rowIndexForAddress,
field:'street',
});
$(ed.target).combobox('clear');
$(ed.target).combobox('loadData',data);
},'json');
},
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox('options');
return row[opts.textField];
},
onSelect:function(record){
$citytext=record.name;
},
}},
},
{field:'street',title:'街道',align:'center',width:100,
editor:{
type:'combobox',
options:{
valueField:'code',
textField:'name',
editable:false,
panelHeight:'100',
required:true,
onLoadSuccess:function(){
var target=$(this);
var data=target.combobox("getData");
var options=target.combobox("options");
if(data&&data.length>0){
var fs=data[0];
target.combobox("setValue",fs[options.valueField]);
}
},
formatter:function(row){
var opts=$(this).combobox('options');
return row[opts.textField];
},
onSelect:function(record){
$streettext=record.name;
$countyId=record.code;
}
}}
},
{field:'addressInfo',title:'详细地址',align:'center',width:250,
editor:{
type:'validatebox',
options:{
validtype:'lenx[50]',
required:true,
}
},
},

转载于:https://www.cnblogs.com/zhipfang/p/5714828.html