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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
原生javascript获取元素样式
Dec 31 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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与javascript对多项选择的处理
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php操作xml
2013/10/27 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python的动态重新封装的教程
2015/04/11 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python如何对齐字符串
2020/07/30 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
中学生期末评语
2014/02/03 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
python爬虫--selenium模块
2021/03/31 Python
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
python实现学员管理系统(面向对象版)
2022/06/05 Python