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


Posted in Javascript onSeptember 14, 2019

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自己添加图片按钮并点击跳转页面的例子

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

Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
You might like
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
javascript 写类方式之十
2009/07/05 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Javascript之String对象详解
2016/06/08 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
js实现简易聊天对话框
2017/08/17 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
临床医学应届生求职信
2013/11/06 职场文书
《自然之道》教学反思
2014/02/11 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
会计师事务所实习证明
2014/11/16 职场文书
Javascript webpack动态import
2022/04/19 Javascript
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript