首页
所有分类
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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
Javascript 面向对象（一）(共有方法，私有方法，特权方法)
May 23 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
微信小程序防止多次点击跳转（函数节流）
Sep 19 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
有序排列(1) 公共键(1) python-pcl(1) kafka(2) pycryto(1) 数据加密(1) shell脚本(1) 连接器(1) key(1) 遍历文件夹(1)
You might like
php下封装较好的数字分页方法
2010/11/23 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Python高级应用实例对比：高效计算大文件中的最长行的长度
2014/06/08 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python实现的桶排序算法示例
2017/11/29 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
导入tensorflow时报错：cannot import name 'abs'的解决
2019/10/10 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
Madewell澳大利亚官方网站：美国休闲服饰品牌
2019/07/18 全球购物
俄罗斯Sportmarket体育在线商店：用于旅游和户外活动
2019/11/12 全球购物
Clos19英国：高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
什么时候用assert
2015/05/08 面试题
幼儿园安全责任书
2014/04/14 职场文书
分公司任命书
2014/06/06 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
夫妻分居协议书范本（有子女版）
2014/11/01 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python