layui templet

最新推荐文章于 2023-08-03 15:26:19 发布

weixin_30867015

最新推荐文章于 2023-08-03 15:26:19 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/albert-think/p/10401843.html

本文介绍使用layui框架渲染表格数据的方法，展示了如何通过自定义模板实现服务内容字段的动态链接跳转，以及如何设置表格的各项参数如排序、分页等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function toUrl(refUrl) {
    window.open(refUrl, "服务报告", "_blank");
}
function mm(logName,sourceType,refUrl) {
    /*    */
    if (sourceType==='TSE_MM'||sourceType==='FAE_MM') {
        return '<a style="text-decoration :underline ; text-underline: #00a0e9;" onclick="toUrl(\''+refUrl+'\')">'+logName+'</a>';
    } else {
        return logName;
    }
}
layui.use(['jquery', 'table', 'laypage', 'form'], function () {
    $ = layui.jquery;
    var table = layui.table;
    var forLineId=$("#forLineId").val();
    table.render({
        id: 'dit'
        ,elem: '#dit'
        ,method:"post"
        , url: $("#PageContext").val() + '/workLog/listPage?forLineId='+forLineId
        , cols: [[
            {type: 'numbers', width: '5%'},
            {field: 'logDate', width: '15%', title: '服务日期', sort: false},
            {field: 'userName', width: '12%', title: '服务人', sort: false},
            {field: 'logName', width: '68%', title: '服务内容', sort: false,templet:'<div>{{ mm(d.logName,d.sourceType,d.refUrl)}}</div>'}
        ]]
        , page: true
        , limit: 10//每页条数
        , limits: [10, 20, 30, 40, 50]
        , height: 480
    });