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: '訂單編號' , 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)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04JS箭頭函數(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-05webpack打包后直接訪問頁面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問頁面圖片路徑錯(cuò)誤的解決方法,文中介紹的非常詳細(xì),對遇到這個(gè)問題的朋友們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動干擾功能,利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動時(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)活動,但是一直沒有做過抽獎(jiǎng)的功能,所以今天來實(shí)現(xiàn)一個(gè)簡單的九宮格抽獎(jiǎng)功能,文中有詳細(xì)的代碼示例供大家參考,感興趣的朋友可以自己動手嘗試一下2023-12-12微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01