layer弹出层自定义提交取消按钮的例子


Posted in Javascript onSeptember 10, 2019

首先从js开始

/**
 * 检查是否选中
 */
Sendandre.check = function () {
 var selected = $('#' + this.id).bootstrapTable('getSelections');
 if (selected.length === 0) {
  Feng.info("请先选中表格中的某一记录!");
  return false;
 } else {
  Sendandre.seItem = selected[0];
  console.log(Sendandre.seItem);
  return true;
 }
};

/**
 * 点击修改按钮时
 */
Sendandre.openChangestan = function () {
 if (this.check()) {
  this.layerIndex = layer.open({
   type: 2,
   title: '修改收派标准',
   area: ['800px', '400px'], //宽高
   fix: false, //不固定
   maxmin: true,
   content: Feng.ctxPath + '/sendandreceive/stander_edit?sendid=' + this.seItem.sendid,
   success: function (layero, index) { //成功获得加载changefile.html时
    //// console.log(obj.data.editAble);
    var body = layer.getChildFrame('body', index);
    //console.log(rowselect[0].filename);
    body.find(".sendname").val(Sendandre.seItem.sendname); //通过class名进行获取数据
    body.find(".minwe").val(Sendandre.seItem.minwe);
    body.find(".maxwe").val(Sendandre.seItem.maxwe);
   }
  });
 }
};

然后是弹出层加载的界面

@layout("/common/_dialog.html",{plugins:["laydate","sweet-alert","layer"],js:["/assets/modular/system/basic/sendandre/send_edit.js"]}){
<div class="container-fluid">
 <form id="sendandreForm">
  <div class="row">
   <div class="col-6">
    <div class="form-group">
     <h5>标准名称 <span class="text-danger">*</span></h5>
     <div class="controls">
      <input name="sendname" type="text" class="form-control sendname" id="sendname">
     </div>
    </div>
    <div class="form-group">
     <h5>最小重量 <span class="text-danger">*</span></h5>
     <div class="controls">
      <input name="minwe" type="text" class="form-control minwe" id="minwe">
     </div>
    </div>
    <div class="form-group">
     <h5>最大重量 </h5>
     <div class="controls">
      <input name="maxwe" type="text" class="form-control maxwe" id="">
     </div>
    </div>
   </div>
  </div>
  <div class="row">
   <div class="col-6">
    <div class="text-xs-right">
     <button class="btn btn-info normal-button-width" onclick="ensure()">提交</button>
     <button class="btn btn-inverse normal-button-width m-l-10" onclick="closehe()">取消</button>
    </div>
   </div>
  </div>
 </form>
</div>
@}

然后是js函数实现

/**
 * 关闭此对话框
 */
closehe = function () {
 console.log("close");
 // var inde=parent.layer.getFrameIndex(window.name);
 var index = parent.layer.getFrameIndex(window.name);
 console.log(index);
 parent.layer.close(index);
};

ensure = function () {
 console.log("daodao");
};

途中有一个错误就是把函数名称成为close()了,这个和关键字重复了,导致没有效果出现,关闭不了。

以上这篇layer弹出层自定义提交取消按钮的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
瀑布流布局代码一例
Apr 11 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 #Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 #Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 #Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 #Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 #Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 #Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python中的多线程实例教程
2014/08/27 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
window下eclipse安装python插件教程
2017/04/24 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
什么是makefile? 如何编写makefile?
2013/01/02 面试题
使用tensorflow 实现反向传播求导
2021/05/26 Python
如何在Python项目中引入日志
2021/05/31 Python