layui 表格中怎么显示图片


本文摘自PHP中文网,作者藏色散人,侵删。

layui表格中显示图片的方法:首先在HTML代码中,放置一个table标签,id和lay-filter;然后在js代码中使用自定义模板功能实现逻辑处理;最后声明一个string类型的变量,用来接收图片的名称即可。

本教程操作环境:windows10系统、layui2.5.6,本文适用于所有品牌的电脑。

推荐:《layUI教程》

一、 达到的效果

在这里插入图片描述
二、 代码
HTML代码
HTML代码还是和其他表格的类似,只需要在合适的地方放置一个table标签,id和lay-filter都写上即可。
在这里插入图片描述
JS代码
在JS代码中除了图片那一列和其他列不同之外,其他列都是基本类似,当然如果你写了一些固定列,你会发现在你写的固定列也需要和其他列不同。先说驾驶员图片那一列吧。在这一列中使用到了自定义模板(templet)这一功能。你可借助这一功能实现逻辑处理,以及将原始数据转化成其它格式。当然我这里没有用到数据转化。这里只是利用这一功能添加了一些样式罢了。
在这里插入图片描述

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

layui.use(['table', 'layer'], function () {

            layuiTable = layui.table;

            layer = layui.layer;

 

            tabDriver = layuiTable.render({

                elem: "#tabDriver",

                cellMinWidth: 100,

                height: 'full-200',

                cols: [[

                    { type: 'checkbox', align: "center", fixed: "left", style: "height:110px;"},

                    { type: 'numbers', title: "序号", align: "center", fixed: "left", style: "height:110px;" },

                    { field: 'DriverID', title: 'DriverID', hide: true },

                    { field: 'PassengerCarID', title: 'PassengerCarID', hide: true },

                    { field: 'DriverPicture', title: '驾驶员照片', align: "center", templet: "#imgtmp" },

                    { field: 'DriverCode', title: '驾驶员编号', align: "center", width: 120 },

                    { field: 'DirverName', title: '姓名', align: "center" },

                    { field: 'DriverSex', title: '性别', align: "center" },

                    { field: 'DriverMovePhone', title: '联系电话', align: "center", width: 130 },

                    { field: 'DriverIDNum', title: '身份证号', align: "center", width: 175 },

                    { field: 'OccupationalNumber', title: '从业资格证号', align: "center", width: 120 },

                    { field: 'PassengerCarCode', title: '驾驶车辆编号', align: "center", width: 120 },

                    { field: 'DriverNumber', title: '驾驶证号', align: "center", width: 100 },

                    { field: 'DrivingType', title: '准驾车型', align: "center", width: 100 },

                    { field: 'StrDrivingDay', title: '驾驶证审验期', align: "center", width: 120 },

                    { field: 'StrOccupationalDay', title: '从业资格证审验期', align: "center", width: 150 },

                    { field: 'strSGZUseLifes', title: '上岗证有效期', align: "center", width: 150 },

                    { field: 'DriverRemark', title: '备注', align: "center" },

                    { title: '操作', templet: setOperate, width: 100, align: "center", fixed: "right", style: "height:110px;" },

                ]],

                page: {

                    limit: 10,//指定每页显示条数

                    limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

                },

                data: [],

                toolbar: "#toolbarDemo",

            });

 

            //监听事件

            layuiTable.on('row(tabDriver)', function (obj) {

                //标中选中样式

                obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");

                //选中行,勾选复选框

                obj.tr.find("p.layui-unselect.layui-form-checkbox")[1].click();

            });

        });

自定义模板(templet)
在这里,自定义模板的写法很是简单。最外层用script标签包裹,script标签的type为text/html,id为imgtep,(这里的id要和layui表格中的驾驶员照片那一列中的templet中的id一致)。在script标签中用一个img标签来显示驾驶员的照片,并给img标签一些固定的宽度和高度。其中src中的 {{d.DriverPicture}} 表示从数据库中查询出来的相对应的图片的路径。(我这里数据库保存的是对应图片的路径,相对应的图片保存在项目中的一个专门的文件夹中。而不是利用二进制保存的图片。如果利用二进制保存图片的话在查询完之后要将数据进行转换。)
在这里插入图片描述
如果在layui数据表格中设置了固定列
在相对应的固定列中加上style,然后设置这些固定列的高度。
在这里插入图片描述

阅读剩余部分

相关阅读 >>

layui模块介绍

layui是软件吗

layui表单验证介绍

layui收费吗

如何使用layui实现网页轮播图

layui laypage组件常见用法总结

layui组件有哪些

改造传统jquery扩展为layui模块方法介绍

layui怎么隐藏表格行

layui的iframe跳转链接与页面按钮跳转相关介绍

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




打赏

取消

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

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

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

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

评论

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