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

最新推荐文章于 2023-11-11 16:57:18 发布
最新推荐文章于 2023-11-11 16:57:18 发布
阅读量6.1k 收藏 5
点赞数 3
分类专栏： Jquery-EasyUi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoshili001/article/details/52334700
版权

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

首先是一张效果图：


下面是实现的代码：

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


我爱喝可乐
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui的datagrid中editor和combobox的级联
05-05
easyui的datagrid中editor和combobox的级联。
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
easyui datagrid列表中增加combobox下拉框
weixin_44550562的博客
02-21 2052
需求 列表中最后一列增加下拉框，在选择该行的时候，获取该行的所有数据（包括下拉框的内容） 实现 1、以下代码中，技能组级别字段设置为下拉框，但是没有设置列表为可编辑，所以该字段无法展示下拉效果 var level = [{ "level-value": 0, "level-name": "高"}, { "level-value": 1, "level-name": "中" }, { "level-...
在EasyUI的DataGrid中嵌入Combobox
点滴汇聚，智在积累。——Danny
06-30 1万+
当选择了Combobox中的值时，只需要把将要执行的操作写在onAfterEdit(index, row, changes)函数中即可，index为编辑的行号，默认从0开始；row为被编辑单元格所在的整个行，row.列名可以获得此行此列的数据，如row.IsShow可以获得被编辑单元格所在行的IsShow列的数据。
EasyUI-----给combobox添加OnSelect事件
热门推荐
zhoukun@Fly
12-20 6万+
接手ITOO_Basic系统好长时间了，很想自己实现一个功能，以前听光哥说咱选课这一块听说数据不同步，于是自己想解决这个问题。     具体的问题如下     选课表中的数据是手动添加到数据库中去的，没有代码实现，基础系统的所有的课程都存在一张表中，其中表中的课程性质分为公共选修，公共必修，专业选修、专业必修，但是公共选修课的性质又分为人文社科、艺术体育、自然科学，但是这些字段根本在数据库中没
easyui datagrid combobox 默认值的设置
MeterJory的博客
05-17 4887
{ field: 'goods_status', title: '货物状态', align:'center',width:"80px",sortable:false,editor:'text', formatter:function(value,row){ return row.goo...
datagrid里边的combobox获取当前row的索引（总结于EasyUI中文社区群讨论）
BruceOuyang 的专栏
08-03 4421
datagrid里边的combobox获取当前row的索引
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
09-03
主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下
easyui 可编辑datagrid完整例子，支持filebox
02-17
easyui 可编辑datagrid完整例子，支持filebox 项目中的数据库使用的是mysql，内置sql脚本，执行脚本即可创建数据
easyui datagrid editor combogrid和combobox
09-27
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
.net easyUI datagrid的combobox的联动效果 动态加载下拉数据
weirtang的专栏
08-02 1033
&lt;script&gt;         var screenData = @Html.Raw(ViewData["ScreenData"]);//第一级数据，页面初始化时加载数据         var screenPos;         //同步获取子数据         function getScreenFeild(screenId) {             $.ajax({ ...
easyUI datagrid的combobox的联动效果
xzf_java133的专栏
09-09 4320
最近做项目，大量用到easyui datagrid的方法，也学到了不少东西，先记录下来，方便以后查找 combobox的联动效果和赋值旁边的表格 {field:'joinUnitName',title:'培训队伍',width:120,align:'center',                         formatter:function(value, row){      
jquery easyui使用combobox,datagrid,layout实例(标签实现)
qq_33134065的博客
01-08 548
使用easyui实现的录入页面(静态)，datagrid使用html标签显示，下一篇再放上js版。 html页面： js引用：jquery-1.8.0.min.js,easyui.min.js,easyui-lang-zh_CN.js,不需要loader的可不要easyloader.js 复制代码 补录杂费
Easyui DataGrid combobox联动下拉框内容
qq_29950673的博客
11-11 1405
发票信息下拉框联动，更具不同的发票类型，显示不同的税率。
easyUI--datagrid
szzt_lingpeng的专栏
06-16 1076
1.       数据表格:DataGrid a)       模版: // 加载datagrid    $("#datagridModel").datagrid({       url : '/personnel/customerAction!datagrid.action',       title : 'datagridModel',       iconCls : 'icon-
easyui datagrid 新建行中combobox选择不同的值时disabled不同的textbox
yuhuamei的博客
02-15 266
easyui datagrid 新建行中combobox选择不同的值时disabled不同的textbox
Easyui里的datagrid嵌入select下拉框
weixin_41420919的博客
09-15 1373
想使用datagird里嵌入select下拉框，并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。
easyui自定义标签datagrid edit combobox手动输入保存不上
最新发布
01-17
easyui的自定义标签datagrid edit combobox组件是一个常用的下拉框编辑组件，它可以方便地进行数据的选择和编辑操作。但是有时候会遇到一个问题，就是手动输入的值保存不上的情况。 造成这个问题的原因有多种可能，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值