筛选条件以及请求数据打包_请求数打包-CSDN博客

本文链接：https://blog.csdn.net/zxmin1302/article/details/81330733

需要私有jquery以及bootstrap

html页面部分

</div>

<span class="fa fa-users" style="margin-right:15px;margin-left: 10px;"></span>成员

</div>

</div>

<span class="fa fa-calendar" style="margin-right:15px;margin-left: 10px;"></span>日期

</div>

</li>

</li>

</li>

</li>

</li>

<span class="timsInfo">未设置截止时间</span>

</li>

</ul>

</div>

<span class="fa fa-tags" style="margin-right:15px;margin-left: 10px;"></span>标签

</div>

</div>

//任务筛选条件数据整合js部分

//展示筛选条件

$('.conditions').on('click',function(){

$('.screen').show();

});

//隐藏筛选条件

$('.close').on('click',function(){

$('.screen').hide();

});

$('.content').on('click',function(){

$('.screen').hide();

});

$('.screen').hide(); //默认隐藏

function dataZH(data1,data2,data3,data4,data5){

//data1 项目id data2 开始时间 data3 就是时间 data4 用户id data5 标签id

var projectId = data1,start = data2,end=data3,userId = data4,labelId = data5;

//判断用户id是否大于0 大于0 数据是数组否则为null

if(userId.length>0){

userId = JSON.stringify(userId.join(',')).replace(/\"/g, "");

}else{

userId = null;

}

//判断开始时间是的是"" ,数据是为null 否则是获取的数据

if(start == ""){

start = null

}

//判断结束时间是的是"" ,数据是为null 否则是获取的数据

if(end == ""){

end = null;

}

//判断标签id是否大于0 大于0 数据是数组否则为null

if(labelId.length>0){

labelId = JSON.stringify(labelIdSx.join(',')).replace(/\"/g, "");

}else{

labelId = null;

}

//数据字段整理

var data = {

"projectId" : projectId,

"planStartDate" : start,

"planEndDate" : end,

"users" : userId,

"labelList" : labelId

}

console.log(data);

//返回数据字段

return data;

}

//获取参与人信息

$(function(){

$.ajax({

url:'aaa', //更具需求请求

type:'POST',

dataType:'json',

async:false,

data : {

"projectId": projectId

success:function(data){

if(data.status==='success'){

userSxShow(data.data);

}else{

spop({

autoclose: 1000

});

}

error: function(data){

spop({

autoclose: 1000

});

}

});

//展示隐藏参与人信息

$('.showUser').on('click',function(){

$('.userSx').toggle(100);

});

//展示参与人信息筛选条件

function userSxShow(data){

var html = '';

for(var i=0;i<data.length;i++){

if(data[i].dingUserAvatar){

html+='<li style="height: 40px;line-height: 35px;border-bottom: 1px solid #ebeaeb;" data-static="0" data-userid="'+data[i].userId+'">'+

'<img src="'+data[i].dingUserAvatar+'" style="width: 30px; height: 30px; border-radius: 100%;">'+

'<span style="margin-left: 15px;">'+data[i].name+'</span>'+

'<span class="fa fa-check check" style="float: right;line-height: 35px;display:none;"></span>'

}

html+='</li>'

}

$('.userSx').append(html);

}

//监听用户筛选点击

var userIdSX = new Array();

//监听标签数据点击

var labelIdSx = new Array();

//点击项目参与人员ul下的li

$("ul.userSx").on("click","li",function(){ //只需要找到你点击的是哪个ul里面的就行

if(userIdSX){

userIdSX.splice(0,userIdSX.length);

}

if(labelIdSx){

labelIdSx.splice(0,labelIdSx.length);

}

var $this = $(this);

if($this.attr("data-static") == 0){

$(this).attr("data-static",1);

$(this).find('.check').show();

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var users = userIdSX;

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}else{

$(this).attr("data-static",0);

$(this).find('.check').hide();

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}

});

//日期展示

$('.showTime').on('click',function(){

$('.timeSx').toggle(100);

});

//点击日期ul下的li

$("ul.timeSx").on("click","li",function(){ //只需要找到你点击的是哪个ul里面的就行

if(userIdSX){

userIdSX.splice(0,userIdSX.length);

}

if(labelIdSx){

labelIdSx.splice(0,labelIdSx.length);

}

var $this = $(this);

if($this.attr("data-static") == 0){

//遍历日期

$("ul.timeSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

$(this).attr("data-static",0);

$(this).find('.check').hide();

}

});

$(this).attr("data-static",1);

$(this).find('.check').show();

//获取当前日期

var time = $(this).find('.timsInfo').text();

timeStartEnd(time);

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}else{

$(this).attr("data-static",0);

$(this).find('.check').hide();

$("ul.timeSx").attr("data-startdate",'0'),

$("ul.timeSx").attr("data-enddate",'0');

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

$("ul.timeSx").attr("data-startdate",''),

$("ul.timeSx").attr("data-enddate",'');

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}

});

//开始时间、截止时间数据格式化

function timeStartEnd(data){

var date = new Date();

var Y = date.getFullYear() + '-';

var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';

var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());

var TD = ((date.getDate()+1) < 10 ? '0'+((date.getDate())+1) : (date.getDate())+1);

var taday = {

"planStartDate" : Y+M+D+" 00:00:00",

"planEndDate" : Y+M+D+" 23:59:59"

}; //今天的日期

var delay = {

"planStartDate" : null,

"planEndDate" : null

}

var noday ={

"planStartDate" : null,

"planEndDate" : null

}; //为设置日期

switch(data){

case "已延期":

$("ul.timeSx").attr("data-startdate",delay.planStartDate);

$("ul.timeSx").attr("data-enddate",delay.planEndDate);

break;

case "今天":

$("ul.timeSx").attr("data-startdate",taday.planStartDate);

$("ul.timeSx").attr("data-enddate",taday.planEndDate);

break;

case "明天":

$("ul.timeSx").attr("data-startdate",tomorrow().planStartDate);

$("ul.timeSx").attr("data-enddate",tomorrow().planEndDate);

break;

case "本周":

$("ul.timeSx").attr("data-startdate",getWeek().planStartDate);

$("ul.timeSx").attr("data-enddate",getWeek().planEndDate);

break;

case "本月":

$("ul.timeSx").attr("data-startdate",getMonth().planStartDate);

$("ul.timeSx").attr("data-enddate",getMonth().planEndDate);

break;

default:

$("ul.timeSx").attr("data-startdate",noday.planStartDate);

$("ul.timeSx").attr("data-enddate",noday.planEndDate);

}

//明天的数据

function tomorrow() {

var date = new Date();

date.setDate(date.getDate()+1);//获取AddDayCount天后的日期

var Y = date.getFullYear();

var M = (date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1);//获取当前月份的日期

var D = (date.getDate()<10?'0'+date.getDate():date.getDate());

var startDate = Y+"-"+M+"-"+D+ " 00:00:00";

var endDate = Y+"-"+M+"-"+D+ " 23:59:59";

var data = { "planStartDate" : startDate, "planEndDate" : endDate }

return data;

}

//本周日期

function getWeek() {

var date = new Date();

var today = date.getDay();

var stepSunDay = -today + 1;

if (today == 0) {

stepSunDay = -7;

}

var stepMonday = 7 - today;

var time = date.getTime();

var monday = new Date(time + stepSunDay * 24 * 3600 * 1000);

var sunday = new Date(time + stepMonday * 24 * 3600 * 1000);

//本周一的日期（起始日期）

var startDate = transferDate(monday,"strat"); // 日期变换

//本周日的日期（结束日期）

var endDate = transferDate(sunday,"end"); // 日期变换

var data = { "planStartDate" : startDate+' 00:00:00', "planEndDate" : endDate+' 23:59:59' }

return data;

}

//本月日期

function getMonth() {

var start = new Date();

start.setDate(1);

// 获取当前月的最后一天

var date = new Date();

var currentMonth = date.getMonth();

var nextMonth = ++currentMonth;

var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);

var oneDay = 1000 * 60 * 60 * 24;

var end = new Date(nextMonthFirstDay - oneDay);

var startDate = transferDate(start,"start"); // 日期变换

var endDate = transferDate(end,"end"); // 日期变换

var data = { "planStartDate" : startDate+' 00:00:00', "planEndDate" : endDate+' 23:59:59' }

return data;

}

//日期转化

function transferDate(date,data) {

var Y = date.getFullYear()+'-';

var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';

var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());

if(data == "strat"){

return Y+M+D;

}

else{

return Y+M+D;

}

//获取标签信息

$(function(){

$.ajax({

url:'aaa',

type:'POST',

dataType:'json',

async:false,

data : {

"companyId": companyId

success:function(data){

if(data.status==='success'){

labelSxShow(data.data.result);

}else{

spop({

autoclose: 1000

});

}

error: function(data){

spop({

autoclose: 1000

});

}

});

//标签隐藏参与人信息

$('.showLabel').on('click',function(){

$('.labelSx').toggle(100);

});

//展示参与人信息筛选条件

function labelSxShow(data){

var html = '';

for(var i=0;i<data.length;i++){

html+='<li style="height: 40px;line-height: 35px;border-bottom: 1px solid #ebeaeb; margin-left: 12px;" data-static="0" data-labelid="'+data[i].id+'">'+

'<i class="fa fa-tags" style="color:'+data[i].label_colour+'"></i>'+

'<span style="margin-left: 15px;">'+data[i].label_name+'</span>'+

'<span class="fa fa-check check" style="float: right;line-height: 35px;display:none;"></span>'

}

$('.labelSx').append(html);

}

//点击标签ul下的li

$("ul.labelSx").on("click","li",function(){ //只需要找到你点击的是哪个ul里面的就行

if(userIdSX){

userIdSX.splice(0,userIdSX.length);

}

if(labelIdSx){

labelIdSx.splice(0,labelIdSx.length);

}

var $this = $(this);

if($this.attr("data-static") == 0){

$(this).attr("data-static",1);

$(this).find('.check').show();

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}else{

$(this).attr("data-static",0);

$(this).find('.check').hide();

//监听用户数据id

$("ul.userSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-userid")){

userIdSX.push($(this).attr("data-userid"));

}

});

//标签数据id

$("ul.labelSx").find('li').each(function(){

if($(this).attr("data-static") == 1){

if($(this).attr("data-labelid")){

labelIdSx.push($(this).attr("data-labelid"));

}

});

//获取日期

var planStartDate = $("ul.timeSx").attr("data-startdate"),

planEndDate = $("ul.timeSx").attr("data-enddate");

var data = dataZH(projectId,planStartDate,planEndDate,userIdSX,labelIdSx); //获取整合数据信息

showboradlist(data); //请求看板数据

}

});

整合后的数据

data= {abelList:"100003,100002",

planEndDate:"2018-08-02 23:59:59",

planStartDate:"2018-08-02 00:00:00",

projectId:"0eaa6da91ea542239cc8b2330277f514",

users:"0204705c003e4119a201e07c62f2283b,05093d8453fc4fe0b1c350f76a1eaaaf"

}

页面请求数据展示效果以及页面动态刷新后的展示