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实现多级联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28- 这篇文章主要介绍了省市二级联动小案例讲解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
- 这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25
- 这篇文章主要介绍了jquery插件EasyUI中form表单提交实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-14
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法...2016-04-06- jquery easyui框架提供了创建网页所需要的一切,可以帮助大家建立站点,接下来,通过本文给大家介绍Jquery easyui开启行编辑模式增删改操作,感兴趣的朋友一起学习...2016-01-15
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,需要的朋友参考下吧...2016-02-09- 这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下...2015-12-17
xmlplus组件设计系列之网格(DataGrid)(10)
xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之xmlplus网格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09JQueryEasyUI框架下的combobox的取值和绑定的方法
这篇文章主要介绍了JQueryEasyUI框架下的combobox的取值和绑定的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。...2017-01-26jQuery Easyui datagrid/treegrid 清空数据
这篇文章主要介绍了jQuery Easyui datagridtreegrid 清空数据的相关资料...2016-07-25ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享
这篇文章主要为大家分享了ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之easyui前端页面框架构建源码,感兴趣的小伙伴们可以参考一下...2021-09-22基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等,这些界面控件的操作都有哪些不同,下面逐一介绍...2015-12-18- jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。通过本文给大家介绍JQuery+EasyUI轻松实现步骤条效果,需要的朋友参考下...2016-02-26
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
这篇文章主要介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24