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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Vue项目环境搭建详细总结
Sep 26 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 引用(&amp;)详解
2009/11/20 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
DOM相关内容速查手册
2007/02/07 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python自动抢红包教程详解
2019/06/11 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
资产运营委托书范本
2014/10/16 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书