我在項(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'); //清除原來(lái)的數(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'); //清除原來(lái)的數(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'); //清除原來(lái)的數(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'); //清除原來(lái)的數(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'); //清除原來(lái)的數(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'); //清除原來(lái)的數(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)前頁(yè)的行號(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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
