欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動

 更新時間：2016年08月29日 13:54:19   作者：我愛喝可樂  
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動效果的實例代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧

我在項目中設(shè)計課程表的時候需要用到老師和分類之間的多級聯(lián)動。

首先是一張效果圖：

下面是實現(xiàn)的代碼：

<body> 
<script type="text/javascript"> 
$(function(){ 
var editing ; //判斷用戶是否處于編輯狀態(tài) 
var flag ; //判斷新增和修改方法 
$('#set_schedule').datagrid({ 
idField:'id' , 
fitColumns: false , 
url:'scheduleAction_loadScheduleData.action?sureDocumentId='+$("#sureDocumentId").val() , 
striped: true , 
loadMsg: '數(shù)據(jù)正在加載,請耐心的等待...' , 
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'); //清除原來的數(shù)據(jù) 
var url = 'codeTypeAction_search.action?type=28&parentId='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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'); //清除原來的數(shù)據(jù) 
var url = 'teacherAction_search.action?teacherTypeId2='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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'); //清除原來的數(shù)據(jù) 
var url = 'codeTypeAction_search.action?type=28&parentId='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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'); //清除原來的數(shù)據(jù) 
var url = 'teacherAction_search.action?teacherTypeId2='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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'); //清除原來的數(shù)據(jù) 
var url = 'codeTypeAction_search.action?type=28&parentId='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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'); //清除原來的數(shù)據(jù) 
var url = 'teacherAction_search.action?teacherTypeId2='+value; 
target.combobox('reload', url);//聯(lián)動下拉列表重載 
} 
} 
} 
}, 
{ 
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 先取消所有的選中狀態(tài) 
$('#set_schedule').datagrid('unselectAll'); 
//2追加一行 
$('#set_schedule').datagrid('appendRow',{description:''}); 
//3獲取當(dāng)前頁的行號 
editing = $('#set_schedule').datagrid('getRows').length -1; 
//4選中并開啟編輯狀態(tài) 
$('#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'; 
//根據(jù)行記錄對象獲取該行的索引位置 
editing = $('#set_schedule').datagrid('getRowIndex' , arr[0]); 
//開啟編輯狀態(tài) 
$('#set_schedule').datagrid('beginEdit',editing); 
} 
} 
} 
} */,{ 
text:'保存課程', 
iconCls:'icon-save' , 
handler:function(){ 
//保存之前進行數(shù)據(jù)的校驗 , 然后結(jié)束編輯并師傅編輯狀態(tài)字段 
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(){ 
//回滾數(shù)據(jù) 
$('#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">總學(xué)時：</td> 
<td width="28%" class="td_left"> 
<s:textfield name="totalLearnTime" id="totalLearnTime" size="32"/>學(xué)時 
</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實現(xiàn)多級聯(lián)動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論