layui表格table自定义列的内容[templet]

layui表格table自定义列的内容, 在table的列属性里面添加上:

 ,templet: function (d) {
                if (d.字段名== "实际值1") { return "要显示的值1"; }
                else if (d.字段名 == "实际值2") { return "要显示的值2"; }
                //............
                 else { return ""; }
        }


<table id="table" lay-filter="table" class="layui-table"></table>

 <button id="btnSearch" class="layui-btn layui-btn-xs layui-btn-radius layui-form-button-Cyan" onclick="PageList()"><i class="layui-icon">&#xe6ac;</i>搜索</button>

 <script type="text/javascript">
     //初始化
     $(function () {
         PageList();
     });
     //查询
     function PageList() {
         var ProjectCode = $("#txtProjectCode").val();

         layui.use(['table'], function () {
             var table = layui.table;

             table.render({
                 elem: '#table'//对应着Table的ID
                 , method: 'POST'
                 , url: '/PM/GetProjectPage'//URL为数据接口的地址
                 , where: { //where就是ajax的data,但不包括分页条件
                     "ProjectCode": ProjectCode,   
                 }
                 , request: {  //分页条件: page  limit
                     pageName: 'page',    //页码的参数名称,默认:page 或者 index、pageIndex
                     limitName: 'size'  //每页数据量的参数名,默认:limit 或者 size、pageSize
                 }
                 , parseData: function (res) {
                     return {
                         "code": 0,//数据类型,必须的
                         "count": res.total,//总记录数,用于分页
                         "data": res.data,//必须的
                     }
                 }
                 , cols: [[
                     { field: 'ProjectID', title: '项目ID', sort: true }
                     , { field: 'ProjectCode', title: '项目编号', sort: true }    
                     , {
                         field: 'ProjectStartDate', title: '开始日期', sort: true,
                         templet: function (d) {
                             return timestampToDateString(d.ProjectStartDate);
                         }
                     }
                     , {
                         field: 'ProjectEndDate', title: '结束日期', sort: true,
                         templet: function (d) {
                             return timestampToDateString(d.ProjectEndDate);
                         }
                     }
                     , {
                         field: 'ProjectStar', title: '星级', sort: true,
                         templet: function (d) {
                             if (d.ProjectStar == "1") { return "★"; }
                             else if (d.ProjectStar == "2") { return "★★"; }
                             else if (d.ProjectStar == "3") { return "★★★"; }
                             else if (d.ProjectStar == "4") { return "★★★★"; }
                             else if (d.ProjectStar == "5") { return "★★★★★"; }
                             else { return ""; }
                         }
                     }
                     , {
                         field: 'ProjectState', title: '项目状态', sort: true,
                         templet: function (d) {
                             if (d.ProjectState == "0") { return "未开始"; }
                             else if (d.ProjectState == "1") { return "进行中"; }
                             else if (d.ProjectState == "2") { return "已挂起"; }
                             else if (d.ProjectState == "3") { return "已关闭"; }
                             else { return ""; }
                         }
                     }
                     , { title: '操作', toolbar: '#barDemo' }
                 ]],
                 page: true,//开启分页功能
                 limit: 25,//当前每页条数
                 limits: [25, 50, 100],//每页条数集合
                 //editMode: "single",//可编辑模式,支持:single单行、row整行、cell单元格
             });
         });
     }

     //时间戳转日期
     function timestampToDateString(dateTime) {
         var timestampStr = dateTime.replace("/Date(", "").replace(")/", "");//将 /Date(1730044800000)/  变成 1730044800000
         var timestamp = parseInt(timestampStr);//字符串转long
         const date = new Date(timestamp);
         return date.toLocaleString().replace(" 00:00:00", "");
     }
 </script>

猜你喜欢

转载自blog.csdn.net/djk8888/article/details/143382416