EasyUI可编辑datagrid用combobox实现多级联动

时间：2016-11-10 09:42:51 阅读：290 评论：0 收藏：0 [点我收藏+]
技术分享
<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>
标签：ota led 字段 load src 删除 ida ctc false
原文地址：http://www.cnblogs.com/zhengenru2008/p/6049599.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行