今天模仿360做了一个时间轴的效果,具体demo地址:http://www.haorooms.com/uploads/example/history_date/ 因为数据是后台php查询数据库得到的,如下:
[
{
"id": "8",
"version_name": "werwer2342222222222222222222222222222",
"update_time": "2014-09-11",
"update_content": "<p>2333333333333333333333333333333333333333333333333333333333234234234</p><p>企鹅王i如金额我软件额外热金额我日Joe污染Joe往日金额我日金额我日金额我日金额我日金额王荣i金额为</p>"
},
{
"id": "2",
"version_name": "24243.55.66",
"update_time": "2014-09-03",
"update_content": "<p>玩儿玩儿werwerewr</p><p>werwerewrwer</p><p>玩儿玩儿</p><p>werwer</p><p><br/></p>"
},
{
"id": "1",
"version_name": "69.6.44",
"update_time": "2014-09-02",
"update_content": "<p><strong>温温热污染温热污染二位二位人</strong></p><p>玩儿玩儿</p><p>2013年66</p>"
},
{
"id": "9",
"version_name": "ertertert",
"update_time": "2014-09-02",
"update_content": "<p style=\"text-align: left;\"><strong>456456546546546</strong></p><p style=\"text-align: left;\">456546</p>"
},
{
"id": "7",
"version_name": "而额外热玩儿娃儿",
"update_time": "2013-09-20",
"update_content": "<p>而额外热舞热舞热舞热舞热舞热污染</p><p>werewrewrwerewrwer</p>"
},
{
"id": "6",
"version_name": "2013-09900009wer93",
"update_time": "2013-09-04",
"update_content": "<p>sdfewrwerwerwerwerewrewrwerewrew</p>"
}
]
想要得到时间的字段,循环history-date这个div,所以,对查询的数据进行格式化,格式化成如下格式:
{
"year": [
"2014",
"2013"
],
"year_data": {
"2013": [
{
"id": "7",
"version_name": "而额外热玩儿娃儿",
"update_time": "2013-09-20",
"update_content": "<p>而额外热舞热舞热舞热舞热舞热污染</p><p>werewrewrwerewrwer</p>"
},
{
"id": "6",
"version_name": "2013-09900009wer93",
"update_time": "2013-09-04",
"update_content": "<p>sdfewrwerwerwerwerewrewrwerewrew</p>"
}
],
"2014": [
{
"id": "8",
"version_name": "werwer2342222222222222222222222222222",
"update_time": "2014-09-11",
"update_content": "<p>2333333333333333333333333333333333333333333333333333333333234234234</p><p>企鹅王i如金额我软件额外热金额我日Joe污染Joe往日金额我日金额我日金额我日金额我日金额王荣i金额为</p>"
},
{
"id": "2",
"version_name": "24243.55.66",
"update_time": "2014-09-03",
"update_content": "<p>玩儿玩儿werwerewr</p><p>werwerewrwer</p><p>玩儿玩儿</p><p>werwer</p><p><br/></p>"
},
{
"id": "1",
"version_name": "69.6.44",
"update_time": "2014-09-02",
"update_content": "<p><strong>温温热污染温热污染二位二位人</strong></p><p>玩儿玩儿</p><p>2013年66</p>"
},
{
"id": "9",
"version_name": "ertertert",
"update_time": "2014-09-02",
"update_content": "<p style=\"text-align: left;\"><strong>456456546546546</strong></p><p style=\"text-align: left;\">456546</p>"
}
]
}
}
对于后端的同学来说,这样格式化是很简单的事情,但是作为前端,格式化数据有一定困难,下面记录一下格式化的过程!
$res= “查询数据库之后的结果”
$res_year = array(); //新建存放年的数组
$res_year_data = array(); //新建年所在数组下面的数据
foreach($res as $k=>$v){ //循环查询结果
$year = sub_str($v['update_time'], 4,false); // 截取时间2014-09-09前面的四个字,注这里和js是有区别的啊!
if(!in_array($year,$res_year)){ //判断截取的year在不在刚刚新建的数组中,若不在
$res_year[] = $year; //添加year进入res_year数组
}
if(isset($res_year_data[$year])){ //如果$res_year_data已经设置了
$res_year_data[$year][] = $v;//把循环结构赋值给 $res_year_data[$year][]
}else{
$res_year_data[$year] = array(); //定义 $res_year_data[$year] 为一个数组
$res_year_data[$year][] = $v; //把循环结构赋值给 $res_year_data[$year][]
}
}
$res = array('year'=>$res_year,'year_data'=>$res_year_data); //创建返回结果集
die(json_encode($res)); //输出json
exit();
然后就出来了格式化的数据了!
关于php数据库查询的一些问题,后面文章会总结。