modal結合art-template

內容div

<div id="modal-cont"></div>

模板tpl

<script id="modal-tpl" type="text/template">
    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        查看申請
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>uid</th>
                            <th>姓名</th>
                            <th>手機號</th>
                            <th>狀態</th>
                            <th>申請時間</th>
                            <th>更新時間</th>
                            <th>操做</th>
                        </tr>
                        </thead>
                        <tbody id="modal_tbody">
                        {{ each data }}
                        <tr>
                            <td>{{ $value.uid }}</td>
                            <td>{{ $value.name }}</td>
                            <td>{{ $value.telephone }}</td>
                            <td id="apply_status_{{ $value.id }}">
                                {{ if $value.apply_status == 0   }}
                                    申請中
                                {{ else if $value.apply_status == 1   }}
                                    已贊成
                                {{ else if $value.apply_status == 2   }}
                                    已拒絕
                                {{ /if }}

                            </td>
                            <td>{{ $value.create_time }}</td>
                            <td>{{ $value.update_time }}</td>
                            <td id="apply_opt_{{ $value.id }}">
                                {{ if $value.apply_status == 0   }}
                                    <a href="javascript:;" data-id="{{ $value.id }}" data-student_id="{{ $value.student_id }}" class="audit-apply">審覈</a>
                                {{ /if }}
                            </td>
                        </tr>
                        {{ /each }}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">關閉
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</script>

獲取數據

$(".info_apply").on('click',function () {
    let student_id = $(this).parent().data('id');
    // 獲取申請信息
    $.ajax({
        type:'POST',
        url:'ajax_get_apply',
        data: {student_id: student_id},
        dataType:'json',
        success:function(data){
            if(data.errno == 0){
                let html = template('modal-tpl', {data:data.data});
                $('#modal-cont').html(html);
                $("#myModal").modal("show");
            }else{
                alert(data.errdesc);
                return false;
            }
        }
    });
});

操做審覈，異步處理

// 頁面加載好以後，添加點擊事件
$(document).on("click",".audit-apply",function(){
    let apply_id = $(this).data('id');
    let student_id = $(this).data('student_id');

    layer.confirm('是否審覈經過？', {
        btn: ['經過','不經過'] //按鈕
    }, function(){
        // ajax設置經過
        $.ajax({
            type:'POST',
            url:'ajax_audit_apply',
            data: {apply_id: apply_id,pass:1},
            dataType:'json',
            success:function(obj){
                layer.msg(obj.errdesc);
                $("#apply_status_"+apply_id).text('已贊成');
                $("#apply_opt_"+apply_id).text('');
                $("#student_help_status_"+student_id).html('<span class="text-success">已幫助</span>');
                layer.close();
            }
        });
    }, function(){
        // ajax設置經過
        $.ajax({
            type:'POST',
            url:'ajax_audit_apply',
            data: {apply_id: apply_id,pass:2},
            dataType:'json',
            success:function(obj){
                layer.msg(obj.errdesc);
                $("#apply_status_"+apply_id).text('已拒絕');
                $("#apply_opt_"+apply_id).text('');
                $("#student_help_status_"+student_id).html('<span class="text-primary">未幫助</span>');
                layer.close();
            }
        });
    });
})