Layui 表格 list頁顯示圖片
阿新 • • 發佈:2019-01-10
// 表格渲染 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>