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="{{ in_data.id }}">
<div class="form-group col-lg-12">
<label class="control-label col-lg-3 text-right"><span class="control-label required-mark">*</span>营业执照:</label>
<span class="input-group file-caption-main col-lg-5" style="float: left;">
<div class="form-control file-caption kv-fileinput-caption"
style="overflow: hidden;line-height: 23px;">
请上传营业执照,尺寸不限
</div>
<input style="display: none;" class="file-real" id="business_license"
name="business_license" type="file" multiple=""/>
<div class="input-group-btn file-btn">
<div class="btn btn-primary btn-file" id="for_business_license">
<i class="glyphicon glyphicon-folder-open"></i>
<span class="hidden-xs">上传图片</span>
</div>
</div>
</span>
<span class="col-lg-4 text-left erbi-form-right">
<span class="layer_open_onepic" data-url="{{ in_data.business_license }}"><img src="{{ in_data.business_license }}" width="30" /></span>
</span>
</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="col-lg-2">
<button type="button" class="btn btn-danger col-lg-8" id="cancel_btn">取消</button>
</div>
<div class="clear"></div>
</div>
</form>
</div>
<!-- /.table-responsive -->
</div>
</script>
js
/**
* 上传图片
*/
$(".upload-img").on('click', function () {
let id = $(this).parent().data('id');
$.ajax({
type: 'POST',
url: 'ajaxGetApplyInfo',
data: {id:id},
dataType: 'json',
success: function (data) {
if (data.errno == 0) {
let html = template('render-tpl', {in_data: data.data});
layer.open({
title: '上传营业执照',
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['1200px', '400px'], //宽高
content: html
});
} else {
alert(data.errdesc);
return false;
}
}
});
});
$(document).on('click','#cancel_btn',function(){
layer.closeAll();
});
$(document).on('click','#edit_btn',function(){
$("#edit_form").ajaxForm({
dataType: "json",
success : function(obj){
if(obj.errno == 0){
layer.msg('已保存');
setTimeout(function() {
layer.closeAll();
window.location.reload();
},1000);
}else{
layer.msg(obj.errdesc);
}
return false;
}
});
let id = $("#id").val();
if (!id) { // 添加
if(!dealImg('#business_license','请选择图片')) {
return;
}
}
$("#edit_form").submit();
return false;
});
art-template 弹出编辑的更多相关文章
- datatables.js 简单使用--弹出编辑框或添加数据框
内容:选中某一条记录,弹出编辑框 环境:asp.net mvc , bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...
- 使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
在前篇随笔<使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理>中介绍了Vue-TreeSelect组件的使用,包括使用v-modal绑定值,normalizer ...
- layer弹出层,结合art-template实现弹出编辑
模板 <!-- 模板 --> <script id="render-tpl" type="text/html"> <div cla ...
- 【LigerUI实战】Grid弹出编辑popup
最近为分公司的项目做外援,做起了全栈的活.被公司自研架构磨灭的几乎忘掉了其他技能,正好新项目决定重新搭个架构,与同事们讨论过后,决定Spring+MyBatis+SpringMVC+CXF+Liger ...
- layer结合art实现弹出功能
模板 <!-- 模板 --> <script id="render-tpl" type="text/html"> <table c ...
- [JavaScript] 弹出编辑框
效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口 Style <style> .black_overlay{ display: none; position: absolut ...
- PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框
零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- iOS开发 编辑框被系统弹出的软键盘遮挡问题
我们在开发注冊界面的时候,最后几个注冊条件经常easy被系统弹出的键盘遮挡,例如以下图: 能够看见,邮箱条件被遮挡掉了,怎么解决呢?我是通过UITextField的代理加计算偏移量: - (void) ...
随机推荐
- ELK教程2:Kibana的安装
kibana作为ElastciSearch的数据查询展示界面,集成了很多的功能,本文主要讲述如下部署kibana. 安装 安装命令如下: # 下载kibana的npm wget https://art ...
- Java 冒泡排序算法
public class StringSampleDemo { public static void main(String[] args) { int[] arr = {1, 2, -20, 20, ...
- 怎么样在vue-cli的项目里面引入element ui
第一步:先进入到项目里面 npm i element-ui -S 第二步: import Vue from 'vue'; import ElementUI from 'element-ui'; //这 ...
- 2、vueJs基础知识02
vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...
- thymeleaf错误解决办法
Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "username&q ...
- Java设计模式之二工厂模式
在上一篇中我们学习了单例模式,介绍了单例模式创建的几种方法以及最优的方法.本篇则介绍设计模式中的工厂模式,主要分为简单工厂模式.工厂方法和抽象工厂模式. 简单工厂模式 简单工厂模式是属于创建型模式,又 ...
- 单点登录 sso -- cas CAS 原理 流程 分析
Yelu大学研发的CAS(Central Authentication Server) 下面就以耶鲁大学研发的CAS为分析依据,分析其工作原理.首先看一下最上层的项目部署图: 部署项目时需要部署一个独 ...
- Spark(五十):使用JvisualVM监控Spark Executor JVM
引导 Windows环境下JvisulaVM一般存在于安装了JDK的目录${JAVA_HOME}/bin/JvisualVM.exe,它支持(本地和远程)jstatd和JMX两种方式连接远程JVM. ...
- useState 的介绍和多状态声明(二)
useState的介绍 useState是react自带的一个hook函数,它的作用是用来声明状态变量. 那我们从三个方面来看useState的用法,分别是声明.读取.使用(修改).这三个方面掌握了, ...
- nrm -- 一键切换npm源
0. 背景 先描述一下没有nrm时我们是怎样使用npm源的 查看npm源地址,终端中输入 npm config list 可以看到npm源 metrics-registry = "https ...