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

红太狼 2022-06-04 10:26 150阅读 0赞

<!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>