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();
            }
        });
    });
})