最近做了一些管理数据库的工作,需要实现在web端的数据库CRUD操作,接触了jQuery EasyUI ,发现这套插件十分好用,几乎可以做到尽量少的js代码,只用html就能实现许多控件的功能。在使用datagrid插件和combobox控件的过程中,我发现仍然需要一些技巧才能实现两个插件的混合使用,即在datagrid中添加combobox控件,并且实现多个combobox控件之间的级联依赖关系,即根据第一个combobox,从而改变第二个combobox的内容。
如图中所示,由于tso_name的值对应不同tso_value和opt_type的值,现在要通过tso_name级联出tso_value和opt_type两个combobox的值,思路很清晰,就是要在选择(onChange())tso_name时,根据tso_name的坐标(index : rindex,field : 'tso_value'),确定所在的行,然后根据选择的内容,在后台数据库中重新查找符合条件的值,加载(reload())到ts_value和opt_type的combobox中。
以下是核心的代码:
<th field="tso_name" width="100" sortable="true"
formatter:function(value,row){
return row.tso_name;
},
editor="{type:'combobox',
options:{
valueField:'tso_name',
textField:'tso_name',
value:'0',
method:'get',
url:'resource_get.php?action=tsoname',//加载tso_name的值
required:true,
onChange: function (newValue, oldValue) {//当combobox改变时
var row = $('#dg').datagrid('getSelected');//获取所选行data
var rindex = $('#dg').datagrid('getRowIndex', row);//获取所选行index
var name = $('#dg').datagrid('getEditor', {//根据坐标获取选择后的combobox的tso_value对象
index : rindex,//纵坐标
field : 'tso_value'//横坐标
});
if(name){
var url = 'resource_get.php?action=tsovalue&tso_name='+newValue;
//传递tso_name更改后的值,获取到级联tso_value的值
$(name.target).combobox('clear');
$(name.target).combobox('reload', url);//重新加载}
var type = $('#dg').datagrid('getEditor', {//opt_type对象
index : rindex,
field : 'opt_type'
});
if(type){
var url = 'resource_get.php?action=opttype&tso_name='+newValue;
//传递tso_name更改后的值,获取到级联opt_type的值
$(type.target).combobox('clear');
$(type.target).combobox('reload', url);//重新加载级联后的内容}
}
}
}">tso_name</th>
<th field="tso_value" width="100" sortable="true" editor="{type:'combobox',
options:{
valueField:'tso_value',
textField:'tso_value',
required:true,
}
}">tso_value</th>
<th field="opt_type" width="100" sortable="true" editor="{type:'combobox',
options:{
valueField:'opt_type',
textField:'opt_type',
required:true,
}
}">opt_type</th>
这样就实现了combox的级联操作。
以下附上实现后的截图,只放上了tso_name关联tso_value: