layui自己添加图片按钮并点击跳转页面的例子

1.按钮样式 

<table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table>
<script type="text/html" id="toolbtn">
  <a class="" lay-event="down"><img src="images/add.png" alt=""></a>
</script>

2.定义按钮

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'json/table.json'
    ,height:'877'
    ,cols: [[
      {type:'checkbox',toolbar:'#toolbtn', minWidth: 10}
      ,{type:'nn',toolbar:'#toolbtn', minWidth: 10}
      ,{ field:'id',title: '订单编号' , minWidth: 210}
    ]]
  })
})

3.点击跳转

table.on('tool(menu-filter)', function(obj){//申报按钮
  var data = obj.data;
  var dataId = data.dataId;
  var itemCode = data.code;
  if(obj.event =="down"){
    var name = data.name;
    var url = "OrderListDetails.html" ;
    layer.open({
      type: 2,
      // title: name+'--状态详情',
      title:"订单管理列表详情",
      shadeClose: true,
      shade: 0.8,
      offset:"200px",
      move:false,
      area: ['1300px', '570px'],
      content:[url]/content: $("#table1")本页弹出id=table的窗口
    })
  }
})

4.效果

以上这篇layui自己添加图片按钮并点击跳转页面的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui使用form表单实现post请求页面跳转的方法

    如下所示: window.location.href='url?param=' + paramValue; 上面这种方式实现页面跳转附带参数,容易造成信息泄露: layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏): 这里是在数据表格查询数据时的按钮操作,其他操作类似 <table id="myTable" class="layui-table" lay-filter="myTableDetail&qu

  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"

  • layui自己添加图片按钮并点击跳转页面的例子

    1.按钮样式 <table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event=&q

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • layui 富文本图片上传接口与普通按钮 文件上传接口的例子

    富文本-图片上传 html: <div class="layui-form-item layui-form-text"> <div class="layui-input-block"> <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • Repeater中添加按钮实现点击按钮获取某一行数据的方法

    Repeater中添加按钮实现点击按钮获取某一行数据的方法

    本文以一个asp.net程序为例讲述了Repeater中添加按钮实现点击按钮获取某一行数据的方法,分享给大家供大家参考借鉴之用.具体步骤如下: 1.添加编辑按钮和删除按钮 具体代码如下: <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="

  • 如何给Android中的按钮添加图片功能

    在layout中建一个my_login.xml文件 代码如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="

  • Layui 带多选框表格监听事件以及按钮自动点击写法实例

    不话不多说了,直接上代码吧: <div class="layui-btn-group demoTable" style="margin: 10px;">   <button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button>   <button class="layui

  • layui table 表格模板按钮的实例代码

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png" rel="external nofollow" > <title

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

随机推荐