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

 更新时间:2019年09月14日 22:05:58   作者:九亿宅男的梦  
今天小编就为大家分享一篇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自己添加图片按钮并点击跳转页面的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

    利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

    这篇文章主要介绍了利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript函数式编程实现介绍

    JavaScript函数式编程实现介绍

    函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。 可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果
    2022-09-09
  • 前端存储后端响应数据超详细的实现方式和注意事项

    前端存储后端响应数据超详细的实现方式和注意事项

    前端通过多种方式向后端获取数据,下面这篇文章主要介绍了前端存储后端响应数据超详细的实现方式和注意事项,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • JavaScript设计模式中的桥接和中介者模式

    JavaScript设计模式中的桥接和中介者模式

    这篇文章主要介绍了JavaScript设计模式中的桥接和中介者模式,桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象,而中介者设计模式是指通过一个中介者对象封装一系列的对象交互
    2022-06-06
  • js实现简单的拖拽效果

    js实现简单的拖拽效果

    这篇文章主要为大家详细介绍了js实现简单的拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 使用JavaScript保存文本文件到本地的两种方法

    使用JavaScript保存文本文件到本地的两种方法

    今天小编就为大家分享一篇关于使用JavaScript保存文本文件到本地的两种方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 基于canvas实现的钟摆效果完整实例

    基于canvas实现的钟摆效果完整实例

    这篇文章主要介绍了基于canvas实现的钟摆效果,以完整实例形式分析了JavaScript结合html5的canvas技术实现钟摆动态旋转效果的方法,需要的朋友可以参考下
    2016-01-01
  • 详解JVM系列之内存模型

    详解JVM系列之内存模型

    JVM是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的。JVM的内存区域可以被分为:线程、栈、堆、静态方法区。本文将介绍JVM的内存模型,感兴趣的小伙伴,可以参考下
    2021-06-06
  • JS删除数组指定值常用方法详解

    JS删除数组指定值常用方法详解

    这篇文章主要介绍了JS删除数组指定值常用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    这篇文章主要介绍了javascript实现对表格元素进行排序操作,分别可以实现点击之后排序和还原,和排升序和降序的功能,文章末尾附完整代码,感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论