本文摘自PHP中文网,作者angryTom,侵删。

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了
如果你想了解更多关于layui的知识,可以点击:layui教程
1、jsp代码
1 2 3 4 | <div class= "demoTable" >
<button class= "layui-btn" data-type= "publish" >发布Banner</button>
</div>
<table class= "layui-hide" id= "banner" ></table>
|
2、然后是js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | layui.use( 'table' , function (){
var table = layui.table;
table.render({
elem: '#banner'
,url: '../banner/list'
,cols: [[
{field: 'ban_id' ,width:20,title: 'ID' , sort: true }
,{field: 'ban_img' ,title: '图片' ,templet: '<div><img src="{{ d.ban_img }}"></div>' }
,{field: 'ban_content' , title: '备注' }
,{field: 'ban_href' , title: '地址' }
]]
});
});
|
注意:这里需要注意的是,加入了templet,这里就是加入表单元素等模板。详情参考:
https://www.layui.com/doc/modules/table.html#templet
其中这个d代表的就是服务器返回的数据,ban_img是数据对应的字段名
这还不够,接下来的才是关键,因为此时此刻你的表格是这个样子的

阅读剩余部分
相关阅读 >>
layui的table如何做批量删除
layui好用吗
layui怎么设置复选框
layui表单验证介绍
layui icon是什么
layui怎么引用
layui的分页怎么用
layui是什么?有什么作用?
layui实现点击事件的方法
layui如何实现数据分页功能
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui怎么表格中显示图片