xiaoben-as2-php/protected/views/studentinfo/add_classified.php

<link type="text/css"  rel="stylesheet" href="/css/needDetail.css" />
<style>
    dl.subject_list{clear: both;display: block;margin-top:5px;border:1px solid #ccc;padding:10px;height:50px;}
    dl.subject_list dd{float:left;margin:5px;}

    /*修改样式开始*/
    .form-item_name{
        line-height: 28px;
    }
    .form-item-input_name{
        text-indent: 26px;
    }
    .name-tips{
        position: relative;
        left: 18px;
        bottom: 2px;
    }
    .test-type-ties{
        /*display: inline-block;
        margin: 0 12px;*/
        color: red;
    }
    .icon-test-type-ties{
        margin: 0 12px;
        margin-top: -3px;
        vertical-align: middle;
    }
    .form-item-con{
        color: #333;
    }
    .class-tips{
        vertical-align: middle;
        margin: 0 4px;
    }
    .class-box{
        width: 500px;

    }
    .class-box>p{
        margin-bottom: 10px;
    }
    .class-box>ul{
        width: 500px;
        height: 200px;
        padding: 10px 20px;
        background-color: #FAFAFA;
        box-sizing: border-box;
        border:1px solid #ddd;
        overflow: auto;
    }
    .class-box>ul>li{
        float: left;
        margin-right: 15px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .class-box>ul>li>img{
        vertical-align: middle;
        margin-left: 3px;
    }
    .icon-change{
        margin: 0 37px;
        margin-top: 110px;
    }
    .red-tips{
        color: red;
    }
    button.save {
        height: 40px;
    }

    .selected-box li{
        color:#0e8e54;
    }
</style>
<div class="main-content-inner">
    <!--    导航栏开始-->
    <?php include(Yii::app()->basePath.'/views/layouts/class_navigation.php');?>
    <!--    导航栏结束-->

    <div class="layout-gap">
        <section class="anc-top flex status_1" >
            <div class="flex-one  flex">
                <p class="anc-title">添加学生</p>
               
            </div>
            <div class="anc-opt-btn green-font pointer reback" ><a href="<?php echo $this->createUrl('classes/index');?>?class_type=2">返回</a></div>
        </section>
        <section class="anc-main-con">
            <div class="pointer ">当前班级信息</div>
            <span>年级：<?php echo $gradeName?>丨教学班名称：<?php echo $cname?>丨学科：<?php echo implode('、',$subjects)?> </span>
        </section>
        <div class="handle-detail-main-excel">
            <p>
            <select name="class" id="select_class">
                <option value="0">选择行政班</option>
                <?php
                if($classInfo){
                    foreach ($classInfo as $val){
                        echo '<option value="'.$val['class_id'].'">'.$val['class_name'].'</option>';
                    }
                }
                ?>
            </select>
            <input type="text" name="student_name" class="student_name" value="" >
            </p>
            <div class="form-item clearfix">
                <div class="class-box fl" >
                    <p><img src="/images/icon-tips.png" alt="" class="class-tips">未走班学生</p>
                    <ul class="selected-box">
                    </ul>
                </div>
                <img src="/images/icon-change.png" alt="" class="icon-change fl">
                <div class="class-box fl">
                    <p><img src="/images/icon-tips.png" alt="" class="class-tips">已选学生</p>
                    <ul class="unchecked-box">
                    </ul>
                </div>
            </div>
            <div class="pop-btns">
                <input type="hidden" name="cid" value="<?php echo $cid?>">
                <div class="confirm-pop-btn-sure">确认</div>
            </div>
        </div>
    </div>


</div>

<script>
    $(function(){


        var jumpUrl=getCookie('needMemoryAction');
        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for(var i = 0; i <ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }
        $('.add_btn').click(function(){
            $('.history-pop').show();
        });

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

        var subjects=[];
        var selectedStudent=[];
        var grade=<?php echo $grade?>;
        <?php
        foreach ($subjects as $key => $val){
            echo 'subjects.push('.$key.');';
        }
        ?>
        // 加载学生
        $('#select_class').change(function(){
            var class_id=$(this).val();
            getStudent(class_id);
        });

        function getStudent(class_id){

            if(class_id==0){
                return false;
            }
            $.ajax({
                url:'<?php echo $this->createUrl('studentinfo/getStudentByClassified')?>',
                type:'POST',
                dataType:'json',
                data:{class_id:class_id,subjects:subjects,grade:grade},
                success:function(res){
                    if(res.status==1){
                        if(res.data.length>0){
                            var selectedBoxHtml='';
                            for(var i=0;i<res.data.length;i++){
                                if($.inArray(res.data[i]['student_id'],selectedStudent)==-1){
                                    selectedBoxHtml+='<li value="'+res.data[i]['student_id']+'">'+res.data[i]['realname']+'</li>';
                                }
                            }
                            $('.selected-box').html(selectedBoxHtml);
                        }

                    }
                }
            });
        }
        $('.student_name').change(function () {
            var realname=$(this).val();
            if(realname!='' && realname !=undefined){
                $.ajax({
                    url:'<?php echo $this->createUrl('studentinfo/searchStudentByClassified')?>',
                    type:'POST',
                    dataType:'json',
                    data:{realname:realname,subjects:subjects,grade:grade},
                    success:function(res){
                        if(res.status==1){
                            if(res.data.length>0){
                                var selectedBoxHtml='';
                                for(var i=0;i<res.data.length;i++){
                                    if($.inArray(res.data[i]['student_id'],selectedStudent)==-1){
                                        selectedBoxHtml+='<li value="'+res.data[i]['student_id']+'">'+res.data[i]['realname']+'</li>';
                                    }
                                }
                                $('.selected-box').html(selectedBoxHtml);
                            }
                        }
                    }
                });
            }else{
                var class_id= $('#select_class').val();
                getStudent(class_id);
            }
        });

        $(".selected-box").on("click", "li", function() {
            var classValue = $(this).attr('value');
            var className = $(this).text();
            $(this).remove();
            $(".unchecked-box").append('<li value="'+classValue+'">'+className+'</li>');
            selectedStudent.push(classValue);

            return false;
        });
        // 移除已选学生
        $(".unchecked-box").on("click", "li", function() {
            var selectedStudentValue = $(this).attr('value');
            var selectedStudentName = $(this).text();
            $(this).remove();
            $(".selected-box").append('<li value="'+selectedStudentValue+'">'+selectedStudentName+'</li>');
            for(var ii=0;ii<selectedStudent.length;ii++){

                if($.trim(selectedStudentValue)==$.trim(selectedStudent[ii])){
                    selectedStudent.splice(ii,1);
                }
            }
            console.log(selectedStudent);
            return false;
        });
        //添加
        $('.confirm-pop-btn-sure').click(function(){
            console.log(selectedStudent);
            if(selectedStudent.length>0){
                var class_id=$('input[name=cid]').val();
                $.ajax({
                    url:'<?php echo $this->createUrl('studentinfo/addClassifiedStudent')?>',
                    type:'POST',
                    dataType:'json',
                    data:{cid:class_id,student_id:selectedStudent},
                    success:function(res){
                        if(res.status==1){
                            layer.msg('添加成功');
                            if(jumpUrl!=''){
                                window.location.href= jumpUrl;
                            }else{
                                window.location.href='<?php echo $this->createUrl('classes/index?class_type=2')?>';
                            }

                        }else if(res.msg!=undefined){
                            layer.msg(res.msg);
                        }else{
                            layer.msg('添加失败');
                        }
                    }
                });
            }
        });
    })
</script>