我在项目中设计课程表的时候需要用到老师和分类之间的多级联动。
首先是一张效果图：
下面是实现的代码：
<body> <script type="text/javascript">
$(function(){
var editing ; //判断用户是否处于编辑状态
var flag ; //判断新增和修改方法
$('#set_schedule').datagrid({
idField:'id' ,
fitColumns: false ,
url:'scheduleAction_loadScheduleData.action?sureDocumentId='+$("#sureDocumentId").val() ,
striped: true ,
loadMsg: '数据正在加载,请耐心的等待...' ,
rownumbers:true ,
singleSelect : true,
frozenColumns:[[ {field:'ck' , checkbox:true}
]], columns:[[ { field:'dateTime' ,
title:'时间' ,
width:100 , align:'center' ,
editor:{ type:'datebox' ,
options:{ required:true ,
missingMessage:'时间必填!' ,
editable:false
} } }, { field:'morningTime' ,
title:'上午上课时间段' ,
width:126 , align:'center',
editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'时间段必填!'
} } }, { field:'morningCourse' ,
title:'上午课程' ,
width:100 , editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'课程必填!'
} } }, { field:'aa1' ,
title:'主讲老师分类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?parentId=0&type=27',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'aa1'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb1'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'codeTypeAction_search.action?type=28&parentId='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'bb1' ,
title:'主讲老师细类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?type=28',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb1'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'morningTeacherId'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'teacherAction_search.action?teacherTypeId2='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'morningTeacherId' ,
title:'主讲老师' ,
width:100 , editor : { type : 'combobox',
options : { url:'teacherAction_search.action',
valueField:'id' ,
textField:'name'
} } }, { field:'afternoonTime' ,
title:'下午上课时间段' ,
width:126 , align:'center' ,
editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'时间段必填!'
} } }, { field:'afternoonCourse' ,
title:'下午课程' ,
width:100 , editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'课程必填!'
} } }, { field:'aa2' ,
title:'主讲老师分类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?parentId=0&type=27',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'aa2'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb2'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'codeTypeAction_search.action?type=28&parentId='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'bb2' ,
title:'主讲老师细类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?type=28',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb2'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'afternoonTeacherId'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'teacherAction_search.action?teacherTypeId2='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'afternoonTeacherId' ,
title:'主讲老师' ,
width:100 , editor : { type : 'combobox',
options : { url:'teacherAction_search.action',
valueField:'id' ,
textField:'name'
} } }, { field:'eveningTime' ,
title:'晚上上课时间段' ,
width:126 , align:'center' ,
editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'时间段必填!'
} } }, { field:'eveningCourse' ,
title:'晚上课程' ,
width:100 , editor:{ type:'validatebox' ,
options:{ required:true ,
missingMessage:'课程必填!'
} } }, { field:'aa3' ,
title:'主讲老师分类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?parentId=0&type=27',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'aa3'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb3'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'codeTypeAction_search.action?type=28&parentId='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'bb3' ,
title:'主讲老师细类' ,
width:100 , editor : { type : 'combobox',
options : { url:'codeTypeAction_search.action?type=28',
valueField:'id' ,
textField:'name',
onSelect:function(data){
var row = $('#set_schedule').datagrid('getSelected');
var rowIndex = $('#set_schedule').datagrid('getRowIndex',row);//获取行号
var thisTarget = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'bb3'}).target;
var value = thisTarget.combobox('getValue');
var target = $('#set_schedule').datagrid('getEditor', {'index':rowIndex,'field':'eveningTeacherId'}).target;
target.combobox('clear'); //清除原来的数据
var url = 'teacherAction_search.action?teacherTypeId2='+value;
target.combobox('reload', url);//联动下拉列表重载
} } } }, { field:'eveningTeacherId' ,
title:'主讲老师' ,
width:100 , editor : { type : 'combobox',
options : { url:'teacherAction_search.action',
valueField:'id' ,
textField:'name'
} } } ]] , pagination: true ,
pageSize: 10 , pageList:[5,10,15,20,50] , toolbar:[ { text:'新增课程',
iconCls:'icon-add' ,
handler:function(){
if(editing == undefined){
flag = 'add';
//1 先取消所有的选中状态 $('#set_schedule').datagrid('unselectAll');
//2追加一行 $('#set_schedule').datagrid('appendRow',{description:''});
//3获取当前页的行号 editing = $('#set_schedule').datagrid('getRows').length -1;
//4选中并开启编辑状态 $('#set_schedule').datagrid('selectRow',editing);
$('#set_schedule').datagrid('beginEdit', editing);
} } }/* ,{
text:'修改课程', iconCls:'icon-edit' , handler:function(){ var arr = $('#set_schedule').datagrid('getSelections'); if(arr.length != 1){ $.messager.show({ title:'提示信息', msg:'只能选择一条记录进行修改!' }); } else { if(editing == undefined){ flag = 'edit'; //根据行记录对象获取该行的索引位置 editing = $('#set_schedule').datagrid('getRowIndex' , arr[0]); //开启编辑状态 $('#set_schedule').datagrid('beginEdit',editing); } } } } */,{
text:'保存课程',
iconCls:'icon-save' ,
handler:function(){
//保存之前进行数据的校验 , 然后结束编辑并师傅编辑状态字段 if($('#set_schedule').datagrid('validateRow',editing)){
$('#set_schedule').datagrid('endEdit', editing);
editing = undefined; } } },{ text:'删除课程',
iconCls:'icon-remove' ,
handler:function(){
var arr = $('#set_schedule').datagrid('getSelections');
if(arr.length <= 0 ){
$.messager.show({ title:'提示信息',
msg:'请选择进行删除操作!'
}); } else {
$.messager.confirm('提示信息' , '确认删除?' , function(r){
if(r){
var ids = '';
for(var i = 0 ; i < arr.length ; i++){
ids += arr[i].id + ',';
} ids = ids.substring(0,ids.length-1); $.post('scheduleAction_delete.action' , {ids:ids},function(result){
$('#set_schedule').datagrid('reload');
$.messager.show({ title:'提示信息',
msg:'操作成功!'
}); }); } else {
return ;
} }); } } },{ text:'取消操作',
iconCls:'icon-cancel' ,
handler:function(){
//回滚数据 $('#set_schedule').datagrid('rejectChanges');
editing = undefined; } } ] , onAfterEdit:function(index , record){
var data = $('#moduleform').serialize();
$.post(flag=='add'?'scheduleAction_addSchedule.action?'+data:'scheduleAction_updateSchedule.action' , record , function(result){
var data = $.parseJSON(result);
$('#set_schedule').datagrid('reload');
$.messager.show({ title:'提示信息',
msg:data.message }); },'text');
} }); }); </script> <form id="moduleform" method="post">
<s:hidden name="sureDocumentId" id="sureDocumentId"></s:hidden>
<table cellspacing="1" cellpadding="5" class="tb_background2" width="100%">
<tr> <td width="20%" class="td_right">总学时：</td>
<td width="28%" class="td_left">
<s:textfield name="totalLearnTime" id="totalLearnTime" size="32"/>学时
</td> <td width="20%" class="td_right">是否可见：</td>
<td width="28%" class="td_left">
<s:select list="#{'0':'可见','1':'不可见' }" cssStyle="width:200px;" name="type" id="type"></s:select>
</td> </tr> </table> </form> <table id="set_schedule"></table>
</body>