数组转化成字符串join(",");

你的名字 2022-06-01 06:11 246阅读 0赞

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script th:src="@\{/js/jquery-3.0.0.min.js\}"></script>  
</head>  
<body>  
<style>  
.grade-list span \{  
display: block;  
width: 20px;  
height: 20px;  
border: 1px solid \#000;  
float: left;  
\}  
  
  
..biao span \{  
display: block;  
width: 20px;  
height: 20px;  
border: 1px solid \#000;  
float: left;  
\}  
  
  
.grade-list \{  
margin-bottom: 20px;  
\}  
  
  
.idd\{  
display:block;  
 width:20px;  
 height:20px;  
 float:left;  
border: 1px solid \#000;  
\}  
  
  
.grade-list label \{  
display: block;  
float: left;  
\}  
.clearfix::after \{  
content: '';  
height: 0;  
display: block;  
visibility: hidden;  
clear: both;  
\}  
  
  
.clearfixbiao::after \{  
content: '';  
height: 0;  
display: block;  
visibility: hidden;  
clear: both;  
\}  
  
  
.butActive \{  
background: violet;  
\}  
  
  
.butActivebiao \{  
background: violet;  
\}  
.main\{  
font-size:120%;  
color:red;  
\}  
</style>  
<div>  
<button>请选择</button>  
<p>宝贝</p>  
<p>店铺详情</p>  
  
  
</div>  
<div class="grade-list clearfix" id="tel">  
<div class="label\_btn clearfix"><span id="121416009"  class="cc"></span><label>棒球鞋</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>足球鞋</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>球鞋</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>女生上衣</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>男生上衣</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>毛巾</label></div>  
<div class="label\_btn clearfix"><span id="125044005"  class="cc"></span><label>鸭翅</label></div>  
</div>  
<div>  
<input type="text" id="begin" placeholder="开始时间" value="">  
<input type="text" id="end" placeholder="结束时间" value="">  
</div>  
  
<div>  
        <select id="selectOption">  
            <option>类目属性</option>  
            <option>活跃店铺</option>  
            <option>宝贝</option>  
        </select>  
    </div>  
    <div class="biao">  
    </div>  
      
    <button id="btn">点击加载表格</button>  
    <table border="1">  
        <thead id="tr">  
        </thead>  
        <tbody id="body">  
        </tbody>      
        </table>  
        <script type="text/javascript">  
          
      //选中  
        $("button").click(function()\{  
        $("p").toggleClass("main");  
        \})  
          
          
          
          
        var selectop;  
         
    //切换选择项  
    $(".label\_btn>span").click(function()\{  
    toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。  
    $(this).toggleClass("butActive");  
    \})  
      
        //下拉框改变事件  
        $("\#selectOption").change(function () \{  
        selectop=$("\#selectOption option:selected").val();   
        $.ajax(\{  
                 url:"http://211.95.60.40:16868/yanshudemo/shop",  
                 type:"post",  
                 data:\{  
                  type:selectop  
                 \},  
                 dataType:"json",  
                 success:function (data) \{  
                     console.log(data.columns.length);  
                    var  str="";  
                    for(var i=0;i<data.columns.length;i++)  
                    \{  
                    //英文转汉文   
                    str+="  <div class='label\_biao clearfixbiao'> <span class=\\"idd\\" id="+data.columns\[i\]  +" ></span><label>"+data.columns\[i\]  +"</label>   </div>";  
                    \}  
                       $(".biao").html(str);  
                     
                       //切换选择项  
                       var label = $(".label\_biao");  
                       for (var i = 0; i < label.length; i++) \{  
                           $(".label\_biao").eq(i).children("span").click(function() \{  
                               $(this).toggleClass("butActivebiao");  
                           \})  
                       \}   
                 \},error:function () \{  
                  alert("数据开小差了");  
                 \}  
             \})  
\});   
      
      
      
    $("\#btn").click(function()\{  
    var lab = $(".label\_btn");  
      
    //转化为数组   
    var checkarr=\[\];  
    for(var i=0;i<lab.length;i++)\{  
    if( lab.eq(i).children("span").attr("class").indexOf("butActive")>-1 )\{  
    checkarr.push( lab.eq(i).children("span").attr("id") );  
    \}  
    \}  
      
    //数组转化成字符串  
    var str=checkarr.join(",");  
    console.log("str>"+str);  
    /\* //存放指标数组  
            var arrid = \[\];  
            for (var j = 0; j < $(".idd").length; j++) \{  
                if ($(".idd").eq(j).attr("class").indexOf("butActivebiao") > -1) \{  
                    console.log($(".idd").eq(j).attr("id"));  
                \}  
            \} \*/  
      
    var label = $(".idd");  
        var arrid=\[\];  
  for(var j=0;j<label.length;j++)  
  \{  
    
  if( label.eq(j).attr("class").indexOf("butActivebiao")>-1 )\{  
  arrid.push(label.eq(j).attr("id"));  
\}   
  \}  
  var strid=arrid.join(",");  
  console.log("sss---->"+strid);  
    //获取时间  
    var startTime=$("\#begin").val();  
        var endTime=$("\#end").val();  
        console.log("endTime>"+endTime);  
        //selectOption 获取下拉选中项  
     var selectop=$("\#selectOption option:selected").val();  
        /\* http://localhost:8080/sbsys/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 \*/  
           $.ajax(\{  
                url:"http://localhost:8080/sbsys/actives",  
                type:"post",  
                dataType:"json",  
                data:\{  
                fields:strid,  
                begintime:startTime,  
                endtime:endTime,  
                cids:str,  
                type:selectop,  
                index:1,  
                size:10  
                \},  
                success:function (data) \{  
                console.log(data);  
     //  console.log("1111==>"+data.data.rows.length);  
      //循环表头  
     var str="";  
                  str="<tr>" +  
                   "<td>"+data.data.columns\[0\]+"</td>" +  
                   "<td>"+data.data.columns\[1\]+"</td>" +  
                   "<td>"+data.data.columns\[2\]+"</td>" +  
                   "<td>"+data.data.columns\[3\]+"</td>" +  
                   "<td>"+data.data.columns\[4\]+"</td>" +  
                   "<td>"+data.data.columns\[5\]+"</td>" +  
                   "</tr>";  
                   $("\#tr").html(str);  
                   //循环表的内容   
                   var row="";  
                   for(var j=0;j<data.data.rows.length;j++)  
                    \{  
                    row+="<tr>" +  
                       "<td>"+data.data.rows\[j\]\[0\]+"</td>" +  
                       "<td>"+data.data.rows\[j\]\[1\]+"</td>" +  
                       "<td>"+data.data.rows\[j\]\[2\]+"</td>" +  
                       "<td>"+data.data.rows\[j\]\[3\]+"</td>" +  
                       "<td>"+data.data.rows\[j\]\[4\]+"</td>" +  
                       "<td>"+data.data.rows\[j\]\[5\]+"</td>" +  
                       "</tr>";  
                    \}  
                   $("\#body").html(row);  
                \},error:function (data) \{  
                    alert("no data")  
                \}  
                  
            \})   
      
    \})   
   
          
   
         
          
          
        </script>  
  
  
</body>  
</html>