layer弹出层,结合art-template实现弹出编辑
模板
<!-- 模板 -->
<script id="render-tpl" type="text/html">
<div class="panel-body">
<div class="table-responsive col-lg-10">
<form class="form-horizontal addForm" method="post" action="editsave" name="form1" id="edit_form" enctype="multipart/form-data">
<input type="hidden" id="id" name="id" value="{{data.id}}">
<div class="form-group col-lg-12" id="for_uid">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>预约人:</label>
<span style="display:block;padding-top:6px;">{{data.uid}} - {{data.nickname}}</span>
</div>
<div class="form-group col-lg-12" id="for_department">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>预约科室:</label>
<span style="display:block;padding-top:6px;">{{data.department_name}}</span>
</div>
<div class="form-group col-lg-12" id="for_desc">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>描述:</label>
<span style="display:block;padding-top:6px;">{{data.desc}}</span>
</div>
<div class="form-group col-lg-12" id="for_img">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>配图:</label>
<div class="col-lg-9">
{{ each data.evaluation_img }}
<img src="{{ $value.img_url }}" style="padding-top: 5px;">
{{ /each }}
</div>
</div>
<div class="form-group col-lg-12" id="for_adept">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>答复:</label>
<textarea class="form-control-erbi col-lg-5" name="answer" id="answer" style="min-height: 100px;" >{{ data.answer }}</textarea>
</div>
<div class="form-group">
<div class="col-lg-2 col-lg-offset-3">
<button type="button" class="btn btn-primary col-lg-8" id="edit_btn">保存</button>
</div>
<div class="clear"></div>
</div>
</form>
</div>
<!-- /.table-responsive -->
</div>
</script>
事件
$(".info_reply").on('click',function () {
let id = $(this).data('id');
$.ajax({
type:'POST',
url:'ajaxGetDetail',
data: {id: id},
dataType:'json',
success:function(data){
if(data.errno == 0){
let html = template('render-tpl', {data:data.data});
layer.open({
title : '评估',
type : 1,
skin : 'layui-layer-rim', //加上边框
area : ['1200px', 'auto'], //宽高
content : html
});
}else{
alert(data.errdesc);
return false;
}
}
});
});
$(document).on('click','#edit_btn',function(){
let id = $('#id').val();
let answer = $("#answer").val();
if (!answer) {
layer.msg("请填写答复内容");
return;
}
$.ajax({
type:'POST',
url :'__URL__/ajaxSetAnswer',
data:{
'id' : id,
'answer' : answer
},
dataType:'json',
success:function(data){
if(data.errno == 0){
layer.msg('设置成功');
setTimeout(function(){
$('.layui-layer-close1').trigger('click');
window.location.reload();
},2000);
} else {
layer.msg(data.errdesc);
}
},
error:function(){
layer.msg("网络错误");
}
});
});
后台
/**
* 获取详情
*/
public function ajaxGetDetail() {
$id = $_POST['id'];
$evaluation = M('evaluation');
$user = M('user');
$department = M('department');
$evaluation_info = $evaluation->where(['id'=>$id])->find();
$evaluation_img = M('evaluation_img');
$evaluation_img_list = $evaluation_img->where(['evaluation_id'=>$evaluation_info['id']])->select();
$evaluation_info['evaluation_img'] = $evaluation_img_list ?: [];
$evaluation_info['department_name'] = $department->where(['id'=>$evaluation_info['department_id']])->getField('name');
$evaluation_info['nickname'] = $user->where(['id'=>$evaluation_info['uid']])->getField('nickname');
$this->json->printOutSuccess($evaluation_info);
}
/**
* 设置答案
*/
public function ajaxSetAnswer() {
$id = $_POST['id'];
$answer = $_POST['answer'];
$evaluation = M('evaluation');
$edit_data = [
'status' => 2,
'answer' => $answer
];
$edit_flag = $evaluation->where(['id'=>$id])->save($edit_data);
if ($edit_flag || $edit_flag === 0) {
$this->json->printOutSuccess();
} else {
$this->json->printOutError();
}
}
这种弹出的方式处理问题,能够更加的便利!不用每次都跳转新页面,跳回来,跳回去的。
layer弹出层,结合art-template实现弹出编辑的更多相关文章
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
- js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位(上)
前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...
- 弹出层在兼容模式和IE8模式下显示不正常
弹出层在火狐.谷歌.360极速模式.IE6下都能100%面积正常显示,但在IE8和360的兼容模式下只显示弹出层下半部分或右半部分的内容,在主页面加上: <meta http-equiv=&qu ...
随机推荐
- [Codevs] 一塔湖图
http://codevs.cn/problem/1024/ floyd 走起 #include <iostream> #include <cstdio> #include & ...
- 51 NOD 1244 莫比乌斯函数之和(杜教筛)
1244 莫比乌斯函数之和 基准时间限制:3 秒 空间限制:131072 KB 分值: 320 难度:7级算法题 收藏 关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens) ...
- bootstrap中tab切换的使用
文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...
- 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- django post 403
同一个地址GET方式可以正常访问 在POST 提交数据过程中报403错误, 原来是1.3版本settings.py 文件中 'django.middleware.csrf.CsrfViewMiddle ...
- 研途APP——项目需求分析
研途APP--项目需求分析 1.作业描述 项目 内容 课程 软件工程实践 作业链接 团队作业第二次-需求规格说明书 团队名称 8rookies 作业目标 作业正文 研途APP--项目需求分析 其他参考 ...
- 分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset
一.box-shadow语法 box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset(阴 ...
- 设计自用的golang日志模块
设计自用的golang日志模块 golang的原生日志模块不能满足需求,而开源的第三方包,也不完全够用.用户较多的logrus,却没有rotate功能,这已经是众所周知的.对于运维来说,当然是希望日志 ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_16-课程预览功能开发-接口测试
cms和课程的微服务重启 从数据库内找一条数据 进入到了断点 拼装课程信息 ,然后进行远程调用 抛出异常 可能是开了两个cms服务的事,负载均衡 到了另外一个服务里面 ,关掉一个 把02关掉,重启cm ...