logo资料库

easyui的datagrid中editor和combobox的级联.docx

第1页 / 共4页
第2页 / 共4页
第3页 / 共4页
第4页 / 共4页
资料共4页,全文预览结束
Datagrid 的行内编辑,地址的级联。 选择一个省份,市区的信息会发生相应的变化。主要是第一个 combobox 的值发生变化的时 候,访问服务器,获得数据并赋值给第二个 combobox,获取数据就是一个 ajax 时间,在第一 个 combobox 中获得第二个 combobox 对象: 1.$.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, } }, },
分享到:
收藏