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

 更新时间:2019年09月10日 10:19:54   作者:图纸t  
今天小编就为大家分享一篇layer弹出层自定义提交取消按钮的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先从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实现简单加载随机色方块

    这篇文章主要介绍了javascript实现简单加载随机色方块的相关资料,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    这篇文章主要介绍了关于Javascript闭包典型应用,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下
    2022-04-04
  • JavaScript 撑出页面文字换行

    JavaScript 撑出页面文字换行

    最近在做Web 页面,虽然不是很喜欢,不过既然公司安排了,就好好做吧,还是学了不少东西。
    2009-06-06
  • js HTML DOM EventListener功能与用法实例分析

    js HTML DOM EventListener功能与用法实例分析

    这篇文章主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • ECMAScript6轮播图实践知识总结

    ECMAScript6轮播图实践知识总结

    最近萌生了用ECMAScript6写一个轮播图的想法,以前就知道ECMAScript6,但是一直没有学,现在终于下决心学了,本篇文章会总结在实践中用到的ES6的知识。
    2016-08-08
  • JavaScript常规加密技术实现方式详解

    JavaScript常规加密技术实现方式详解

    这篇文章主要为大家介绍了JavaScript常规加密技术实现方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JavaScript ECMA-262-3 深入解析(二):变量对象实例详解

    JavaScript ECMA-262-3 深入解析(二):变量对象实例详解

    这篇文章主要介绍了JavaScript ECMA-262-3变量对象,结合实例形式详细分析了JavaScript ECMA变量对象相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 微信小程序手动添加收货地址省市区联动

    微信小程序手动添加收货地址省市区联动

    这篇文章主要为大家详细介绍了微信小程序手动添加收货地址省市区联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 使用js原生实现年份轮播选择效果实例

    使用js原生实现年份轮播选择效果实例

    这篇文章主要给大家介绍了关于如何使用js原生实现年份轮播选择效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 基于ts的动态接口数据配置的详解

    基于ts的动态接口数据配置的详解

    这篇文章主要介绍了基于ts的动态接口数据配置的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论