1. 程式人生 > >Layui 表格 list頁顯示圖片

Layui 表格 list頁顯示圖片

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素選擇器(推薦id選擇器)
            , id: 'dateTable'
            , even: true //開啟隔行背景
            //, size: 'sm' //小尺寸的表格
            , height: 'full-150'    //容器高度
            , cols: [[
                  {field: 'id', title: '商品ID', sort: true, width: 80 , align: 'center'} 
                , {field: 'img1', title: '圖片',width: 130 , align: 'center',templet:'<div><img style="height:100px;width:100px;" src="{{d.img1}}"></div>'}
                , {field: 'parentTypeName', title: '一級分類', width: 100 , align: 'center'}
                , {field: 'typeName', title: '二級分類', width: 120 , align: 'center'}
                , {field: 'name', title: '商品名稱',width:350 , align: 'center'}
                , {field: 'discountName', title: '活動名稱',width:350 , align: 'center'}
                , {field: 'prince', title: '商品原價', width: 100 , align: 'center'}
                , {field: 'realprice', title: '商品現價', width: 100 , align: 'center'}
                , {field: 'minLimite', title: '最小限購', width: 100 , align: 'center'}
                , {field: 'color', title: '顏色', width: 110 , align: 'center'}
                , {field: 'postage', title: '郵費', width: 80 , align: 'center' }
                , {field: 'remarks', title: '備註', width: 120 , align: 'center'}
                , {fixed: 'right', title: '操作', width: 320, align: 'center', toolbar: '#barOption'} //這裡的toolbar值是模板元素的選擇器
            ]]
            , url: '#(ctxPath)/wmall/admin/commodityList/tableData'
            , method: 'get'
            , request: {
                pageName: 'pageNumber' //頁碼的引數名稱,預設:page
                ,limitName: 'pageSize' //每頁資料量的引數名,預設:limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //預設採用30
            , loading: true
            , done: function (res, curr, count) {
            }
        });

樣式

<style type="text/css">
td div.layui-table-cell{height:100px;
     line-height: 100px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px 15px;
    overflow: hidden;
    }
</style>