xiaoben-as2-php/protected/views/englishWeek/qxk_units.php

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style">
<link rel="stylesheet" href="/fonts/fpdf/iconfont.css"/>
<link rel="stylesheet" href="/css/alert.css"/>
<?php $imgUrl = Yii::app()->request->hostInfo;?>
<?php $disableImgUrl = Yii::app()->request->hostInfo.'/images/disable.png';?>
<style>
    .color-red{
        color: red;
    }
    .en-tfb-grade-1 .date>span{
        margin-right: 40px;
    }
    .option-wrap{
        margin-top: 20px;
        min-width: 600px;
    }
    .option-name{
        display: inline-block;
        width: 100px;
        vertical-align: top;
        margin-top: 10px;
    }
    .option-con{
        display: inline-block;
        width: 80%;
        min-width: 490px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .option-con>span{
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    .select-grade{
        width: 150px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .option-con-class label{
        display: inline-block;
        margin-right: 20px;
    }
    .active{
        color: #07af66;
    }
    .btn-start{
        display: inline-block;
        margin-top: 20px;
        margin-left: 100px;
        padding: 10px 30px;
        color: #fff;
        background-color: #07af66;
        cursor: pointer;
    }
    .en-tfb-grade-1{
        margin-left: 20px;
    }
    #selectedUnit{
        display: inline-block;
        width: 80%;
        min-width: 490px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    #selectedUnit span{
        position: relative;
        padding: 5px;
        padding-right: 30px;
        border: 1px solid #999;
        margin-right: 15px;
    }
    .delete-icon{
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        background: url(<?php echo $imgUrl.'/images/icon-delect.png';?>) no-repeat center;
        background-size: contain;
        cursor: pointer;
    }
</style>
<div class="main-content-inner">
    <div class="en-tfb-grade-1">

<div class="option-wrap">
    <span class="option-name">版本:</span>
    <div class="option-con" id="optionEdition">
        <?php if(isset($textbooks) && $textbooks):?>
            <?php $no =1;?>
            <?php foreach($textbooks as $k=>$v):?>
                <span code="<?php echo $v['textbook_id'];?>" class="<?php echo $no==1?'active':'';?>"><?php echo $v['textbook_name'];?></span>
                <?php $no++;?>
            <?php endforeach;?>
        <?php endif;?>
    </div>
</div>
<div class="option-wrap">
    <span class="option-name">模块:</span>
    <div class="option-con" id="optionModular">
        <?php if(isset($modules) && $modules):?>
            <?php $no =1;?>
            <?php foreach($modules as $k=>$v):?>
                <span code="<?php echo $v['textbook_id'];?>" class="<?php echo $no==1?'active':'';?>"><?php echo $v['textbook_name'];?></span>
                <?php $no++;?>
            <?php endforeach;?>
        <?php endif;?>
    </div>
</div>
<div class="option-wrap">
    <span class="option-name">单元:</span>
    <div class="option-con" id="optionUnit">
        <?php if(isset($units) && $units):?>
            <?php $no =1;?>
            <?php foreach($units as $k=>$v):?>
                <span code="<?php echo $v['textbook_id'];?>" class="<?php echo $no==1?'active':'';?>"><?php echo $v['textbook_name'];?></span>
                <?php $no++;?>
            <?php endforeach;?>
        <?php endif;?>
    </div>
</div>

<div class="option-wrap">
    <span class="option-name">已选单元:</span>
    <div id="selectedUnit">
        <?php if(!empty($str) && !empty($ids)):?>
            <span node="<?php echo $ids;?>"><?php echo $str;?><i class="delete-icon" onclick="deleteUnit(this)"></i></span>
        <?php endif;?>
    </div>
</div>

<div class="option-wrap">
    <p >* 根据所选教学进度，推送产品时，将只推送进度之前的相关知识点的语篇练习。</p>
</div>

    </div>
</div>

<script src="/js/ace-extra.min.js"></script>
<script src="/js/jquery-2.2.2.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<script src="/js/layer/layer.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var optionData={
            edition:0,
            modular:0,
            unit:0,
        }
        //获取版本模块单元
        // 版本点击
        $("#optionEdition>span").on("click", function(event) {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
            $("#optionEdition>span").removeClass('active')
            $(this).addClass('active');
            var code = $(this).attr("code");

            optionData.edition=code;

            console.log('版本',code)

        });
        // 模块点击
        $("#optionModular>span").on("click", function(event) {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
            $("#optionModular>span").removeClass('active')
            $(this).addClass('active');

            var code = $(this).attr("code");
            optionData.modular=code;
            console.log('模块',code)

        });
        // 单元点击
        $("body").delegate("#optionUnit>span", "click", function() {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
//        $("#optionUnit>span").on("click", function(event) {
            $("#optionUnit>span").removeClass('active')
            $(this).addClass('active');

            var code = $(this).attr("code");
            optionData.unit=code;

            console.log('单元',code)

        });


        //
        $("body").delegate("#optionEdition span", "click", function() {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
//        $('#optionEdition span').on("click", function(event) {
            var textbookId = $(this).attr("code");
            if(textbookId){
                $.ajax({
                    url: "<?php echo $this->createUrl('print/ajaxNewGetModuleAndUnit');?>",
                    type: "POST",
                    dataType: "json",
                    data: {
                        version_id: textbookId,
                        query_type:2
                    },
                    success: function (data) {
                        console.log(data);
                        var htmlModule = '';
                        var htmlUnit = '';
                        if(data.data.modules){
                            var a = 1;
                            for(var i in data.data.modules){
                                var module=data.data.modules[i];
                                if(a == 1){
                                    htmlModule += '<span code="'+module.textbook_id+'" class="active">'+module.textbook_name+'</span>';
                                }else{
                                    htmlModule += '<span code="'+module.textbook_id+'">'+module.textbook_name+'</span>';
                                }
                                a++;
                            }
                        }
                        if(data.data.units){
                            var a = 1;
                            for(var i in data.data.units){
                                var unit=data.data.units[i];
                                if(a == 1){
                                    htmlUnit += '<span code="'+unit.textbook_id+'" class="active">'+unit.textbook_name+'</span>';
                                }else{
                                    htmlUnit += '<span code="'+unit.textbook_id+'">'+unit.textbook_name+'</span>';
                                }
                                a++;
                            }
                        }
                        $('#optionModular').html(htmlModule);
                        $('#optionUnit').html(htmlUnit);
                    }

                });
            }
        })

        $("body").delegate("#optionModular span", "click", function() {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
            $("#optionModular>span").removeClass('active')
            $(this).addClass('active');

            var code = $(this).attr("code");
            optionData.modular=code;
//        $('#optionModular span').on("click", function(event) {
            var moduleId = $(this).attr("code");
            var textbookId = $('#optionEdition span.active').attr("code");
            if(textbookId && moduleId){
                $.ajax({
                    url: "<?php echo $this->createUrl('print/ajaxNewGetUnitByModuleId');?>",
                    type: "POST",
                    dataType: "json",
                    data: {
                        version_id: textbookId,
                        module_id:moduleId,
                        query_type:2
                    },
                    success: function (data) {
                        console.log(data);
                        var htmlUnit = '';
                        if(data.data.units){
                            var a = 1;
                            for(var i in data.data.units){
                                var unit=data.data.units[i];
                                if(a == 1){
                                    htmlUnit += '<span code="'+unit.textbook_id+'" class="active">'+unit.textbook_name+'</span>';
                                }else{
                                    htmlUnit += '<span code="'+unit.textbook_id+'">'+unit.textbook_name+'</span>';
                                }
                                a++;
                            }
                        }
                        $('#optionUnit').html(htmlUnit);
                    }

                });
            }
        })

        $("body").delegate("#optionUnit span","click",function () {
            if(!limitUnit()){
                layer.msg('已选单元超出限制');return false;
            }
            var text_book_id = $("#optionEdition").children(".active").attr("code");
            var module_id = $("#optionModular").children(".active").attr("code");
            var unit_id = $(this).attr("code");
            var ids = text_book_id + '_' + module_id + '_' + unit_id;

            var selected_arr = [];
            if($('#selectedUnit span').length > 0){
                $('#selectedUnit span').each(function(index){
                    selected_arr.push($(this).attr('node'));
                });
            }
            if($.inArray(ids, selected_arr) >= 0){
                layer.msg('不能重复添加该单元');return false;
            }

            var text_book_name = $("#optionEdition").children(".active").text();
            var module_name = $("#optionModular").children(".active").text();
            var unit_name = $(this).text();
            var names = text_book_name + '_' + module_name + '_' + unit_name;
            var _html = '<span node="' + ids + '">' + names + '<i class="delete-icon" onclick="deleteUnit(this)"></i></span>';
            $("#selectedUnit").append(_html);
        });

    });

    function deleteUnit(a) {
        var ids = $(a).parent().attr('node');
        var grade = parseInt($('.select-grade').val());
        var generate_class = ".unit"+ ids;
        $("span").remove(generate_class);

        $(a).parent().remove();
    }

    function limitUnit() {
        var selected_count = $("#selectedUnit").children("span").length;
        if(selected_count==1){
            return false;
        }
        return true;
    }

    // $("#unitsSelected").click(function () {
    //
    //
    //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    //
    //     parent.layer.close(index); //再执行关闭
    //     $("#progress").attr("value", 11)
    // })

    function callbackdata() {
        return {
            html : $("#selectedUnit").html(),
            ids : $("#selectedUnit").children().attr("node"),
            str : $("#selectedUnit").children().text()
        }
    }
</script>