星空2020 2023-05-30 19:29 采纳率: 64.1%
浏览 93
已结题

如何让layui table的行显示动态日期,行列转置显示

如何让table的行显示未动态日期？默认为当月。

img


mysql table：
id datetime name score
1 5月1日 张三 43
2 5月1日 李四 87
3 5月1日 王五 90
4 5月1日 JD 23
5 5月1日 JC 54
6 5月1日 小明 32
7 5月1日 小青 12
8 5月1日 才子 23
9 5月1日 彤彤 67
10 5月1日 悠悠 82
11 5月2日 张三 43
12 5月2日 李四 87
13 5月2日 王五 90
14 5月2日 JD 23
15 5月2日 JC 54
16 5月2日 小明 32
17 5月2日 小青 12
18 5月2日 才子 23
19 5月2日 彤彤 67

pdo链接数据库：

<?php
try {
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=mydb;port=3306', 'root', 'root');
} catch (PDOException $e) {
  die('connet error :' . $e->getMessage());
};
$pdo->exec('set names utf8');

前端表格和PHP后台数据score_data.php该如何写？

<script>
layui.use('table', function(){
  var table = layui.table;
  var $ = layui.jquery;
    var tableFilter = layui.tableFilter;
  
  var tableIns = table.render({
    elem: '#test'
    ,url: './score_data.php' //数据接口，json格式
    ,toolbar:'#toolbarDemo'
    ,defaultToolbar: ['filter', 'print']
    ,loading:true
    ,height:'full-20'
    ,skin:''
    ,size:''
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:'5%', sort: true, fixed: 'left'}
      ,{field: 'name', title: '姓名', width:'8%'}
      ,{field: 'datetime', title: '日期', width:'10%'}
      ,{field: 'score', title: '分数', width:'10%'}
         ]]
    ,where:{
        }
        , page: true
        , limits: [50,100,150,200,250,300,350,400,450,500]
        , limit: 50 //每页默认显示的数量
  });
  • 写回答

1条回答 默认 最新

  • 「已注销」 2023-05-31 00:16
    关注

    PHP后台数据score_data.php按月返回数据。
    关于前端表格，参考下面的代码。

    <!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="js/layui-v2.8.1/layui/css/layui.css">
        <script src="js/layui-v2.8.1/layui/layui.js"></script>
    </head>
    <body>
        <div id="test"></div>

        <script>
            layui.use('table', function() {
                var table = layui.table;
                var $ = layui.jquery;
                var tableFilter = layui.tableFilter;

                // 原始的表格数据
                let tableData = [];
                let str = `1 5月1日 张三 43
                    2 5月1日 李四 87
                    3 5月1日 王五 90
                    4 5月1日 JD 23
                    5 5月1日 JC 54
                    6 5月1日 小明 32
                    7 5月1日 小青 12
                    8 5月1日 才子 23
                    9 5月1日 彤彤 67
                    10 5月1日 悠悠 82
                    11 5月2日 张三 43
                    12 5月2日 李四 87
                    13 5月2日 王五 90
                    14 5月2日 JD 23
                    15 5月2日 JC 54
                    16 5月2日 小明 32
                    17 5月2日 小青 12
                    18 5月2日 才子 23
                    19 5月2日 彤彤 67`;

                let strArr = str.split('\n');
                strArr.forEach(item => {
                    item = item.trim();
                    let itemArr = item.split(' ');
                    tableData.push({
                        "id": itemArr[0],
                        "datetime": itemArr[1],
                        "name": itemArr[2],
                        "score": itemArr[3]
                    });
                });

                // 所有日期
                let tableDataDate = new Set();
                // 所有姓名
                let tableDataName = new Set();
                for (let data of tableData) {
                    tableDataDate.add(data.datetime);
                    tableDataName.add(data.name);
                }

                // 处理过的表格数据
                let newTableData = [];
                let temp;
                for (let name of tableDataName) {
                    temp = {
                        name: name
                    };
                    for (let dt of tableDataDate) {
                        let tableDataItem = tableData.find(function(currentValue, index, arr) {
                            return currentValue['name'] == name && currentValue['datetime'] == dt;
                        });
                        if (tableDataItem) {
                            temp[dt] = tableDataItem['score'];
                        } else {
                            temp[dt] = '';
                        }
                    }
                    newTableData.push(temp);
                }

                let tableCols = [];
                tableCols.push({
                    'field': 'name',
                    'title': '姓名'
                });
                for (let dtItem of tableDataDate) {
                    tableCols.push({
                        'field': dtItem,
                        'title': dtItem
                    });
                }

                var tableIns = table.render({
                    elem: '#test',
                    // url: './score_data.php', //数据接口，json格式
                    data: newTableData,
                    loading: true,
                    height: 'full-20',
                    skin: '',
                    size: '',
                    page: true, //开启分页
                    cols: [
                        tableCols
                    ],
                    page: true,
                    limits: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500],
                    limit: 50 //每页默认显示的数量
                });

            });
        </script>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 6月10日
  • 已采纳回答 6月2日
  • 修改了问题 5月30日
  • 创建了问题 5月30日

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion，用Ebsynth utility在视频选帧图重绘，第一步报错，蒙版和帧图没法生成，怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件，显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发，自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了？
  • ¥15 编辑cmake lists 明明写了project项目名，但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题：求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问，已排除网页问题