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 相关文章推荐
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
小程序点击图片实现png转jpg
Oct 22 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
PHP开发负载均衡指南
2010/07/17 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
金融专业个人求职信
2013/09/22 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
干部鉴定材料
2014/05/18 职场文书
安全标语口号
2014/06/09 职场文书
师德师风个人总结
2015/02/06 职场文书
英文导游词
2015/02/13 职场文书
创业计划书之养殖业
2019/10/11 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python