layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁面的例子
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")本頁彈出id=table的窗口
})
}
})
4.效果

以上這篇layui自己添加圖片按鈕并點(diǎn)擊跳轉(zhuǎn)頁面的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序開發(fā)之選項(xiàng)卡(窗口底部TabBar)頁面切換
本文主要介紹了微信小程序開發(fā)之選項(xiàng)卡(窗口底部TabBar)頁面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個(gè)區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實(shí)例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個(gè)區(qū)別與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2020-05-05
webpack打包后直接訪問頁面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問頁面圖片路徑錯(cuò)誤的解決方法,文中介紹的非常詳細(xì),對(duì)遇到這個(gè)問題的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06
微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能,利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動(dòng)時(shí),觸摸結(jié)束的X/Y坐標(biāo),根據(jù)差值來改變整個(gè)卡片的位置,具體實(shí)例代碼跟隨小編一起看看吧2019-12-12
用JS簡單實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
在網(wǎng)上經(jīng)??匆娨恍┏楠?jiǎng)頁面,也玩過不同類型的抽獎(jiǎng)活動(dòng),但是一直沒有做過抽獎(jiǎng)的功能,所以今天來實(shí)現(xiàn)一個(gè)簡單的九宮格抽獎(jiǎng)功能,文中有詳細(xì)的代碼示例供大家參考,感興趣的朋友可以自己動(dòng)手嘗試一下2023-12-12
微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01

