layui怎么表格中显示图片


本文摘自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是数据对应的字段名

这还不够,接下来的才是关键,因为此时此刻你的表格是这个样子的

layui11.png

阅读剩余部分

相关阅读 >>

layui的table如何做批量删除

layui好用吗

layui怎么设置复选框

layui表单验证介绍

layui icon是什么

layui怎么引用

layui的分页怎么用

layui是什么?有什么作用?

layui实现点击事件的方法

layui如何实现数据分页功能

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...