checkbox控制Input是否可以用以及下拉框的级联——easyUI
实现的功能是:1、点击“是否替换”控制input(关联工序)是否可用,
2、点击机种后点击关联工程才会查询出数据(并且是根据机种的ID),关联工序是根据关联工程!
机种——>关联工程——>关联工序******他们三个是级联关系,
<tr>
<td class='inLabel' width="40px">机种:</td><td width="240px">
<input id="input_add_opProcesses_jizhong" data-options="editable:false"
class="easyui-combobox" width="100%" >
</td>
</tr>
<tr>
<td class='inLabel' width="40px">关联工程:</td>
<td width="240px">
<input id="input_add_opProcesses_engineering" data-options="valueField:'id',textField:'text',editable:false"
class="easyui-combobox" width="100%" >
</td>
</tr>
<tr>
<td class='inLabel' width="40px"></td>
<td width="240px">
<input id="input_add_opProcesses_change" data-options="editable:false" type="checkBox"
width="100%" οnclick="change()" >是否替换<br/>
</td>
</tr>
<tr id="related_processes">
<td class='inLabel' width="40px">关联工序:</td>
<td width="240px">
<input id="input_add_opProcesses_processes" data-options="valueField:'id',textField:'text',editable:false"
class="easyui-combobox" width='240px' >
</td>
</tr>
JS:
/*
*单选按钮选中事件
*/
function change(){
console.log($('#input_add_opProcesses_change').attr('checked'));
if($('#input_add_opProcesses_change').attr('checked') == 'checked'){
$('#input_add_opProcesses_processes').combobox({disabled:true});
$('#input_add_opProcesses_change').removeAttr('checked');
}
else{
$('#input_add_opProcesses_processes').combobox({disabled:false});
$('#input_add_opProcesses_change').attr('checked','checked');
//当是否替换勾上了,才去数据库中查询关联工序的数据!!!!!!!
var machineTypeId=$("#input_add_opProcesses_jizhong").combobox('getValue');
var engineeringId=$("#input_add_opProcesses_engineering").combobox('getValue')
$('#input_add_opProcesses_processes').combobox({
url:'${pageContext.request.contextPath}/Processes/getAllProcesseslist?machineTypeId='+machineTypeId + '&eneeringId='+ engineeringId,
panelHeight:'auto',
});
}
}
/*
* 下拉框级联
*/
$('#input_add_opProcesses_jizhong').combobox({
url:'${pageContext.request.contextPath}/machineType/getAllMachineTypelist',
panelHeight:'auto',
onChange:function(machineId){
$('#input_add_opProcesses_engineering').combobox({
url:'${pageContext.request.contextPath}/Engineering/getAllEngineeringlist?machineTypeId='+machineId,
panelHeight:'auto',
onChange:
function(eneeringId){
//当当是否替换勾上了,才去数据库中查询关联工序的数据!!!这里是以防用户上来就勾上替换,然后去选择机种、工程后再去选择工序时不会去查询数据库!!!!
if($('#input_add_opProcesses_change').attr('checked') == 'checked'){
$('#input_add_opProcesses_processes').combobox({
url:'${pageContext.request.contextPath}/Processes/getAllProcesseslist?machineTypeId='+machineId + '&eneeringId='+ eneeringId,
panelHeight:'auto',
});
}
}
});
}
});
$(function(){
$('#input_add_opProcesses_processes').combobox({disabled:true});
/**
*机种下拉框默认选择了第一值
*/
$('#input_add_opProcesses_jizhong').combobox({
url:'${pageContext.request.contextPath}/machineType/getAllMachineTypelist',
valueField:'id',
textField:'text',
onLoadSuccess: function (data) {
if (data) {
$('#input_add_opProcesses_jizhong').combobox('setValue',data[0].id);
}
}
});
$("#input_add_opProcesses_opProcesses").focus();
});