layui自己添加图片按钮并点击跳转页面

1.按钮样式 

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自己添加图片按钮并点击跳转页面_第1张图片

你可能感兴趣的:(layui)