jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
更新時(shí)間：2016年08月29日 13:54:19 作者：我愛喝可樂
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
我在項(xiàng)目中設(shè)計(jì)課程表的時(shí)候需要用到老師和分類之間的多級(jí)聯(lián)動(dòng)。
首先是一張效果圖：
下面是實(shí)現(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ù)正在加載,請(qǐng)耐心的等待...' ,
rownumbers:true ,
singleSelect : true,
frozenColumns:[[
{field:'ck' , checkbox:true}
]],
columns:[[
{
field:'dateTime' ,
title:'時(shí)間' ,
width:100 ,
align:'center' ,
editor:{
type:'datebox' ,
options:{
required:true ,
missingMessage:'時(shí)間必填!' ,
editable:false
}
}
},
{
field:'morningTime' ,
title:'上午上課時(shí)間段' ,
width:126 ,
align:'center',
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'時(shí)間段必填!'
}
}
},
{
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
field:'bb1' ,
title:'主講老師細(xì)類' ,
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
field:'morningTeacherId' ,
title:'主講老師' ,
width:100 ,
editor : {
type : 'combobox',
options : {
url:'teacherAction_search.action',
valueField:'id' ,
textField:'name'
}
}
},
{
field:'afternoonTime' ,
title:'下午上課時(shí)間段' ,
width:126 ,
align:'center' ,
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'時(shí)間段必填!'
}
}
},
{
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
field:'bb2' ,
title:'主講老師細(xì)類' ,
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
field:'afternoonTeacherId' ,
title:'主講老師' ,
width:100 ,
editor : {
type : 'combobox',
options : {
url:'teacherAction_search.action',
valueField:'id' ,
textField:'name'
}
}
},
{
field:'eveningTime' ,
title:'晚上上課時(shí)間段' ,
width:126 ,
align:'center' ,
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'時(shí)間段必填!'
}
}
},
{
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
field:'bb3' ,
title:'主講老師細(xì)類' ,
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);//獲取行號(hào)
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)動(dòng)下拉列表重載
}
}
}
},
{
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)前頁的行號(hào)
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:'只能選擇一條記錄進(jìn)行修改!'
});
} else {
if(editing == undefined){
flag = 'edit';
//根據(jù)行記錄對(duì)象獲取該行的索引位置
editing = $('#set_schedule').datagrid('getRowIndex' , arr[0]);
//開啟編輯狀態(tài)
$('#set_schedule').datagrid('beginEdit',editing);
}
}
}
} */,{
text:'保存課程',
iconCls:'icon-save' ,
handler:function(){
//保存之前進(jìn)行數(shù)據(jù)的校驗(yàn) , 然后結(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:'請(qǐng)選擇進(jìn)行刪除操作!'
});
} else {
$.messager.confirm('提示信息' , '確認(rèn)刪除?' , 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é)時(shí)：</td>
<td width="28%" class="td_left">
<s:textfield name="totalLearnTime" id="totalLearnTime" size="32"/>學(xué)時(shí)
</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實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
- jQuery Easyui datagrid連續(xù)發(fā)送兩次請(qǐng)求問題
- easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
- jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
- jQuery Easyui學(xué)習(xí)教程之實(shí)現(xiàn)datagrid在沒有數(shù)據(jù)時(shí)顯示相關(guān)提示內(nèi)容
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼
- jquery easyui datagrid實(shí)現(xiàn)增加，修改，刪除方法總結(jié)
- 簡(jiǎn)介EasyUI datagrid editor combogrid搜索框的實(shí)現(xiàn)
- 詳解EasyUi控件中的Datagrid
相關(guān)文章
jquery在IE,FF瀏覽器差別的問題，在FF的效果很好，但是在IE上面沒有效果，當(dāng)時(shí)也沒有在意，通過今天的練習(xí)發(fā)現(xiàn)，“是不是對(duì)于一些自定義的js，IE的兼容性不是太好呢2013-04-04
jquery實(shí)現(xiàn)select選中行、列合計(jì)示例
這篇文章主要介紹了jquery如何實(shí)現(xiàn)select選中行、列合計(jì)示例 ,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法,可實(shí)現(xiàn)表格隔行變色以及鼠標(biāo)滑過與點(diǎn)擊時(shí)變色的功能,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)改變的相關(guān)技巧,需要的朋友可以參考下2016-08-08
鋒利的jQuery 要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（下：動(dòng)畫篇）
《鋒利的jQuery》要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（下：動(dòng)畫篇）2010-03-03
jQuery動(dòng)畫效果相關(guān)方法實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)畫效果相關(guān)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)動(dòng)畫效果所用到的常見方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄猨Query EasyUI 入門必看。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jq checkbox 的全選并ajax傳參的實(shí)例
下面小編就為大家?guī)硪黄猨q checkbox 的全選并ajax傳參的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
jquery控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別，有需要的朋友可以參考一下2013-11-11