EasyUI可编辑datagrid用combobox实现多级联动

我在项目中设计课程表的时候需要用到老师和分类之间的多级联动。

首先是一张效果图:


下面是实现的代码:

<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>


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页