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

最新推荐文章于 2024-08-14 08:41:12 发布
最新推荐文章于 2024-08-14 08:41:12 发布
阅读量6.2k 收藏 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>


我爱喝可乐
关注
专栏目录
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
easyui的datagrid中editor和combobox的级联
03-09
easyui的datagrid中editor和combobox的级联，在datagrid中编辑项是下拉框的实现方式
WPF篇（18）-DataGrid数据表格控件+ComboBox下拉框控件
最新发布
一个人的江湖
08-14 1488
第二个则绑定了一个数据源，并在Xaml中指定了DisplayMemberPath属性显示Person的Name，最后在后端代码中，依然使用SelectedItem 属性获取当前选中项，转化成Person，以获取实际的选中数据。ComboBox表示带有下拉列表的控件，实际上可以把它看成两个部分组成，一个类似TextBox文本输入框，所以它有一个Text文本属性，用于获取ComboBox框的文本值，另一个是类似ListBox的列表框，用于显示ComboBox绑定的所有数据源。这样的话，当鼠标双击时会报错。
Easyui-datagrid行编辑的combobox联动
studying0419的博客
02-24 1894
已知datagrid行编辑的两列，分别为‘查询字段’-queryterm、'查询条件'-querycondition。 要求实现：每选中一个‘查询字段’，‘查询条件’下拉选的内容重新填充，填充为当前查询字段对应的查询条件。行编辑每增加一行，都实现此功能。 1.‘查询字段’的datagrid-column实现：每点击此下拉选，当前选中的字段清空，重新选择查询字段 2.‘查询条件’的da
easyui datagrid中关联combox
weixin_30576859的博客
02-09 131
datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: 'combobox', options: ...
jQuery EasyUI与Combobox实现Datagrid多级联动教程
标题“回传工具-jquery easyui编辑datagrid用combobox实现多级联动”虽然没有直接在给定内容中出现，但根据标题，我们可以推测这可能是讲解如何在易用的前端框架jQuery EasyUI中，利用ComboBox组件构建一个具有多级...
IoTDB查询教程：使用jQuery EasyUI实现多级联动与统计查询
"全局写入成功数查询执行结果-jquery easyui编辑datagrid用combobox实现多级联动" 在IoTDB数据库系统中，全局写入成功数是指系统成功存储的数据点总数。这个统计数据对于监控系统的运行状态和数据完整性至关重要。...
IoTDB权限管理：jQuery easyUI在datagrid中的应用
"权限管理-jquery easyui编辑datagrid用combobox实现多级联动" 在IoTDB（物联网数据库）中，权限管理是确保数据安全的重要机制。IoTDB为用户提供了一系列的权限操作，允许用户对数据进行访问控制。这些权限操作包括...
IoTDB数据库实战：多级联动监控发电厂数据
"该文主要介绍了如何在jQuery EasyUI的编辑datagrid中使用combobox实现多级联动的效果，以及一个基于IoTDB数据库的电力部门监控系统案例，包括场景描述、样例数据及其相关数据模型和操作。" 在jQuery EasyUI中，...
easyUI datagrid的combobox的联动效果
xzf_java133的专栏
09-09 4389
最近做项目，大量用到easyui datagrid的方法，也学到了不少东西，先记录下来，方便以后查找 combobox的联动效果和赋值旁边的表格 {field:'joinUnitName',title:'培训队伍',width:120,align:'center',                         formatter:function(value, row){      
easyUI combobox实现联动效果
12-28
我在做项目时，经常用到easyUI框架，今天总结一下easyUI中的combobox吧 创建easyui-combobox的方法，在easyUI的官网都有： 1、从带有预定义结构的 元素创建组合框（combobox） <select id=cc class=easyui-combobox name=dept style=width:200px;> <option value=aa>aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option>
easyUI使用datagrid-detailview.js实现多级级列表嵌套
weixin_30553837的博客
03-21 289
转载请注明出处： 注意事项： 　　原本在谷歌浏览器进行示例测试的，url请求对应的json文件，效果一直显示不出来，换到谷歌和IE是可以正常显示的， 解决方法可参考：http://www.cnblogs.com/shunzdd/p/5585990.html 其中的请求url对应的json文件封装的数据格式如下： 相关属性可参考该博客：https://www.cnblogs.com/cnj...
easyui datagrid 中添加combobox
weixin_30608131的博客
07-05 540
项目需要，如下图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - jQuery EasyUI Demo</title> <link rel="styles...
easyui datagrid combobox下拉框获取数据问题
weixin_34401479的博客
03-23 298
最近在使用easyui的datagrid，在可编辑表格中添加一个下拉框，查了下API，可以设置type : 'combobox',来做下拉框，这下拉框是有了，可是这后台数据怎么传过来呢，通过查API可以知道，设置URL属性就能从一个URL远程站点请求数据，或者设置data属性也行，但是本人两种方式都试了，这个数据就是现实不出来，原来是因为data这里需要放一个json格式的数据才行，我之前放的也是...
Easyui DataGrid combobox联动下拉框内容
qq_29950673的博客
11-11 1669
发票信息下拉框联动，更具不同的发票类型，显示不同的税率。
.net easyUI datagrid的combobox的联动效果 动态加载下拉数据
weirtang的专栏
08-02 1103
&lt;script&gt;         var screenData = @Html.Raw(ViewData["ScreenData"]);//第一级数据，页面初始化时加载数据         var screenPos;         //同步获取子数据         function getScreenFeild(screenId) {             $.ajax({ ...
Easyui—datagrid嵌套四层
qq_38567182的博客
01-20 798
关于Easyui 多层datagrid 列表数据 应用场景：如查询一个省有多少城市？一个城市有多少县区？一个县区多少乡镇。 用列表展示出来，并很直观感受出来 效果展示 <div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;"> <div st
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值