layui自己添加圖片按鈕并點擊跳轉(zhuǎn)頁面的例子
更新時間:2019年09月14日 22:05:58 作者:九億宅男的夢
今天小編就為大家分享一篇layui自己添加圖片按鈕并點擊跳轉(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.點擊跳轉(zhuǎn)
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+'--狀態(tài)詳情', title:"訂單管理列表詳情", shadeClose: true, shade: 0.8, offset:"200px", move:false, area: ['1300px', '570px'], content:[url]/content: $("#table1")本頁彈出id=table的窗口 }) } })
4.效果
以上這篇layui自己添加圖片按鈕并點擊跳轉(zhuǎn)頁面的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換
本文主要介紹了微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實例分析【 5 個區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別與相關(guān)使用注意事項,需要的朋友可以參考下2020-05-05微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能,利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動時,觸摸結(jié)束的X/Y坐標(biāo),根據(jù)差值來改變整個卡片的位置,具體實例代碼跟隨小編一起看看吧2019-12-12微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法,結(jié)合實例形式分析了微信小程序提交input信息到后臺相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01