如何在用户友好的树形视图html列表中显示具有datetime属性的记录（php + mysql）？

Question

I got some records with column 'id','time','catagory','content' saved in MySql database. Demo PHP (Actually I am using Yii, the data were provided by dataprovider.)

And I need to present the data in a user-friendly way.

The list were group by "Week"=>"Date"=>"record". Demo Output html

Could some give me an smart way to do the php loop?

Should I need to do an Week loop to check the exist week and saved an key-value array,

then to check the any record were on the same day and saved in another array,

then finally do the output loop to show the html?Many thanks.

<div class="tree">
<ul>
    <li>
        <span>2014, Week 2 , 2014-01-05~2014-01-11</span>
            <ul>
                <li>
                    <span>Monday, January 6</span>
                        <ul>
                            <li>
                                <div class="record">
                                    <span>08:00:30</span><br>
                                    <span>Play</span><br>
                                    <span>Do something good...</span><br>
                                </div>
                            </li>
                        </ul>
                </li>

Answer 1

function getRecords($result){
$arr = new array();
while ($row = myqsli_fetch_array($result)) {
        $arr[] = $row;
    }
return $arr;
}
$week;
$date;
$records = getReceords($queryresultfromyourdb);
foreach($records as $rec)
{
if ($week != $rec["Week"])
{
echo $rec["Week"] . '<br>';
$week = $rec["Week"];
}
if ($date != $rec["Date"])
{
echo $rec["Date"] . '<br>';
$date = $rec["Date"];
}
echo $rec["record"] . '<br>';
}

Answer 2

This is the php code:

<?php
//fake data setting
$recordlist=Array();
$record=Array();
$record['time']='2014-01-06 08:00:30';
$record['catagory']='Play';
$record['content']='Do something good...';
$recordlist[]=$record;

$record=Array();
$record['time']='2014-01-07 10:00:30';
$record['catagory']='Study';
$record['content']='Do something fun...';
$recordlist[]=$record;

$record=Array();
$record['time']='2014-01-07 12:00:30';
$record['catagory']='Sport';
$record['content']='Bike';
$recordlist[]=$record;

$record=Array();
$record['time']='2014-12-15 12:00:30';
$record['catagory']='Sport';
$record['content']='Bike';
$recordlist[]=$record;

$record=Array();
$record['time']='2014-12-12 12:01:30';
$record['catagory']='Sport';
$record['content']='Bike';
$recordlist[]=$record;
?>
<?php
//output
//how to output just as http://jsfiddle.net/euj89/


// Refactor Array
foreach($recordlist as $record){
    $date = explode(" ",$record['time']);
    $hour = $date[1];
    $date = $date[0];
    $week = date("W",strtotime($date));
    $month = date("F",strtotime($date));
    $year = date("Y",strtotime($date));
    $newRecordList[$year][$month][$week][$date][$hour]['time']       = $record['time'];
    $newRecordList[$year][$month][$week][$date][$hour]['category']   = $record['catagory'];
    $newRecordList[$year][$month][$week][$date][$hour]['content']    = $record['content'];
}

//OUTPUT
?><div class="tree"><ul><?
        foreach ($newRecordList as $year => $recordByYear) {
            foreach ($recordByYear as $month => $recordByMonth) {
                foreach ($recordByMonth as $week => $recordByWeek) {
                    ?><li><span><?=$year?>, Week <?=$week?> , date</span><ul><?
                    foreach ($recordByWeek as $day => $recordByDay) {
                        ?><li><span><?=date("l",strtotime($day))?>, <?=$month?> <?=$day?> </span><ul><?

                            foreach ($recordByDay as $hour => $recordByHour) {
                                ?><li><div class="record">
                                    <span><?=$hour?></span><br>
                                    <span><?=$recordByHour['category']?></span><br>
                                    <span><?=$recordByHour['content']?></span><br>
                                </div></li><?
                            }
                            ?></ul></li><?
                    }
                    ?></ul></li><?
                }
            }
        }
?></ul></div><?

Output should be like this: