我在项目中设计课程表的时候需要用到老师和分类之间的多级联动。
首先是一张效果图：
下面是实现的代码：
<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实现多级联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
