Настроить столбец сортировки в таблице Google Визуализации

Question

Я успешно внедрил таблицу визуализации google и добавил процесс сортировки сортировки только для одного столбца, добавив прослушиватель событий.

Фон: данные поступают из базы данных для отображения таблицы. У меня есть несколько столбцов таблицы с столбцом «Статус». Этот столбец должен сортироваться в соответствии с другим полем данных, которое не отображает таблицу. (Все данные поступают из базы данных с одним запросом. Все они работают хорошо.) В addListener я сортирую массив, который я получаю из базы данных в соответствии с мое требование и воссоздать таблицу на table.draw(data, options);.

google.visualization.events.addListener(table, 'sort', 
      function(event) { 
     if(event.column == 4){ 
     } 
    } 
} 

Проблема теперь визуализации Google таблицы всегда сортировать по второй колонке во время загрузки. Если пользователь выбрал любой другой столбец для сортировки, сортировка будет сортироваться в соответствии с выбранным столбцом. Все они работают нормально (сортировка столбцов по стрелке вниз в заголовке таблицы).

Но когда я попытался сортировать по полю, я добавил свой собственный процесс сортировки, ранее сортировка не удалялась (я могу видеть стрелку вниз по-прежнему в предыдущем отсортированном заголовке таблицы), поэтому сортировка не работает должным образом с добавленным кодом сортировки. Как предотвратить эту проблему.

Если это неясно или требуется дополнительная информация, пожалуйста, дайте мне знать.

UPDATE: Объяснение

Таблица Жеребьевка из массива, который создает из Databse. это структура

Array 
(
    [0] => Array 
     (
      [Field 1] => test 1 
      [Field 2] =>test 2 
      [sortOrder] => 4 
      [Field 3] => Array 
       (
        [key 1] => val 1 
        [Name] => test 
        [Date] => 2016-08-18 00:00:00 
        [warningLevel] => OK 
       ) 

     ) 
.... 
.... 
... 

Из этого массива я использую [Field 1], [Field 2] и [WarningLevel] поле в качестве столбцов таблицы. Но [warningLevel]column should sort according to [sortOrder] field in array.

Итак, что я сделал, я добавляю слушателя и внутри него. Я перестраиваю (сортирует) весь массив данных и снова создаю таблицу.

google.visualization.events.addListener(table, 'sort', 
      function(event) { 
      if(event.column == 4){ 
vData.sort(function(a, b) { 
        var valueA, valueB; 

        valueA = a['sortOrder']; 
        valueB = b['sortOrder']; 
        if (valueA < valueB) { 
         return -1; 
        } 
        else if (valueA > valueB) { 
         return 1; 
        } 
        return 0; 
       }); 
table.draw(vdata, options); 

} 
    }); 

Все остальные колонки таблиц должны сортировать как нормальный способ (Когда пользователь сортировать один столбец его сортировка и если он двигается, чтобы отсортировать другой столбец ранее сортировки пренебрежения и сортировку вновь выбранный столбца. Сортировано заголовок столбца имеет стрелку значок), и они работают нормально. Проблема в том, что когда я попытался отсортировать столбец статуса, последний отсортированный столбец по-прежнему использует сортировку. Также стрелка в заголовке все еще отображается в раннем отсортированном столбце. Таким образом, эта сортировка столбцов не работает, как ожидалось.

Любая помощь будет оценена по достоинству.

Answer 1

звучит как вам необходимо установить следующие параметры конфигурации перед нанесением на карте
sortColumn & sortAscending

вы контролируете, над которым колонком появляется сортировка стрелка (и направления),
независимо от фактического рода проходящего

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

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Level', 'Status', 'Sort'], 
 
     [1,  'Critical', {v: 1, f: 'Critical'}], 
 
     [2,  'OK',  {v: 2, f: 'OK'}], 
 
     [3,  'Warning', {v: 3, f: 'Warning'}], 
 
     [4,  'Message', {v: 4, f: 'Message'}] 
 
    ]); 
 

 
    var options = { 
 
     allowHtml: true, 
 
     cssClassNames: { 
 
     tableCell: 'googleTableCell' 
 
     }, 
 
     sort: 'event', 
 
     sortAscending: true, 
 
     sortColumn: 0 
 
    }; 
 

 
    var chart = new google.visualization.Table(document.getElementById('chart_div_table')); 
 

 
    google.visualization.events.addListener(chart, 'sort', function (sender) { 
 
     data.sort([{column: 0, desc: !sender.ascending}]); 
 

 
     options.sortAscending = sender.ascending; 
 
     options.sortColumn = sender.column; 
 
     
 
     chart.draw(data, options); 
 
    }); 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div_table"></div>