modal结合art-template
结合 Template art modal
2023-09-27 14:24:29 时间
内容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();
}
});
});
})
相关文章
- 和求余运算巧妙结合的jns指令
- 目标检测中的多尺度特征结合方式
- spring-boot结合mybatis-spring的一个例子
- 《Spark与Hadoop大数据分析》——2.3 为何把 Hadoop 和 Spark 结合使用
- vue.js:v-model结合checkbox类型
- spring结合mybatis实现数据库读写分离
- jQuery name属性与checked属性结合获取表单元素值
- 结合 CSS3 & Canvas 模拟人行走的效果
- Python访问街区所有节点最短路径问题,并结合matplotlib可视化
- Jade/Pug学习(四)之结合node如何编译执行
- java运算符优先级和结合性
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
- 结合Wireshark捕获分组深入理解TCP/IP协议之以太网帧