xiaoben-as2-php/protected/views/record/handle.php

<link type="text/css"  rel="stylesheet" href="/css/needDetail.css" />
<style>
    html {overflow-y: scroll;}
</style>
<div class="main-content-inner">
    <!--    导航栏开始-->
    <?php include(Yii::app()->basePath.'/views/layouts/view_navigation.php');?>
    <!--    导航栏结束-->
    <div class="layout-gap">
        <section class="hrn-top flex">
            <div class="flex-one hrn-top-title fw">导入成绩</div>
            <div class="green-font pointer" onclick="javascript:history.go(-1);">返回</div>
        </section>
        <section class="flex hrn-main-con">
            <article class="menu-list-con">
                <div class="menu-list-top">
                    <span class="green-font pointer fw prev-menu-page vtm" rel="<?php echo $page;?>">&lt;</span>
                    <span class="vtm showpage">第<?php echo $page;?>页</span>
                    <span class="green-font pointer fw next-menu-page vtm" rel="<?php echo $page;?>">&gt;</span>
                    <span class="vtm totalpage">共<?php echo $total_page;?>页</span>
                    <input type="hidden" name="total_page" value="<?php if(isset($total_page)) echo $total_page?>">
                </div>
                <div class="search-opt">
                    <div class="search-inp vtm">
                        <input type="text" name="name_like" placeholder="姓名关键字" class="search-key-value">
                        <div class="clear-search-value pointer">×</div>
                    </div>
                    <img src="/images/search.png" alt="" class="search-btn-img pointer vtm">
                </div>
                <ul class="name-key-datas">
                    <?php
                        if(isset($name_group)){
                            foreach ($name_group as $key=> $val){
                    ?>
                                <li class="name-key-list flex">
                                    <div class="flex-one"><?php echo $val['check_field_value'];?></div>
                                    <div class="gray-font"><?php echo $val['count'];?></div>
                                </li>
                    <?php
                            }
                        }
                    ?>

                </ul>
            </article>
            <article class="flex-one handle-detail-con">
                <div class="handle-detail-top flex">
                    <div class="flex-one">
                        <p>excel中重名学生：</p>

                    </div>
                </div>
                <div class="handle-detail-main-excel">

                </div>
                <div class="handle-detail-top flex">
                    <div class="flex-one">
                        <p>学校已存在重名学生：</p>

                    </div>
                    <span>处理办法：请为下方学生选择上方excel中对应的序号，确认即可</span>
                    <div class="check-btn pointer save_student_id">确认</div>
                </div>
                <div class="handle-detail-main">

                </div>
            </article>

        </section>
    </div>
</div>

<div class="history-pop">
    <div class="history-pop-con">
        <div class="need-pop-top clearfix">
            <div class="npt-title put-need fl">查看历史成绩</div>
            <div class="npt-close fr">×</div>
        </div>
        <table class="history-mark-table">
            <thead class="fw">
            <td>考试日期</td>
            <td>试卷名称</td>
            <td>我的得分</td>
            <td>班级平均分</td>
            <td>年级平均分</td>
            <td>班级排名</td>
            <td>年级排名</td>
            </thead>
            <tbody id="exam_list">

            </tbody>
        </table>
    </div>
</div>
<div class="countermark-pop">
    <div class="countermark-pop-con">
        <div class="need-pop-top clearfix">
            <div class="npt-title put-need fl">查看副号</div>
            <div class="npt-close fr">×</div>
        </div>
        <div class="flex relative">
            <img src="/images/prev-arrow.png" alt="" class="prev-arrow-pop arrow-img pointer">
            <div class="countermark-datas flex-one">
                <ul class="clearfix countermark-list-detail">

                </ul>
            </div>
            <img src="/images/next-arrow.png" alt="" class="next-arrow-pop arrow-img pointer">
        </div>
    </div>
</div>
<div class="relate-sure-pop">
    <div class="relate-sure-pop-con">
        <div class="need-pop-top clearfix">
            <div class="npt-title put-need fl">提示</div>
            <div class="npt-close fr">×</div>
        </div>
        <div class="confirm-msg red-font tac">
            确认要关联学生的账号吗？
        </div>
        <div class="pop-btns">
            <div class="confirm-pop-btn-sure">确认关联</div>
        </div>
    </div>
</div>

<div class="pop-sec-time">处理成功！即将进入下一组</div>
<script>
    $(function(){
        var data,idxStar,idxEnd,startCardId,endCardId;
        var now_name;   //当前正在处理的哪一组
        var now_menu_index=0;

        //默认加载第一组
        next_name=$('.name-key-datas').find('li').eq(0).find('.flex-one').html();
        loadStudent(next_name,now_menu_index);

        //分页
        $('.prev-menu-page').click(function () {
            var page=$(this).attr('rel');
            var name_like=$.trim($('input[name=name_like]').val());
            if(page==1){
                return false;
            }

            loadmenu(page-1,name_like,'');
        });
        $('.next-menu-page').click(function(){
            var total_page=parseInt($('input[name=total_page]').val());
            var page=parseInt($(this).attr('rel'));
            var name_like=$.trim($('input[name=name_like]').val());
            if((page+1)>total_page){
                return false;
            }
            loadmenu(page+1,name_like,'');
        });
        $('.search-btn-img').click(function(){

            var name_like=$.trim($('.search-key-value').val());
            if(name_like==''){
                return false;
            }
            loadmenu(1,name_like,'');
        });
        $('.name-key-datas')
            .on('click','.flex-one',function(){
                var name=$(this).html();

                loadStudent(name,$(this).closest('.name-key-list').index());
            });
        function loadmenu(page,name_like,next_name){
            page=parseInt(page);
            $.ajax({
                url:'<?php echo $this->createUrl('record/handle_repeat')?>',
                type:'POST',
                data:{'page':page,'name':name_like},
                dataType:'json',
                success:function(res){
                    if(res.status==1){
                        var html='';
                        for(var i=0;i<res.data.length;i++){
                            html+='<li class="name-key-list flex">';
                            html+='<div class="flex-one">'+res.data[i]['check_field_value']+'</div>';
                            html+='<div class="gray-font">'+res.data[i]['count']+'</div>';
                            html+='</li>';
                        }
                        $('.name-key-datas').html(html);
                        $('.prev-menu-page').attr('rel',page);
                        $('.next-menu-page').attr('rel',page);
                        $('.showpage').html('第'+(page)+'页');
                        $('.totalpage').html('共'+res.total_page+'页');
                        $('input[name=total_page]').val(res.total_page);
                        if(next_name!=''){
                            loadStudent(next_name,now_menu_index);
                        }
                    }
                }
            });
        }

        function loadStudent(name,index){
            if(name==''){
                return false;
            }
            $('.pop-sec-time').html('正在加载中。。。。。。');
            $('.pop-sec-time').show();
            $.ajax({
                url:'<?php echo $this->createUrl('record/showrepeatstudent')?>',
                type:'POST',
                data:{'name':name},
                dataType:'json',
                success:function(res){
                    if(res.status==1){
                        $('.handle-detail-main').html(res.html);
                        $('.handle-detail-main-excel').html(res.excel_html);
                        now_name=name;
                        now_menu_index=index;

                    }
                    $('.pop-sec-time').hide();
                }
            });
        }



        function arrowImgShow() {
            $('.handel-term-list').each(function(){
                if ($(this).find('.term-card-list').length<4) {
                    $(this).find('.arrow-img').hide();
                } else {
                    $(this).find('.arrow-img').show();
                }
            })
        }
        arrowImgShow();

        $(document)
            .on('click','.toggle-opt-btn',function(){
                if ($(this).text()=='展开') {
                    $(this).text('收起')
                } else {
                    $(this).text('展开')
                }
                $(this).closest('.term-card-list').find('.hide-list').toggle();
            })
            .on('click','.prev-arrow',function(){
                var leftNum = $(this).next('.term-card-layout').find('.term-card-detail').position().left-40;
                var lisWidth = $(this).next('.term-card-layout').find('.term-card-detail li').width();
                if (leftNum==0) {
                    alert('已经是第一条了')
                } else {
                    $(this).next('.term-card-layout').find('.term-card-detail').css('left',leftNum+lisWidth);
                    $('.hide-list').hide();
                    $('.toggle-opt-btn').text('展开');
                }
            })
            .on('click','.next-arrow',function(){
                var listLen = $(this).prev('.term-card-layout').find('.term-card-detail li').length;
                var leftNum = $(this).prev('.term-card-layout').find('.term-card-detail').position().left-40;
                var lisWidth = $(this).prev('.term-card-layout').find('.term-card-detail li').width();
                if (listLen<3||listLen==3||leftNum/(listLen-3)==-lisWidth||leftNum/(listLen-3)<-lisWidth) {
                    alert('已经是最后第一条了')
                } else {
                    $(this).prev('.term-card-layout').find('.term-card-detail').css('left',leftNum-lisWidth);
                    $('.hide-list').hide();
                    $('.toggle-opt-btn').text('展开');
                }
            })
            .on('click','.edit-icon',function(){
                $(this).hide().next('.edit-self-no').show();
            })
            .on('click','.browse-history',function(){
                var student_id=$(this).attr('rel');
                console.log(student_id);
                $.ajax({
                    url:'<?php echo $this->createUrl('checkstudent/gethistoryscore')?>',
                    type:'POST',
                    dataType:'json',
                    data:{'student_id':student_id},
                    success:function(res){
                        if(res.status==1){
                            var list=res.data,html='';
                            for(var i=0;i<list.length;i++){
                                html+='<tr>';
                                html+='<td>'+list[i]['exam_date']+'</td>';
                                html+='<td>'+list[i]['exam_name']+'</td>';
                                html+='<td>'+list[i]['score']+'</td>';
                                html+='<td>'+list[i]['class_avg']+'</td>';
                                html+='<td>'+list[i]['grade_avg']+'</td>';
                                html+='<td>'+list[i]['class_rank']+'</td>';
                                html+='<td>'+list[i]['grade_rank']+'</td>';
                                html+='</tr>';
                            }
                            $('#exam_list').html(html);
                            $('.history-pop').show();
                        }
                    }
                });

            })
            .on('click','.fuhao-lock',function(){
                var student_id=$(this).attr('rel');
                var fuhao_number=parseInt($(this).html());
                if(fuhao_number>0){
                    $.ajax({
                        url:'<?php echo $this->createUrl('checkstudent/getslaves')?>',
                        type:'POST',
                        dataType:'json',
                        data:{'student_id':student_id},
                        success:function(res){
                            if(res.status==1){
                                $('.countermark-list-detail').html(res.data);
                                if ($('.countermark-list-detail li').length<3) {
                                    $('.countermark-pop-con').find('.arrow-img').hide()
                                }
                                $('.countermark-pop').show();
                            }
                        }
                    });
                }

            })
            .on('click','.relieve-relate',function(){
                var student_id=$(this).attr('rel');
                var name=$(this).attr('data');
                if(student_id=='' || student_id==undefined){
                    return false;
                }
                $.ajax({
                    url:'<?php echo $this->createUrl('checkstudent/cancelrelation')?>',
                    dataType:'json',
                    type:'POST',
                    data:{'student_id':student_id},
                    success:function(res){
                        if(res.status==1){
                            $('.countermark-pop').hide();
                            loadStudent(name);
                        }
                    }
                });
            })

        $('.npt-close').click(function(){
            $('.history-pop,.countermark-pop,.relate-sure-pop').hide();
        })

        $(document).on('click','.next-arrow-pop',function () {
            var listLen = $(this).prev('.countermark-datas').find('.countermark-list-detail li').length;
            var leftNum = $(this).prev('.countermark-datas').find('.countermark-list-detail').position().left-60;
            if (leftNum/(listLen-2)==-288) {
                alert('已经是最后第一条了')
            } else {
                $(this).prev('.countermark-datas').find('.countermark-list-detail').css('left',leftNum-288);
            }
        })

        $(document).on('click','.prev-arrow-pop',function () {
            var leftNum = $(this).next('.countermark-datas').find('.countermark-list-detail').position().left-60;
            if (leftNum<0) {
                $(this).next('.countermark-datas').find('.countermark-list-detail').css('left',leftNum+288);
            } else {
                alert('已经是第一条了')
            }
        })




        $('.confirm-pop-btn-sure').click(function(){
            //合并操作
            $.ajax({
                url:'<?php echo $this->createUrl('checkstudent/relationhand')?>',
                type:'POST',
                dataType:'json',
                data:{'startCardId':startCardId,'endCardId':endCardId},
                success:function(res){
                    if(res.status==1){

                        $('#'+endCardId).find('.fuhao-lock').html(res.number);
                        // 合并成功，删掉拖拽的元素
                        $('.handel-term-list').eq(idxStar).find('#'+data).remove();
                        if ($('.handel-term-list').eq(idxStar).find('li').length<4) {
                            // 如果元素个数小于4，去掉左右箭头
                            $('.handel-term-list').eq(idxStar).find('.arrow-img').hide();
                            $('.handel-term-list').eq(idxStar).find('.term-card-detail').css('left',0)
                        }
                    }else{

                        layer.msg(res.msg);
                    }
                    $('.relate-sure-pop').hide();
                }
            });


        })

        $('.search-key-value').keyup(function(){
            if ($('.search-key-value').val()!=="") {
                $('.clear-search-value').show()
            } else {
                $('.clear-search-value').hide()
            }
        })
        $('.clear-search-value').click(function(){
            $('.search-key-value').val('');
            $(this).hide()
        })

        var target_id;

        $(document).on('dragstart','.term-card-list',function(ev){
            // ev.dataTransfer.effectAllowed = "move";
            // ev.dataTransfer.setData("elId",ev.target.id);
            target_id = ev.target.id;
            $("#"+ev.target.id).addClass('moves');
        })


        $(document).on('drop','.term-card-layout',function(ev){
            var  ev = ev? ev: window.ev
            var srcObj = ev.srcElement ? ev.srcElement : ev.target;
            ev.preventDefault();
            data=target_id;
            idxStar = $('.handel-term-list').index($('#'+data).closest('.handel-term-list'));
            idxEnd = $('.handel-term-list').index($(srcObj).closest('.handel-term-list'));
            $("#"+data).removeClass('moves');
            if (Math.abs(idxStar)>Math.abs(idxEnd)) {
                // 如果是拖拽元素上面的学期的
                // 获取被拖拽到的地点卡片元素的id
                endCardId = $(srcObj).closest('.term-card-list').attr('id');
                startCardId=data;

                $('.relate-sure-pop').show();
            }

        });
        $(document)
            .on('dragover','.term-card-layout',function(ev){
                ev.preventDefault();
            })
            .on('click','.save_student_id',function(){//关联学生Id
                select_obj=$('.nToId');
                console.log(select_obj.length);
                sidToTid=new Array();
                for(var i=0;i<select_obj.length;i++){
                    student_id=select_obj.eq(i).closest('.term-card-list').attr('id');
                    temp_id=select_obj.eq(i).val();
                    if(temp_id>0){
                        sidToTid.push(student_id+'///'+temp_id);
                    }
                }
                if(sidToTid!=''){
                    $.ajax({
                        url:'<?php echo $this->createUrl('record/binding')?>',
                        type:'POST',
                        dataType:'json',
                        data:{'str':sidToTid},
                        success:function(res){
                            if(res.status==1){
                                layer.msg('操作成功');
                                window.location.reload();
                            }else{
                                if(res.msg!=undefined){
                                    layer.msg(res.msg);
                                }else{
                                    layer.msg('关联失败');
                                }
                            }
                        }
                    });
                }
            })


    })
</script>