首页
所有分类
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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
jQuery取得元素标签名称小结（附代码）
Aug 16 jQuery
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue实现搜索过滤效果
May 28 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JS异步宏队列微队列原理详解
Sep 09 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) EventBus(1) 多线程(6) Spring Boot(5) Sqlite(2) Spring-Retry(1) TcpServer(1) Fragment(1) ICF-5900W(2) muduo(1)
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
PHP webshell检查工具 python实现代码
2009/09/15 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python微信库:itchat的用法详解
2017/08/14 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
django queryset相加和筛选教程
2020/05/18 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
Sneaker Studio法国：购买运动鞋
2018/06/08 全球购物
单位门卫岗位职责
2013/12/20 职场文书
在校生自我鉴定
2014/01/23 职场文书
出国导师推荐信
2015/03/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript