来自数据库的行不要比较Ajax,Jquery

时间:2017-04-20 12:13:41

标签: javascript jquery ajax laravel

我有问题来比较表中的所有行。我的意思是我想要来自数据透视表(save_events)的比较元素与来自表(事件)的行。我从两个表中获取此元素。它的下一个我想要它比较和几乎工作,但只在一行工作。当我在save_events表中获得2行时,它只能用于一行。 我真的不知道我怎么能想到它。

有关数据库中表格的信息: 1.Save_events有5列。 列名:id,create_at,update_at,users_id,events_id 2.Events有7列。 列名:id,name,title,start,end,create_at,update_at

它应该如何运作: 我得到的很少rols例如。具有角色的用户'主持人'可以在日历上创建事件(我使用fullcalendar.io),在日历上显示的下一个事件和普通用户可以注册事件。为此我建立了许多关系。接下来认为所有事件都取决于它们的颜色,例如。如果标题是'Wydzial 1'是红色的。接下来,如果用户注册事件,此事件会更改颜色为灰色。这最后的想法几乎可以工作,但只适用于1个事件。我的意思是如果用户注册eg.2事件只有1个事件将颜色更改为灰色。我想也许它不起作用因为一个表是获取数组元素而第二个是对象所以我将第二个更改为数组然后进行比较但仍然无效。



<script src="{{ asset('js/fullcalendar') }}/fullcalendar.js"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
<script type="text/javascript">

$(document).ready(function() {

var base_url = '{{ url('/') }}'; 
$.ajax(
{    
    type: "GET",
    url: "{!!route('color')!!}",             
    dataType: "json",
    data:{"events_id": '' },                 
    success: function(data)
    {
      var JSONString=data;


    $('#bootstrapModalFullCalendar').fullCalendar({
weekends: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
eventClick: function(event, jsEvent, view) {
  $('#modalTitle').html(event.title);
  $('#modalBody').html(event.name);
  $('#eventUrl').attr('href','/home/zapis/'+event.id);
  $("#startTime").html(moment(event.start).format('HH:mm '));
  if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
  else $("#endTime").html('');					    
  $('#fullCalModal').modal();
  return false;
},

eventLimit: true,
FirstDay: 1,
    contentheight : 650,
    editable : true,
    allDay : false,
    aspectRatio : 2,
    slotLabelFormat : 'HH:mm:ss',
    timeFormat : 'HH:mm',
    displayEventEnd : true,
    events: {
url: base_url + '/api',
error: function() {
  alert("cannot load json");
}
},
eventColor: 'white',

eventAfterRender: function (event, element, view) {				

for (i = 0; i < data.eventColored.length; i++)
{	
console.log(event.id+'=event.id');
console.log(data.eventColored[i]);

if(event.id==data.eventColored[i].events_id)
{

        element.css('background-color', '#cccccc');

}

  else
  {
    if (event.title == "Wydzial 1") 
    {
        element.css('background-color', '#378006');
        }
        else if(event.title == "Wydzial 2")
        {
        element.css('background-color', '#ff0000');	
        }
        else if(event.title == "Wydzial 3")
        {
        element.css('background-color', '#73e600');	
        }
        else{
        element.css('background-color', '#0066ff');
        }
      }			
}


}
});		    
}	       		        				   
});
});

</script>
&#13;
&#13;
&#13;

控制台结果:

  

1 = event.id home:250:4 Object {events_id:1} home:251:4   1 = event.id home:250:4 Object {events_id:8} home:251:4 5 = event.id   home:250:4 Object {events_id:1} home:251:4 5 = event.id home:250:4   对象{events_id:8} home:251:4 6 = event.id home:250:4 Object {   events_id:1} home:251:4 6 = event.id home:250:4 Object {events_id:   8} home:251:4 7 = event.id home:250:4 Object {events_id:1}   home:251:4 7 = event.id home:250:4 Object {events_id:8} home:251:4   8 = event.id home:250:4 Object {events_id:1} home:251:4 8 = event.id   home:250:4 Object {events_id:8} home:251:4 9 = event.id home:250:4   对象{events_id:1}主页:251:4 9 = event.id home:250:4 Object {   events_id:8} home:251:4 10 = event.id home:250:4 Object {events_id:   1} home:251:4 10 = event.id home:250:4 Object {events_id:8}

1 个答案:

答案 0 :(得分:1)

你说

  

“只有1个事件将颜色更改为灰色”

看看你的数据,我认为这将是ID 8的元素。您还希望ID为1的元素也变为灰色。

然而,这并非严格属实。元素1 变灰,但只是片刻。这是因为当你匹配一个元素时,你不会脱离循环。

因此元素1的流程如下:

  1. 启动循环,其中Event.ID == 1,data.eventColored [i] .events_id == 1.
  2. 如果陈述为真,则背景颜色会变为灰色。
  3. 循环的下一次迭代,其中Event.ID == 1,但data.eventColored [i] .events_id == 8
  4. 如果声明为false,则“else”代码会运行,并根据标题将背景颜色更改为其他颜色。
  5. “8”改变颜色没有问题的原因是因为它恰好是eventColored数组中的最后一个元素。因此,一旦匹配,就没有其他元素可以循环,因此不会发生随后的不匹配,并且不会覆盖灰色背景颜色变化。

    要防止出现此问题,您只需在匹配ID时跳出循环即可。这将阻止循环继续并在下一个ID不匹配时再次返回背景。

    这将解决它:

    if(event.id==data.eventColored[i].events_id)
    {
      element.css('background-color', '#cccccc');
      break; //stop the loop
    }