本文链接： https://blog.csdn.net/mu_wind/article/details/97498951

在前端系列（二）中，layui table模块的优点得到了初步体现：简捷方便，美观优雅，后续的文章将继续对layui table模块进行总结，我们将体会到它的另一个优点：功能丰富。
根据前文步骤，将数据库数据通过layui table渲染到前端表格，非常简单，但现在问题来了，如果数据库存储的信息不能被直接展示，例如说，数据库有一个类型字段：0和1，0表示国产，1表示进口，前端显然不能直接显示0和1，而是应该根据后端返回的数字进行判断，展示相应的内容。layui table的自定义模板功能能非常方便地解决这个问题，首先看下效果图：
数据库数据：
在这里插入图片描述
前端展示：

方式一：函数转义

所谓函数转义，就是在表格cols的对应列中直接写一段函数：

table.render({
            elem: '#goods_table'
            , id: 'goodsReload'
            , url: '/test/getGoodsInfo'
            , method: 'get'
            , title: '用户表'
            , toolbar: '#goods_headerBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols:
                [[{type: 'checkbox', fixed: true},
                   {
                        field: 'type',
                        title: '类&emsp;型',
                        width: 100,
                        align: 'center',
                        templet: function (d) {
                            var caseType = d.type;
                            if (caseType == 0) {
                                return '<font color="#0000FF">国&ensp;产</font>';
                            } else {
                                return '<font color="#5FB878">进&ensp;口</font>';
                            }
                        }
                    }
                   // 其他行省略，可去前端系列（二）获得完整代码
                   {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#goos_lineBar',
                        align: 'center',
                        width: 120,
                        style: 'font-size:13px'
                    }
                ]]
        });
    });

这样的写法，简单直接，缺点是复用性差，有可能导致代码冗余。

方式二：绑定模版选择器

下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据。

<script type="text/html" id="typeTpl">
    {{#  if(d.type ==0 ){ }}
    <p style="color: #0000FF">国&ensp;产</p>
    {{#  } else { }}
    <p style="color: #00FF00">进&ensp;口</p>
    {{#  } }}
</script>

table.render中的对应列templet内容中直接引用上面的模板即可

table.render({
            elem: '#goods_table'
            , id: 'goodsReload'
            , url: '/test/getGoodsInfo'
            , method: 'get'
            , title: '用户表'
            , toolbar: '#goods_headerBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols:
                [[{type: 'checkbox', fixed: true},
                   {
                        field: 'type',
                        title: '类&emsp;型',
                        width: 100,
                        align: 'center',
                        templet: '#typeTpl'
                    }
                   // 其他行省略，可去前端系列（二）获得完整代码
                   {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#goos_lineBar',
                        align: 'center',
                        width: 120,
                        style: 'font-size:13px'
                    }
                ]]
        });
    });

这样的话，如果有多处表格使用同一个模板，代码复用性将得到加强。
还有一种方式：直接赋值模版字符

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

前端系列（三）：layui表格-使用自定义模板templet

方式一：函数转义

方式二：绑定模版选择器

猜你喜欢