EasyUI可編輯datagrid用combobox實現多級聯動

時間 2019-11-13
標籤 easyui 編輯 datagrid combobox 實現多級聯動简体版
原文原文鏈接
<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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。