js+jQuery+ajax，处理数据和功能的实现

最新推荐文章于 2021-09-19 23:04:50 发布

原创最新推荐文章于 2021-09-19 23:04:50 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

小知识同时被 3 个专栏收录

114 篇文章

订阅专栏

小

109 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍了一个结合饼图和表格数据展示的商品价值分布系统。该系统通过饼图直观展示不同价格段商品的占比，并在表格中详细列出具体商品信息，包括链接、浏览量等关键指标。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饼图和表格</title>
<link rel="stylesheet" href="../css/styledemoOne.css" th:href="@{/css/styledemoOne.css}">
<script src="../js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script src="../js/jquery-3.0.0.min.js" th:src="@{/js/jquery-3.0.0.min.js}"></script>
<script src="../js/first.page.js" th:src="@{/js/first.page.js}"></script>
<script src="../module/first.js" th:src="@{/module/first.js}"></script>
<script src="./js/fen.page.js" th:src="@{/js/fen.page.js}"></script>
</head>

<body>
<div id="header">
<div class="box clearfix">
<div class="top-a-box">
<a class="top-a" href="#">店铺预警</a>
</div>
<div class="top-a-box">
<a class="top-a" href="#">流量把控</a>
</div>
<div class="top-a-box top-a-box-sel">
<a class="top-a" href="#">选品定价</a>
</div>
<div class="top-a-box">
<a class="top-a" href="#">客群定位</a>
</div>
</div>
</div>
<div>
<div id="fixedMenu" class="r12-10r">
<div class="fixed-menu-box">
<div class="fixed-menu-main">
<div class="filter">
<div class="filter-btn" id="1" >昨天</div>
<div class="filter-btn filter-btn-sel" id="7">近7天</div>
<div class="filter-btn" id="30">近30天</div>
</div>
</div>
</div>
</div>

<div class="r12-10r">
<div class="module-title">
<h1>商品价值分布图</h1>
</div>
<div class="main_chart">
<div id="chartOne">

</div>
</div>
</div>
<div class="r12-10r">
<div class="module-title clearfix" style="margin-bottom: 20px;">
<h1>宝贝列表</h1>
<p>共找到<span id="spannum"></span>个宝贝</p>
</div>
<div id="table" data-max="19.8">
<table>
<tbody>
<tr class="column">
</tr>





</tbody>
</table>
<table id="rows">

<tr>
<td title="卡通碗可爱家用吃饭碗陶瓷碗儿童米饭碗组合创意韩式餐具碗勺套装" class="td-name">
<a href="https://item.taobao.com/item.htm?id=21843880504" target="_blank"><img src="https://img.alicdn.com/bao/uploaded/i3/1036319921/TB1DNLXXzihSKJjy0FiXXcuiFXa_!!0-item_pic.jpg" class="td-img">卡通碗可爱家用吃饭碗陶瓷碗儿童米饭碗组合创意韩式餐具碗勺套装</a>
</td>
<td>25846</td>
<td>11058</td>
<td>85</td>
<td>521</td>
<td>1955</td>
<td>132</td>
<td>5635.33</td>
</tr>






</table>

</div>



</div>
<script>
//页面加载初始化
//判断时间段
var two=$(".filter-btn-sel").attr("id");
var ztime=betweenandTime(0);
var beginTime=betweenandTime(two);
//获取n天前的日期
bingtu(beginTime,ztime);
//初始化表格的内容
tabodyandtr(beginTime,ztime);

function betweenandTime(val)
{
var dataTime=new Date().getTime()-val*24*60*60*1000;//计算时间差
var oldate=new Date(dataTime);//时间差转换为标准的时间
var Y=oldate.getFullYear()<10?"0"+(oldate.getFullYear()):oldate.getFullYear()+"";//获取年份
var M=(oldate.getMonth()+1)<10?"0"+(oldate.getMonth()+1):(oldate.getMonth()+1)+"";//获取日期
var D=oldate.getDate()<10?"0"+(oldate.getDate()):(oldate.getDate())+"";//获取日期
var newDate=Y+M+D;
return newDate;

}

//封装饼图
function bingtu(beginTime,ztime) {
$.ajax({
url:"http://223.6.252.143:30005/bootPrice1/pishow22",
type:"post",
dateType:"json",
data:{
sellerid:1036319921,
begintime:beginTime,
endtime:ztime,
sortname:"",
sorttype:"",
type:1,
remark:"",
page:""
},
success:function (data) {

//判断是否有数据
if(data.data.rows.length>0)
{

//判断标题
var rowsarray=[];
for (var i=0;i<data.data.rows.length;i++)
{
rowsarray.push(data.data.rows[i][2]);
}
//判断饼图的内容
var nameandvalue=[];
for(var j=0;j<data.data.rows.length;j++)
{
var strname={value:data.data.rows[j][1],name:data.data.rows[j][2]};
nameandvalue.push(strname);
}

http.echartOne(rowsarray,nameandvalue);
}
},
error:function (data) {
alert("bingtu---->>>>>"+"数据开小差了");
}

})

}
//封装表格的内容
function tabodyandtr(beginTime,ztime) {
$.ajax({
url:"http://223.6.252.143:30005/bootPrice1/prishow2?sellerid=1036319921&begintime="+beginTime+"&endtime="+ztime+"&sortname=%E5%AE%9D%E8%B4%9D%E9%A1%B5PV&sorttype=desc&type=2&remark=&page=1",
type:"get",
dateType:"json",

success:function (data) {

if(data.count>0)
{
var datacount=data.count;
$("#spannum").html(datacount);
//循环标题
var tableheader="";
for(var i=1;i<data.data.columns.length;i++)
{
if(i!=2)
{tableheader+="<th>"+data.data.columns[i]+"</th>"}
}
$(".column").html(tableheader);
var tablecontext="";
for (var j=0;j<data.data.rows.length;j++)
{
$("#rows").removeClass("tbody");
tablecontext+="<tr></tr>";
}
$("#rows").html(tablecontext);


// 在循环行的td标签
for(var z=0;z<data.data.rows.length;z++)
{
var tdandtd="";
for(var g=0;g<1;g++)
{
tdandtd+=" <td title="+data.data.rows[z][1]+" class=\"td-name\">\n" +
" <a href="+data.data.rows[z][2]+" target=\"_blank\"><img src="+data.data.rows[z][2]+" class=\"td-img\">"+data.data.rows[z][1]+"</a>\n" +
" </td>\n" +
" <td>"+data.data.rows[z][3]+"</td>\n" +
" <td>"+data.data.rows[z][4]+"</td>\n" +
" <td>"+data.data.rows[z][5]+"</td>\n" +
" <td>"+data.data.rows[z][6]+"</td>\n" +
" <td>"+data.data.rows[z][7]+"</td>\n" +
" <td>"+data.data.rows[z][8]+"</td>\n" +
" <td>"+data.data.rows[z][9]+"</td>";
}
$("#rows tr").eq(z).html(tdandtd);
}
}

},error:function (data) {
alert("表格-----》》》》》》》》数据开小差了");
}

})

}

//选中一个移除上一个
$(".filter-btn").click(function () {
//给选中的同级元素添加样式，并且去除同级的元素
$(this).addClass("filter-btn-sel").siblings().removeClass("filter-btn-sel");
//判断时间段
var two=$(this).attr("id");
var ztime=betweenandTime(0);
var beginTime=betweenandTime(two);
bingtu(beginTime,ztime);
tabodyandtr(beginTime,ztime);
})

</script>
</body>

</html>