vis.js перерисовать и изменить данные

Question

Я использую временную шкалу vis.js для отображения событий и получения всех элементов, отображаемых с помощью вызова ajax.

В настоящее время у меня есть фильтры для работы на странице, поэтому график времени идет в определенном диапазоне, и это работает нормально.

Что я пытаюсь сделать, это сузить отображаемую информацию. Мои первоначальные мысли о том, как это сделать, - это изменить вызов ajax, чтобы он возвращал json только той информации, которая мне нужна.

Пример:

1. Выберите регион:
   • Северной Англия
   • Южной Англии
2. Аякс назвал бы фильтром в базе данных, так что бы только элементы дисплея, которые имеют это свойство в определенном столбце
3. Я бы затем передрабил ш шкалы времени с использованием нового JSON с AJAX вызова

Где я наступающем отключился является частью 1 и 2, кто-нибудь знает, как я хотел бы указать другой Ajax URL, а затем, как перекроить таблицу?

Я пробовал timeline.redraw(): не повезло, поэтому я сначала уничтожил таблицу, но все еще не купил (timeline.destroy(); timeline.redraw();) работает команда comman, но не перерисовывает ,

Вот мой код (обратите внимание на дату фильтры работают нормально) HTML

<!-- this is just the filter section --> 
<div id="filters" style="margin: 10px; background-color: RGB(229,229,229); border-radius: 10px; padding: 5px"> 
     <div id="filterscontainer" style="display: inline-block"> 
      <table> 
       <tr> 
        <td> 
         <div style="float: left; font-size: 1.25em">Filters</div> 
       </td> 
       <td></td> 
       <td> 
        <div id="expandcollapseFilters" class="chevron bottom" title="Click to expand the filter menu" style="float: left"></div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="filtercontent" style="display: none"> 
     <table> 
      <tr><td colspan="2"><button id="reset">Reset all filters</button></td></tr> 
      <tr> 
       <td> 
        <table> 
         <tr> 
          <td style="text-align: right">Date from:</td> 
          <td> 
           <input id="dateFrom" class="date"/></td> 
          <td style="text-align: right">Date to:</td> 
          <td> 
           <input id="dateTo" class="date"/></td> 
          <td> 
           <button id="dateRangeFilter">Apply Filter</button></td> 
         </tr> 
        </table> 
       </td> 
       <td></td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div id="currentlyShowing"><h3>Currently showing: <span class="currentlyShowing">All items</span></h3></div> 
<div id="mytimeline"></div> 
<div id="loading">loading...</div> 

Javascript/JQuery:

<script type="text/javascript"> 
    $("#filterscontainer").on("click", function() { 
     $('#currentlyShowing').slideToggle('slow'); 
     $('#filtercontent').slideToggle('slow'); 
     if ($("#expandcollapseFilters").prop("class") === "chevron top") { 
      $('#expandcollapseFilters').prop('collapseFilters', "Click here to collapse the filter menu"); 
      $('#expandcollapseFilters').addClass('bottom').removeClass('top'); 
     } else { 
      $('#expandcollapseFilters').prop('collapseFilters', "Click to expand the filter menu"); 
      $('#expandcollapseFilters').addClass('top').removeClass('bottom'); 
     } 
    }); 
    $.ajax({ 
     type: "POST", 
     url: 'Ajax.asp?RT=RoadMap', data: {}, 
     success: function (data) { 
      var result = JSON.parse(JSON.parse(JSON.stringify(data))); 
      document.getElementById('loading').style.display = 'none'; 
      var items = new vis.DataSet(result); 
      var options = { 
       orientation: 'top', 
       groupOrder: 'order', 
       showCurrentTime: false, 
       align: 'left', 
       editable: false, 
       minHeight: '300px', 
       min: new Date(2016, 0, 1),    // lower limit of visible range 
       max: new Date(2018, 0, 1),    // upper limit of visible range 
       zoomMin: 1000 * 60 * 60 * 24 * 7,   // one week in milliseconds 
       zoomMax: 1000 * 60 * 60 * 24 * 365  // about a year 
      }; 
      var container = document.getElementById('mytimeline'); 
      var timeline = new vis.Timeline(container, items, options); 
      document.getElementById('dateRangeFilter').onclick = function() { 
       var dateFrom = $("#dateFrom").val(); 
       var dateTo = $("#dateTo").val(); 
       if (dateFrom.length < 1 || dateTo.length < 1 || dateFrom > dateTo) { //checking if the date to date is after the from date 
        alert("Please select a valid date range"); 
       } else { //converting the resturn results to a date format accepted by timeline 
       var dateFromDay = dateFrom.substr(0, 2); 
       var dateFromMonth = dateFrom.substr(3, 2); 
       var dateFromYear = dateFrom.substr(6, 4); 
       var dateToDay = dateTo.substr(0, 2); 
       var dateToMonth = dateTo.substr(3, 2); 
       var dateToYear = dateTo.substr(6, 4); 
       timeline.setWindow(dateFromMonth + "-" + dateFromDay + "-" + dateToYear, dateToMonth + "-" + dateToDay + "-" + dateToYear); 
       } 
      }; 
     } 
    }); 
    $().ready(function() { 
     $("#reset").on("click", function() { 
      $.datepicker._clearDate("#dateFrom"); 
      $.datepicker._clearDate("#dateTo"); 
     }); 
     $("#dateFrom").datepicker({ 
      beforeShowDay: $.datepicker.noWeekends, 
      dateFormat: "dd/mm/yy" 
     }); 
     $("#dateTo").datepicker({ 
      beforeShowDay: $.datepicker.noWeekends, 
      dateFormat: "dd/mm/yy" 
     }); 
    }); 
</script> 

Answer 1

Я получил это работает, ради кого-то перед этой проблемой , вот как вы это делаете/обойдете.

Объявите переменные «пункты» перед вызовом АЯКСА, Помещенных вам обработчик событий, прежде чем объявить переменный «временную шкалу» В этом, очистить переменные «пункты» (items.clear();) и добавить новый его содержимое (items.add();). вы можете либо построить строку в parethesis, либо, как я использовал вызов ajax, и иметь возвращаемые данные внутри.

ниже рабочий код, который в настоящее время фильтры с помощью конкретных регионов:

var items; 
    var timeline; 
    $.ajax({ 
     type: "POST", 
     url: 'Ajax.asp?RT=RoadMap', data: {}, 
     success: function (data) { 
      var AllData = JSON.parse(JSON.parse(JSON.stringify(data))); 
      document.getElementById('loading').style.display = 'none'; 
      items = new vis.DataSet(); 
      items.add(AllData); 
      var options = { 
       orientation: 'top', 
       groupOrder: 'order', 
       showCurrentTime: false, 
       align: 'left', 
       editable: false, 
       minHeight: '300px', 
       min: new Date(2016, 0, 1),    // lower limit of visible range 
       max: new Date(2018, 0, 1),    // upper limit of visible range 
       zoomMin: 1000 * 60 * 60 * 24 * 7,   // one week in milliseconds 
       zoomMax: 1000 * 60 * 60 * 24 * 365  // about a year 
      }; 
      var container = document.getElementById('mytimeline'); 
      $("#regionFilter").on("click", function() { 
       var regionSelected = $("#regionSelector").val(); 
       if (siteSelected === "") { 
        alert("Please Select the region you would like to see the information of"); 
       } else { 
        items.clear(); // note this is the clear function which removes the data but doesn't destroy the timeline 
        $.get("Ajax.asp?RT=RoadMapUpdate&Region=" + regionSelected, function (AjaxReturn) { 
         var AjaxReturn = JSON.parse(JSON.parse(JSON.stringify(AjaxReturn))); 
         items.add(AjaxReturn); // this is where the timeline get's re-populated 
        }); 
       } 
      }); 
      $("#reset").on("click", function() { // this function is tied to a button I added which resets the filters, it puts wverything back to the way it was at load 
       items.clear(); 
       items.add(AllData); 
      }); 
      timeline = new vis.Timeline(container, items, options);