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

首先是一张效果图：

下面是实现的代码：

<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实现多级联动的更多相关文章

  1. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  2. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  3. jQuery EasyUI 1.4.4 Combobox无法检索中文输入的问题

    在项目里使用了EasyUI的Combobox,当ComboBox的item是英文时,都能正常检索出对应项,但是如果使用中文输入法输入几个字母然后通过按shift键输入时,奇怪的事情发生了,combob ...

  4. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

  5. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  6. jQuery EasyUI之DataGrid使用示例

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...

  7. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  8. jquery easyui的datagrid在初始化的时候会请求两次URL？

    我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...

  9. 给Jquery easyui 的datagrid 每行添加操作链接

    背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...

随机推荐

  1. servlet之request和response的使用区分

    有的时候在写servlet程序时,我总是被一个方法该用request去调用.还是用response去调用而困惑.从而造成编程时间的延长. 我在区分request和response的使用时,使用的方法是 ...

  2. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：2.搭建环境-2.10.配置用户NTF服务

    2.10.配置用户NTF服务 2.10.1.配置节点RAC1 1) [root@linuxrac1 sysconfig]#sed -i 's/OPTIONS/#OPTIONS/g' /etc/sysc ...

  3. 【Android 工具类】经常使用工具类（方法）大全

    收集经常使用的工具类或者方法: 1.获取手机分辨率 /** * 获取手机分辨率 */ public static String getDisplayMetrix(Context context) { ...

  4. 插件化注解处理API(Pluggable Annotation Processing API)

    Java奇技淫巧-插件化注解处理API(Pluggable Annotation Processing API) 参考资料 JDK6的新特性之六:插入式注解处理API(Pluggable Annota ...

  5. C语言--矩阵置换

    //takePlace里的循环写错了,j循环应该是 //for (j=i;j<3;j++) //你那个写的交换了2遍,又变回原来的了.*// #include <stdio.h> ] ...

  6. web报表工具FineReport常见的数据集报错错误代码和解释

    在使用finereport制作报表.若预览错误发生.非常多朋友便手忙脚乱不知所措了,事实上没什么,仅仅要看懂报错代码和含义.能够非常快的排除错误,这里我就分享一下finereport的数据集报错错误代 ...

  7. 【MyBatis学习04】mapper代理方法开发dao

    上一篇博文总结了mybatis使用 原始dao的方法存在的一些弊端,我们肯定不会去用它,那么mybatis中该如何开发dao呢?如题所述,这篇博文主要来总结一下使用mapper代理的方法来开发dao的 ...

  8. LeetCode 66 Plus One（加一）（vector）

    翻译 给定一个以一系列数字表示的非负数.将其加一并转换成数字. 数字存储的最高位在列的最前面. 原文 Given a non-negative number represented as an arr ...

  9. nginx 404重定向到自定义页面

    在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄悄的流失了.如果此时能有一个漂亮的页面能够引导用户去他想去的地方必然可以留住用户.因此,每一个网站 ...

  10. RHEL 5.4下部署LVS(DR)+keepalived实现高性能高可用负载均衡(转)

    一.简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. ...