xiaoben-as2-php/protected/views/team/index.php

<link rel="stylesheet" href="/css/learning-group.css">
<div class="learning-group">
    <div class="btn-top-box clearfix">
        <a href="<?php echo $this->createUrl('classes/view/cid/'.$cid)?>" class="btn-back fl">返回</a>
        <!--<span class="btn-save fr" id="btn-learning-group-save" >保存</span>-->
    </div>
    <div class="group-box">
        <?php
        if(isset($teamData) && $teamData){
            foreach ($teamData as $val){
        ?>
                <div class="group" code="<?php echo $val['team_id']?>" id="<?php echo $val['team_id']?>">
                    <div class="group-top">
                        <span class="group-name"><?php echo $val['team_name']?></span>
                        <span class="group-user-number">(<span><?php echo count($val['student'])?></span>人)</span>
                        <span class="btn-edit-group-name fr"><img src="/images/icon-edit.svg" alt=""></span>
                    </div>
                    <div class="group-content">

                            <?php
                            if(isset($val['student']) && $val['student']){
                                echo '<div class="group-list-box" >';
                                echo '<table border="0" class="table-group-list">';
                                echo '<tr>';
                                echo '<td></td>';
                                echo '<td>学生姓名</td>';
                                echo '<td>系统准考证号</td>';
                                echo '</tr>';
                                foreach ($val['student'] as $v){
                                    echo '<tr>';
                                    echo '<td><img src="/images/icon-delete-student.svg" class="btn-delete-group-student" code="'.$v['student_id'].'" alt=""></td>';
                                    echo '<td>'.$v['real_name'].'</td>';
                                    echo '<td>'.$v['student_card'].'</td>';
                                    echo '</tr>';
                                }
                                echo '</table>';
                                echo '</div>';
                            ?>

                            <?php
                            }else{
                            ?>
                                <div class="group-list-box">
                                <div class="btn-add-student-2 layer-add-student">
                                    <img src="/images/icon-add-student-2.svg" alt="">
                                    <span>请添加小组成员</span>
                                </div>
                                </div>
                            <?php
                            }
                            ?>


                        <div class="btn-group-bottom-box">
                            <div class="btn-group-bottom-add-box">
                                <span class="btn-delete-group"><img src="/images/icon-delete.svg" alt=""></span>
                                <span class="btn-add-student layer-add-student"><img src="/images/icon-add-student1.svg" alt=""></span>
                            </div>
                            <div class="btn-group-bottom-delete-box">
                                <span class="btn-delete-all-group">整组删除</span>
                                <span class="btn-delete-group-save" >完成</span>
                            </div>

                        </div>
                    </div>
                    <div class="dialog-delete-all-group-student">
                        <p class="dialog-delete-student">确定删除“<?php echo $val['team_name']?>”中的全部学生吗？</p>
                        <p class="dialog-delete-team hide">确定删除分组“<?php echo $val['team_name']?>”吗？</p>
                        <div class="btn-dialog-delete-all-group-student-box">
                            <span class="btn-dialog-delete-all-group-student-save">确定</span>
                            <span class="btn-dialog-delete-all-group-student-colse">取消</span>
                        </div>
                    </div>

                </div>
        <?php
            }
        }
        ?>
        <div class="group">
            <div class="group-top">

            </div>
            <div class="group-content">

                <div class="btn-add-group">
                    <img src="/images/icon-add-group.svg" alt="">
                    <span>新建小组</span>
                </div>

            </div>

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

<!-- 新增小组弹窗 -->
<div class="dialog-set-group-name">
    <div class="set-group-name-title">
        <span>请设置小组名称</span>
        <img src="/images/icon-close.svg" alt="" class="btn-set-group-name-colse-1 btn-colse fr">
    </div>
    <div class="set-group-name-main">
        <div class="set-group-name-content">
            <span >小组名称：</span>
            <span class="set-group-name-wrap">
					<input type="text" name="team_new_name" class="input-set-group-name" maxlength="10">
                    <input type="hidden" name="edit_team_id" value="0">
				</span>
        </div>
        <div class="btn-set-group-name-box">
            <span class="btn-set-group-name-colse btn-colse">取消</span>
            <span class="btn-set-group-name-save">保存</span>
        </div>
    </div>
</div>

<!-- 添加小组成员弹窗 -->
<div class="dialog-add-group-student">
    <div class="add-group-student-title">
        <span>添加小组成员</span>
        <img src="/images/icon-close.svg" alt="" class="btn-add-group-student-colse-1 btn-colse fr">
    </div>
    <div class="add-group-student-content">
        <form >
            <table border="0" class="table-add-group-student">

            </table>
            <input type="hidden" name="team_id" value="0">
        </form>
    </div>
    <div class="btn-add-group-student-box">
        <span class="btn-add-group-student-colse btn-colse">取消</span>
        <span class="btn-add-group-student-save">确认添加</span>

    </div>
</div>
<script>
    $(document).ready(function() {
        var class_id='<?php echo $cid?>';
        //弹出新增小组
        $('.btn-add-group').on('click', function(){
            layer.open({
                title: false,
                closeBtn: 0,
                type: 1,
                area: ['610px', '242px'],
                content: $(".dialog-set-group-name")
            });
        });
        //关闭新增小组
        $(".btn-colse").on("click", function() {
            $('input[name=edit_team_id]').val(0);
            $('input[name=team_new_name]').val('');
            layer.close(layer.index);
        });





        $('.group-box')
            .on('click','.btn-delete-all-group',function () {
                var count=parseInt($(this).closest('.group').find('.group-user-number span').html());
                if(count>0){
                    $(this).parents('.group').children('.dialog-delete-all-group-student').find('.dialog-delete-student').removeClass('hide');
                    $(this).parents('.group').children('.dialog-delete-all-group-student').find('.dialog-delete-team').addClass('hide');
                }else{
                    $(this).parents('.group').children('.dialog-delete-all-group-student').find('.dialog-delete-student').addClass('hide');
                    $(this).parents('.group').children('.dialog-delete-all-group-student').find('.dialog-delete-team').removeClass('hide');
                }
                $(this).parents('.group').children('.dialog-delete-all-group-student').css('display','block');
                var team_name=$(this).closest('.group').find('.group-name').html();
                var team_id=$(this).closest('.group').attr('code');

            })
            //删除单个学生按钮
            .on('click','.btn-delete-group-student',function(){
                // 获取单个学生
                codes=$(this).attr('code');

                var obj=$(this);
                var _group = $(this).parents('.group');
                var count_obj=obj.closest('.group').find('.group-user-number span');
                var count=parseInt(count_obj.html());

                //删除单个学生
                $.ajax({
                    url:'<?php echo $this->createUrl('team/del_student')?>',
                    type:'POST',
                    dataType:'json',
                    data:{'cid':class_id,'student_id':$(this).attr('code')},
                    success:function(res){
                        if(res.status==1){
                            obj.parents('tr').detach();
                            if(count-1>=0){
                                count_obj.html(--count);
                            }
                            if(count==0){
                                console.log('222');
                                var addHtml='                             <div class="group-list-box">\n' +
                                    '                                <div class="btn-add-student-2 layer-add-student">\n' +
                                    '                                    <img src="/images/icon-add-student-2.svg" alt="">\n' +
                                    '                                    <span>请添加小组成员</span>\n' +
                                    '                                </div>\n' +
                                    '                                </div>';
                                // obj.closest('.group').find('.btn-group-bottom-box').before('<p>12312</p>');
                                console.log(_group,8989);
                                _group.find('.group-list-box').html(addHtml);
                                _group.find('.btn-delete-group-save').click();
                            }
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                });
            })
            .on('click','.layer-add-student',function(){
                var team_id=$(this).closest('.group').attr('code');
                //加载学生列表
                $.ajax({
                    url:'<?php echo $this->createUrl('team/getstudent')?>',
                    type:'POST',
                    dataType:'json',
                    data:{'cid':class_id},
                    success:function(res){
                        if(res.status==1){
                            $('.table-add-group-student').html(res.data);
                            $('input[name=team_id]').val(team_id);
                            layer.open({
                                title: false,
                                closeBtn: 0,
                                type: 1,
                                area: ['976px', '580px'],
                                content: $(".dialog-add-group-student")
                            });
                        }
                    }
                });
            })
            //确认删除整组学生按钮
            .on('click','.btn-dialog-delete-all-group-student-save',function(){
                //获取整组学生
                var codes = $(this).parents('.group').attr('code');
                var obj=$(this);
                var student_count=parseInt(obj.closest('.group').find('.group-user-number span').html());
                console.log(student_count);
                $.ajax({
                    url:'<?php echo $this->createUrl('team/del_team')?>',
                    type:'POST',
                    dataType:'json',
                    data:{'team_id':codes},
                    success:function(res){
                        if(res.status==1){
                            obj.parents('.group').find('.table-group-list').detach();
                            $('#'+codes).find('.group-user-number span').html(0);
                            obj.parents('.group').children('.dialog-delete-all-group-student').css('display','none');

                            var addHtml='                       <div class="btn-add-student-2 layer-add-student">\n' +
                                '                                    <img src="/images/icon-add-student-2.svg" alt="">\n' +
                                '                                    <span>请添加小组成员</span>\n' +
                                '                                </div>' ;

                            obj.parents('.group').find('.group-list-box').html(addHtml);
                            obj.parents('.group').find('.btn-delete-group-save').click();
                            if(student_count==0){

                                obj.closest('.group').remove();


                            }
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                });
            })
            //取消删除整组学生按钮
            .on('click','.btn-dialog-delete-all-group-student-colse',function(){
                $(this).parents('.group').children('.dialog-delete-all-group-student').css('display','none');
            })
            .on('click','.btn-delete-group',function(){
                $(this).parent().css('display','none');
                $(this).parents('.btn-group-bottom-box').find('.btn-group-bottom-delete-box').css('display','block');
                $(this).parents('.group-content').children('.group-list-box').find('.btn-delete-group-student').css('display','inline-table');
            })
            .on('click','.btn-delete-group-save',function(){
                $(this).parent().css('display','none');
                $(this).parents('.btn-group-bottom-box').find('.btn-group-bottom-add-box').css('display','block');
                $(this).parents('.group-content').children('.group-list-box').find('.btn-delete-group-student').css('display','none');

            })

        //添加学生确认
        $(".btn-add-group-student-save").on("click", function() {
            var check_val = [];
            var realname = [];
            var student_card = [];
            var studentArr = $(this).parents('.dialog-add-group-student').find('.table-add-group-student').find('input[name="student-list"]:checked').each(function(){
                check_val.push($(this).val());
                realname.push($(this).closest('tr').find('.realname').html());
                student_card.push($(this).closest('tr').find('.student_card').html());

            });
            if(check_val.length>0){

                var team_id=$('input[name=team_id]').val();
                var count=parseInt($('#'+team_id).find('.group-user-number span').html())+check_val.length;

                var group_list_box=$('#'+team_id).find('.group-list-box');
                var list=$('#'+team_id).find('.table-group-list');
                var old_html=list.html();

                var add_html='';
                if(old_html==undefined){
                    add_html+='<table border="0" class="table-group-list">';
                    add_html+='<tr>';
                    add_html+='<td></td>';
                    add_html+='<td>学生姓名</td>';
                    add_html+='<td>系统准考证号</td>';
                    add_html+='</tr>';
                }
                for(var i=0;i<check_val.length;i++){
                    add_html+='<tr>';
                    add_html+='<td><img src="/images/icon-delete-student.svg" class="btn-delete-group-student" code="'+check_val[i]+'" alt=""></td>';
                    add_html+='<td>'+realname[i]+'</td>';
                    add_html+='<td>'+student_card[i]+'</td>';
                    add_html+='</tr>';
                }
                if(old_html==undefined){
                    add_html+='</table>';
                }
                $.ajax({
                    url:'<?php echo $this->createUrl('team/add_student')?>',
                    type:'POST',
                    dataType:'json',
                    data:{'cid':class_id,'team_id':team_id,'student_id':check_val,'realname':realname,'student_card':student_card},
                    success:function(res){
                        if(res.status==1){
                           if(old_html==undefined){
                               group_list_box.html(add_html);
                           }else{
                               list.html(old_html+add_html);
                           }
                            $('#'+team_id).find('.group-user-number span').html(count);
                            layer.close(layer.index);
                        }
                    }
                });
            }

            //layer.close(layer.index);
            //console.log(check_val);

        });
        //编辑，新增小组
        $('.btn-set-group-name-save').click(function(){
            var team_name=$('input[name=team_new_name]').val();
            var team_id=$('input[name=edit_team_id]').val();
            if(team_name=='' || team_name==undefined){
                return false;
            }
            layer.close(layer.index);
            $('input[name=edit_team_id]').val(0);
            $('input[name=team_new_name]').val('');
            var lyi=layer.msg('正在提交，请稍候......',{time:0});
            $.ajax({
                url:'<?php echo $this->createUrl('team/add_team')?>',
                type:'POST',
                dataType:'json',
                data:{'cid':class_id,'team_name':team_name,'team_id':team_id},
                success:function(res){
                    if(res.status==1){
                        if(team_id==0){
                           // window.location.reload();
                            var html='<div class="group" code="'+res.team_id+'" id="'+res.team_id+'"><div class="group-top">';
                            html+='<span class="group-name">'+team_name+'</span>';
                            html+='<span class="group-user-number">(<span>0</span>人)</span>';
                            html+='<span class="btn-edit-group-name fr"><img src="/images/icon-edit.svg" alt=""></span>';
                            html+='</div>';
                            html+='<div class="group-content">';
                            html+='<div class="group-list-box">';
                            html+='                       <div class="btn-add-student-2 layer-add-student">\n' +
                                '                                    <img src="/images/icon-add-student-2.svg" alt="">\n' +
                                '                                    <span>请添加小组成员</span>\n' +
                                '                                </div></div>';
                            html+='                        <div class="btn-group-bottom-box">\n'+
'                            <div class="btn-group-bottom-add-box">\n'+
'                                <span class="btn-delete-group"><img src="/images/icon-delete.svg" alt=""></span>\n'+
'                                <span class="btn-add-student layer-add-student"><img src="/images/icon-add-student1.svg" alt=""></span>\n'+
'                            </div>\n'+
'                            <div class="btn-group-bottom-delete-box">\n'+
'                                <span class="btn-delete-all-group">整组删除</span>\n'+
'                                <span class="btn-delete-group-save" >完成</span>\n'+
'                            </div>\n'+
'                        </div>\n'+
'                    </div>\n'+
'                    <div class="dialog-delete-all-group-student">\n'+
'                        <p>确定删除'+team_name+'</p>\n'+
'                        <div class="btn-dialog-delete-all-group-student-box">\n'+
'                            <span class="btn-dialog-delete-all-group-student-save">确定</span>\n'+
'                            <span class="btn-dialog-delete-all-group-student-colse">取消</span>\n'+
'                        </div>\n'+
'                    </div>';
                            html+='</div>';
                            html+='</div>';
                            html+='</div>';
                            $('.btn-add-group').closest('.group').before(html);
                            layer.msg('添加成功');
                        }else{
                            $('#'+team_id).find('.group-name').html(team_name);
                            layer.msg('编辑成功');
                        }

                    }else{
                        if(res.msg!=undefined){
                            layer.msg(res.msg);
                        }else{
                            layer.msg('提交失败')
                        }
                    }
                }
            });
        });

        //编辑小组
        $(document)
            .on('click','.btn-edit-group-name',function(){
                var team_id=$(this).closest('.group').attr('code');
                var team_name=$(this).closest('.group').find('.group-name').html();

                $('input[name=edit_team_id]').val(team_id);
                $('input[name=team_new_name]').val(team_name);

                layer.open({
                    title: false,
                    closeBtn: 0,
                    type: 1,
                    area: ['610px', '242px'],
                    content: $(".dialog-set-group-name")
                });
            })
    });
</script>