Google可视化表中的“自定义排序”列

Question

I have successfully implemented a google visualization table and add customize sorting process just for one column by adding events listener.

Background : Data comes from the database to render the table. I have few table columns with 'Status' column. This column should sort according to another data field which isn't displaying the table.(All data comes from the database with one query. They all working well. ) In addListener I sort the array that I'm getting from the database according to my requirement and recreate the table by table.draw(data, options); .

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

The problem is now google visualization table always sort by second column during the load. If user selected any other column to sort table will sort according to the selected column. They all work as normal (Sorted column display by down arrow in table header).

But when I tried to sort by the field I added my own sorting process, earlier sorting not remove (I can see down arrow mark still at previous sorted table header) so sorting not work properly with added sorting code. How to prevent this issue.

If this isn't clear or need more information please let me know.

UPDATE: Explanation

Table draw from the array which is creating from the databse. this is the structure

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
                )

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

From this array I use [Field 1], [Field 2] and [warningLevel] field as table columns. But [warningLevel] column should sort according to [sortOrder] field in array .

So what I did, I add listener and inside it I rearrange(sort) the whole data array and recreate the table again.

 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);

}
  });

All the other table column should sort as the normal way (When user sort one column it is sorting and if he moves to sort another column earlier sorting disregard and sort the newly selected column. Sorted column header has arrow icon ) and they are working fine. The problem is when I tried to sort the Status column last sorted column still use it's sorting.Also the arrow in header still displaying in earlier sorted column. So this column sorting not working as expect.

Any help would be appreciated.

Answer 1

sounds like you need to set the following configuration options before drawing the chart
sortColumn & sortAscending

you control over which column the sorting arrow appears (and direction),
regardless of the actual sort taking place

see following working snippet,
regardless what the user clicks, the data will be sorted on column 0
while the arrows follow what was actually clicked...

 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>