您的位置：首页 > 其它

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

2018-01-22 16:46 141 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航