xiaoben-as2-php/protected/views/textbook/index2.php

<style>
    /*弹出层*/

    .confirmbox-mask {
        background: rgba(0, 0, 0, .7);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 99;
        position: fixed;
    }
    .confirmbox-mask button {
        border: none;
        background: #2977ff;
        width: 80px;
        height: 26px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;
        outline: none;
        cursor: pointer;
    }

    .confirmbox-mask button.save {
        display: block;
        margin: 40px auto;
    }
    .confirmbox .confirmbox-btns {
        margin-top: 40px;
    }

    .class-modal {
        width: 700px;
        background: #fff;
    // border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height:420px;
    }

    .class-modal-head {
        font-size: 14px;
        background:#2977ff;
        color:#fff;
        height:25px;
        line-height: 25px;
        padding: 0 0 0 15px;
    }

    .class-modal-body {
        margin-top: 5px;
        overflow: auto;
        padding:15px;
        min-height: 340px;
    }

    .class-modal-body .classes {
        margin-bottom: 20px;

    }

    .class-modal-body .classes > div {
        display: inline-block;
        max-width: 640px;
        vertical-align: top;
    }

    .class-modal-body .classes a {
        text-decoration: none;
        display: inline-block;
        margin: 0 5px 5px;
        color: #136bfb;
        font-size: 14px;
    }

    .class-modal-body .classes a.active {
        color: #fc091b;

    }
    .class-modal .icon-close{
        position: absolute;
        right: 20px;
        top: 2px;
        color:#fff;
    }

    .class_btn{
        text-align: center;
    }
    .confirmbox-mask p{
        word-wrap : break-word ;
    }
    .icon-close{
        cursor: pointer;
    }
    .model-input label{
        margin:0 15px;
    }
    table{margin-top:5px;}
    .table_list{
        height:250px;
        overflow: auto;
    }
    .modify-btn{
        cursor: pointer;
    }
    .show_btn{
        display: inline-block;
        padding:2px 8px;
        cursor: pointer;
    }
    .c-red {
        color: #CC3300
    }
</style>
<div class="main-content-inner">
    <!--    导航栏开始-->
    <?php include(Yii::app()->basePath.'/views/layouts/class_navigation.php');?>
    <!--    导航栏结束-->
	<div class="page-content">
		<div class="row" style="margin:0px">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->

				<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
					<div class="row">

							<div class="col-xs-9">

									<div class="dataTables_length margin-zy">

                                        <select name="subject" class="subject">
                                            <option value="3">数学</option>
                                        </select>

                                        <select name="grade" class="grade">
                                            <option value="0">年级</option>
                                            <?php
                                            if(Yii::app()->params['grade_list']){
                                                foreach (Yii::app()->params['grade_list'] as $id=> $val){
                                                    echo '<option value="'.$id.'" >'.$val['grade_name'].'</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                        <select name="textbook" class="textbook">
                                            <?php foreach($textbookArr as $textbookId=>$textbookName): ?>
                                                <option value="<?php echo $textbookId?>"><?php echo $textbookName;?></option>
                                            <?php endforeach;?>
                                        </select>

									<button class="label-primary-s bth-s" id="add-btn" style="padding:4px 12px;">添加</button>
								</div>
							</div>
					</div>

					<table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable">
						<thead>
							<tr>
								<th style="width:80px;">学科</th>
								<th>年级</th>
								<th>教材</th>
								<th>操作</th>
							</tr>
						</thead>

						<tbody>
							<?php if(!empty($data)):foreach($data as $val):?>
							<tr>
                                <td><?php echo $val['subject']?></td>
                                <td><?php echo $val['grade']?></td>
                                <td><?php echo $val['textbook_name']?></td>
                                <td><span class="modify-btn" subject_id="<?php echo $val['subject_id']?>" grade="<?php echo $val['grade_id']?>" textbook="<?php echo $val['textbook_id']?>">修改</span></td>
							</tr>
							<?php endforeach;else:?>
								<tr><td colspan="10">暂无数据！</td></tr>
							<?php endif;?>
						</tbody>
					</table>
				</div>


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

<!-- 全学科教材-->
<input type="hidden" value="1" class="is-qxk"/>

<!--修改弹窗-->
<div class="confirmbox-mask" style="display: none" id="fieldModal">
    <div class="class-modal">
        <i class="icon close_1 icon-close">×</i>
        <div class="class-modal-head">教材版本</div>
        <form id="examSelect">
            <div class="class-modal-body">
                <div class="table_list">
                    <table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable">
                        <tr>
                            <td>全学科教材版本:</td>
                            <td>
                                <?php
                                if($textbookArr){
                                    foreach ($textbookArr as $textbookId => $textbookName){
                                        echo '<span class="show_btn textbook_btn_'.$textbookId.'" id="'.$textbookId.'">'.$textbookName.'</span>';
                                    }
                                }
                                ?>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <p class="class_btn">
                <input type="hidden" name="grade" value="">
                <input type="hidden" name="subject" value="">
                <input type="hidden" name="textbook" value="">
                <button type="button" class="save_textbook">确定</button>
            </p>
        </form>
    </div>
</div>
<script>
    $('#add-btn').click(function(){
        var subjectId=$('.subject').val(),
            grade=$('.grade').val(),
            textbook=$('.textbook').val();
        var isQxk=$(".is-qxk").val();
        if(textbook==0){
            layer.msg('请选择教材');
            return false;
        }
        if(grade==0){
            layer.msg('请选择年级');
            return false;
        }
        txt=$('.grade').find("option:selected").text()+$('.subject').find("option:selected").text()+"  您选择的教材版本是  "+$('.textbook').find("option:selected").text()+"  请确认";

        layer.confirm(txt,function(){
            $.ajax({
                url:'<?php echo $this->createUrl('textbook/add')?>',
                type:'POST',
                dataType:'json',
                data:{subject:subjectId,grade:grade,textbook:textbook,isQxk:isQxk},
                success:function(res){
                    if(res.status==1){
                        layer.msg('添加成功',{time:3000},function(){
                            window.location.reload();
                        })
                    }else{
                        if(res.msg!=undefined){
                            layer.msg(res.msg)
                        }else{
                            layer.msg('添加失败')
                        }
                    }
                }
            });
        });
        return false;


    });
    $('.modify-btn').click(function(){
        var subject_id=$(this).attr('subject_id'),
            grade=$(this).attr('grade'),
            textbook=$(this).attr('textbook');
        $('input[name=subject]').val(subject_id);
        $('input[name=grade]').val(grade);
        $('input[name=textbook]').val(textbook);

        $('.show_btn').removeClass('c-red');
        $('.textbook_btn_'+textbook).addClass('c-red');
        $('#fieldModal').show();
    });
    $('.icon-close').click(function(){
        $('#fieldModal').hide();
    });
    $('.show_btn').click(function(){
        $('.show_btn').removeClass('c-red');
        $(this).addClass('c-red');
        $('input[name=textbook]').val($(this).attr('id'));
    });

    $('.save_textbook').click(function(){
        var subjectId=$('input[name=subject]').val(),
            grade=$('input[name=grade]').val(),
            textbook=$('input[name=textbook]').val();
        var isQxk=$(".is-qxk").val();
        if(textbook==0){
            layer.msg('请选择教材');
            return false;
        }
        if(grade==0){
            layer.msg('年级数据错误');
            return false;
        }
        if(subjectId==0){
            layer.msg('科目数据错误');
            return false;
        }
        var data={subject:subjectId,grade:grade,textbook:textbook,isQxk:isQxk};
        console.log(data);

        $.ajax({
            url:'<?php echo $this->createUrl('textbook/edit')?>',
            type:'POST',
            dataType:'json',
            data:{subject:subjectId,grade:grade,textbook:textbook,isQxk:isQxk},
            success:function(res){
                if(res.status==1){
                    layer.msg('修改成功',{time:3000},function(){
                        window.location.reload();
                    })
                }else{
                    if(res.msg!=undefined){
                        layer.msg(res.msg)
                    }else{
                        layer.msg('修改失败')
                    }
                }
            }
        });
    });
</script>