jQuery EasyUI编辑DataGrid用combobox实现多级联动


Posted in Javascript onAugust 29, 2016

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

首先是一张效果图:

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

以上所述是小编给大家介绍的jQuery EasyUI编辑DataGrid用combobox实现多级联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
js 实现验证码输入框示例详解
Sep 23 Javascript
对js中回调函数的一些看法
Aug 29 #Javascript
Web打印解决方案之普通报表打印功能
Aug 29 #Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 #Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 #Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 #Javascript
浅谈js数据类型判断与数组判断
Aug 29 #Javascript
判断js的Array和Object的实现方法
Aug 29 #Javascript
You might like
基于php中使用excel的简单介绍
2013/08/02 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
详解php中 === 的使用
2016/10/24 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
公司出纳岗位职责
2013/12/07 职场文书
旷课检讨书大全
2014/01/21 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
知识竞赛活动方案
2014/02/18 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
2015年母亲节寄语
2015/03/23 职场文书
培养联系人考察意见
2015/06/01 职场文书
教育读书笔记
2015/07/02 职场文书
校运会广播稿
2015/08/19 职场文书
班主任寄语2016
2015/12/04 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS