layui table data 里怎么加跳转链接呢?

提问 已结
4 489
云华熊
云华熊 2018-10-7
悬赏:20飞吻
版本:layui 浏览器:
这是前端显示

这是代码

请教这个邮箱怎么添加链接进去?
跪求大神解答
回帖
  • 代码示例:
    {
    field: "title",
    title: "标题",
    templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</a></div>'
    }
    注意事项:
    主要代码在templet参数
    文档地址: https://www.layui.com/doc/modules/table.html#templet
    templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</a></div>'
    其中{{ d.href }}为你表格返回数据的 data.href ,也可以是你事先写好的例如
    templet: '<div><a href="//baidu.com" target="_blank" class="layui-table-link">{{ d.title }}</a></div>'
    特别注意!!!如果你在templet内写html代码 必须加<div></div>进行外层包裹!!!这里一定要被一层 <div></div> 包裹,否则无法读取到模板!!

    这个是在js内最简便的操作方法 主要注意加个templet参数即可,如果你有很多个跳转等等 js几行都写不下的 可以改成这样 代码示例
    js执行前 -js外部
    <script type="text/html" id="testTpl">
    <a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</a>
    <a href="//baidu.com" target="_blank" class="layui-table-link">跳转百度</a>
    <a href="//layui.com" target="_blank" class="layui-table-link">跳转layui</a>
    </script>

    js部分
    {
    field: "title",
    title: "标题",
    templet: '#testTpl'
    }

    示例地址: https://www.layui.com/demo/table/style.html
    如果觉得有用请采纳哦。
    我不是大神,解决问题谁都会,问题是谁动手执行解决方案就是解决你问题的真正方法
    0 回复
  • jxljt
    2018-10-7
    用模板应该能实现
    0 回复
  • 使用自定义列模板可以实现!具体看看官网的文档
    0 回复
  • 云华熊
    2018-10-8
    @CHC云 感谢
    0 回复