Layui之templet超实用的几种用法【吊打官方文档】

       一生猿，一世猿。
                    —— 猿医生·yys 

 

目录

一、前言

二、正文

 

 

一、前言

       “甭管好不好用，先好看再说”，产品经理一句话，阐述了我两年的心声 （再现任公司已两年，依然是升职加薪无望的

攻城狮，哈哈 ~），相信有很多猿友跟我一样，看着自己写的优秀代码，不论是注释布局，效率逻辑都是那么的完美，可

偏偏，前台的UI 页面，如此之不忍直视 ~

       经过多轮角逐，最后采用 Layui框架 来进行 xuewei 调整，不管如何，“好看 ”了..就是最大的进步...

       正如标题所言，小主在实际运用中，对于 table数据表格中 templet自定义列模板的几种用法，总结了几点小心得。

              注意：重点是第 4点，是我自己研究发现的，官方文档可没有哦 ~ 记得重点看下

       在此，记录一下，分享给大家。

 

 

二、正文

       步入正题，前台采用 Layui - table 展示数据表格，案例如下：

        table.render(layui.$.extend({
            elem: '#yysTable' // 指定 table容器的选择器
            , url: '/yys/listData'
            , cols: [[ // 表头
                  {field: 'id', width: 100, title: '序号' }
                , {field: 'name', width: 100, title: '单位名称' }
                , {field: 'contact', width: 100, title: '联系人' }
                , {field: 'telephone', width: 100, title: '联系电话' }
                , {field: 'introduce', width: 500, title: '公司简介' }
                , {field: 'type', width: 100, title: '单位类型' }
                , {field: 'status', width: 100, title: '状态'}
            ]]
        }));

       此案例就是一个简单的数据表格的数据渲染。

       结合案例来看，如 序号、单位名称、联系人、联系电话，我们可直接与传递的数据进行绑定，无需特殊处理。

       但如 公司简介(字符串包含html代码)、单位类型(数值/枚举，需展示对应的字符串).. 来说，就需进行特殊处理 。

      这时就需要使用到 templet属性，接下来，通过上述字段，来演示 templet的不同用法及场景选择：

 

 1、绑定模板选择器

       如 “公司简介”字段来说，我们通过富文本编辑器存储到数据库，字符串可能会内嵌 html标签以及代码，这时需展示的内

容不在单一(展示时就需特殊处理)，就类似情况我们可以创建其对应的模板，存储在页面任意位置，代码如下：

    table.render(layui.$.extend({
        elem: '#yysTable' // 指定 table容器的选择器
        , url: '/yys/listData'
        , cols: [[ // 表头
              {field: 'id', width: 100, title: '序号' }
            , {field: 'introduce', width: 500, title: '公司简介', templet: '#introduceHtml' } // templet <绑定模板选择器>
        ]]
    }));

    

    // 官方定义：如果自定义模版的字符量太大，推荐采用此种方式

 

2、函数转义 < layui 2.2.5 开始支持 >

       如 “状态”字段来说，无非就是<1.正常 / 2.禁用> 如性别一样，已经百分百确定的枚举，前台展示效果为数值对应的字符串描述，就类似情况我们可以通过函数转义固定语法进行处理，代码如下：

    table.render(layui.$.extend({
        elem: '#yysTable' // 指定 table容器的选择器
        , url: '/yys/listData'
        , cols: [[ // 表头
              {field: 'id', width: 100, title: '序号' }
            , {field: 'status', width: 100, title: '状态', templet: function (provider) {
                    return provider.status == 1 ? '正常' : '禁用';
                } // templet <函数转义>
        ]]
    }));

 

 3、直接赋值模板字符

       如 “单位名称”字段 点击需跳转详情页面，需通过标签简单处理下，就类似情况可以通过直接赋值模板字符固定语法进行处理，代码如下：

    table.render(layui.$.extend({
        elem: '#yysTable' // 指定 table容器的选择器
        , url: '/yys/listData'
        , cols: [[ // 表头
              {field: 'id', width: 100, title: '序号' }
            , {field: 'name', width: 100, title: '单位名称', templet: '
{{d.name}}
'}  // templet <直接赋值模版字符>
        ]]
    }));

    // 此处应注意：<官方定义>使用此种方式，所写代码需用一层
进行包裹，否则无法读取到模板

 

 4、直接赋值模板字符 + js代码  --- （推荐）

       重点来了，在项目中，小主研究了一种超级实用的方式，一句话，“只要能嵌套js代码，没有什么是问题 ”。

       如 “单位类型”字段，同样是枚举类得值，唯一不同的是，此处枚举是可变的，说不定，哪天就会新增或减少一种类型。

所以，这里我们不能在页面中将值写死，我们需要将后台传递的枚举值进行逻辑判断，展示对应的字符串描述。

       代码如下：

 

    table.render(layui.$.extend({
        elem: '#yysTable' // 指定 table容器的选择器
        , url: '/yys/listData'
        , cols: [[ // 表头
              {field: 'id', width: 100, title: '序号' }
            , {field: 'type', width: 100, title: '单位类型', templet: '
{{getProviderType(d.type)}}
' }
            ]]
    }));


    

 

 

                       Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。