layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁(yè)面的例子
更新時(shí)間：2019年09月14日 22:05:58 作者：九億宅男的夢(mèng)
今天小編就為大家分享一篇layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁(yè)面的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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: '訂單編號(hào)' , minWidth: 210}
]]
})
})
3.點(diǎn)擊跳轉(zhuǎn)
table.on('tool(menu-filter)', function(obj){//申報(bào)按鈕
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+'--狀態(tài)詳情',
title:"訂單管理列表詳情",
shadeClose: true,
shade: 0.8,
offset:"200px",
move:false,
area: ['1300px', '570px'],
content:[url]/content: $("#table1")本頁(yè)彈出id=table的窗口
})
}
})
4.效果
以上這篇layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁(yè)面的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法
這篇文章主要介紹了利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript函數(shù)式編程實(shí)現(xiàn)介紹
函數(shù)式編程是一種編程范式,將整個(gè)程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。 可以看成一條流水線(xiàn),數(shù)據(jù)可以不斷地從一個(gè)函數(shù)的輸出流入另一個(gè)函數(shù)的輸入,最后輸出結(jié)果2022-09-09
前端存儲(chǔ)后端響應(yīng)數(shù)據(jù)超詳細(xì)的實(shí)現(xiàn)方式和注意事項(xiàng)
前端通過(guò)多種方式向后端獲取數(shù)據(jù),下面這篇文章主要介紹了前端存儲(chǔ)后端響應(yīng)數(shù)據(jù)超詳細(xì)的實(shí)現(xiàn)方式和注意事項(xiàng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
JavaScript設(shè)計(jì)模式中的橋接和中介者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的橋接和中介者模式，橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式，而非繼承的設(shè)計(jì)模式，實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象，而中介者設(shè)計(jì)模式是指通過(guò)一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互2022-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇關(guān)于使用JavaScript保存文本文件到本地的兩種方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
基于canvas實(shí)現(xiàn)的鐘擺效果完整實(shí)例
這篇文章主要介紹了基于canvas實(shí)現(xiàn)的鐘擺效果,以完整實(shí)例形式分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)鐘擺動(dòng)態(tài)旋轉(zhuǎn)效果的方法,需要的朋友可以參考下2016-01-01
JVM是一種用于計(jì)算設(shè)備的規(guī)范，它是一個(gè)虛構(gòu)出來(lái)的機(jī)器，是通過(guò)在實(shí)際的計(jì)算機(jī)上仿真模擬各種功能實(shí)現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為：線(xiàn)程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型，感興趣的小伙伴，可以參考下2021-06-06
這篇文章主要介紹了JS刪除數(shù)組指定值常用方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作，分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下2015-11-11