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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ruiguang21/article/details/78775644
<!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 id="rows">-->
                   
                   
                   
                    
                    
                    
                    </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>
展开阅读全文

没有更多推荐了,返回首页