首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现多级联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

我爱喝可乐

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
全面解析Bootstrap表单使用方法（表单样式）
Nov 24 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
javascript History对象原理解析
Feb 17 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
Post(1) 条码(1) JDBC(3) 日志(1) 二维码(2) openGauss(1) Get(1) 延时任务(1) Word(2) 太阳码(1)
You might like
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php文件缓存方法总结
2016/03/16 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
vue.js初学入门教程（2）
2016/11/07 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
node.js通过url读取文件
2020/10/16 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python实现滑雪者小游戏
2020/02/22 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Champion官网：美国冠军运动服装
2017/01/25 全球购物
阿联酋网上花店：Ferns N Petals
2018/02/14 全球购物
Clarks鞋澳大利亚官方网站：Clarks Australia
2019/12/25 全球购物
写好自荐信的要点
2013/11/06 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
学校通报表扬范文
2015/05/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
毕业实习单位意见
2015/06/04 职场文书
公务员的复习计划书，请收下！
2019/07/15 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server