layui table 中显示图片

使用layui实现物联网设备类型列表

最新推荐文章于 2023-09-08 11:31:31 发布

原创最新推荐文章于 2023-09-08 11:31:31 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍如何利用layui框架渲染一个物联网设备类型的表格，详细展示了表格配置参数，包括单元格最小宽度、分页设置、高度调整、每页显示条数选项及自定义列展示，如设备编号、类型、代码等。

图示：


vm.layui.tableIns = table.render({
    elem: '#layuiTable',
    url: baseURL + 'iotassert/iotassertsensortype/list',
    cellMinWidth: 95,
    page: true,
    height: "full-110",
    limits: [10, 20, 40, 100],
    limit: 20,
    id: "layuiTable",
    cols: [[
        {type: "checkbox", fixed: "left", width: 50},
        {type: "numbers", title: "序号", fixed: "left", width: 50},
        {field: 'sensorType', title: '编号', align: "center", width: 100, sort: true, templet: function (d) {
            return "<a href='#' onclick='vm.update(\"" + d.sensorType + "\");'>" + d.sensorType + "</a>";
        }},
        {field: 'assertName', title: '设备类型', align: "center", width: 130, sort: true},
        {field: 'assertCode', title: '设备代码', align: "center", width: 100, sort: true},
        {field: 'parameterCode', title: '参数代码', align: "center", width: 100, sort: true},
        {field: 'chartName', title: '图表类型', align: "left", width: 160, sort: false},
        {field: 'explain', title: '计量单位', align: "center", width: 100, sort: false},
        {field: 'description', title: '参数描述', align: "left", sort: false},
        {field: 'photo', title: '图标', align: "left", sort: false,
            templet:function (d) { return '<div><img src='+d.photo+'></div>' }

        }
    ]]
});