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

如何让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日