Таблица Google Table не содержит атрибутов при сортировке с использованием jquery

Question

Таблица Google Table не содержит атрибутов при сортировке с использованием jquery

0

следующий мой код, где я пытаюсь добавить новый td, который просто покажет некоторый цвет в форме легендарной вещи, я могу это сделать, но когда я нажимаю заголовок столбца для сортировки, цвета, применяемые к вновь созданному TD, удаляются, вот мой код

function drawVisualization2(dataArray,divName) {
                var colors_array = ['#3366cc','#dc3912','#ff9900','#109618','#990099'];
                var dataTbl = google.visualization.arrayToDataTable(dataArray);
                var table1 = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'chart3',
                    dataTable: dataTbl,
                    'options': {
                        'width': '500px'
                    }
                });
                table1.draw();
                function tableCleanUp() {
                    google.visualization.events.addListener(table1.getChart(), 'sort', tableCleanUp2);
                    tableCleanUp2(colors_array);
                }

                function tableCleanUp2(colors_array) {
                    var count = 0;
                    $('#chart3 tr').each(function () {
                        if(count > 0){
                            jQuery(this).append("<td class='google-visualization-table-td' style='background-color: "+colors_array[count-1]+";'></td>");
                        }
                        count ++;
                    });
                }
                google.visualization.events.addListener(table1, 'ready', tableCleanUp);
            }

для справки, я следую таблице, как показано здесь https://developers.google.com/chart/interactive/docs/gallery/table

моя структура таблицы несколько похожа на это после создания TD с использованием jquery

<table class="google-visualization-table-table" cellspacing="0">
  <tbody>
       <tr class="google-visualization-table-tr-head">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
      </tr>
      <tr class="google-visualization-table-tr-even">
           <td class="google-visualization-table-td"> PSYCHOSES</td>
           <td class="google-visualization-table-td">644300589.00</td>
           <td class="google-visualization-table-td">1683487522.00</td>
           <td class="google-visualization-table-td">38.27</td>
           <td class="google-visualization-table-td" style="background-color: #3366cc;">  </td>
      </tr>
      <tr class="google-visualization-table-tr-odd">
      <tr class="google-visualization-table-tr-even">
      <tr class="google-visualization-table-tr-odd">
      <tr class="google-visualization-table-tr-even">
</tbody>
</table>

После того, как я отсортировал столбец, я получаю что-то вроде этого с каждым TD (кроме заголовка)

<td class="google-visualization-table-td" style="background-color: undefined;">

может кто-то 1 сказать мне, как сохранить фоновый цвет после сортировки

noobie-php 21 янв. 2014, в 19:44

Источник

Теги:

javascript

jquery

sorting

google-api

google-visualization

1 ответ

Ещё вопросы

asgallant · Accepted Answer · 2014-01-21T16-40-00.000Z

Я думаю, что есть более простой способ получить то, что вы хотите, не прибегая к добавлению дополнительного столбца после рисования: используйте DataView для добавления в вычисляемый столбец:

var columns = [];
for (var i = 0; i < dataTbl.getNumberOfColumns(); i++) {
    columns.push(i);
}
columns.push({
    type: 'string',
    calc: function (dt, row) {
        // set the background of an empty cell to the color of this row in the colors array
        return {v: '', p: {style: 'background-color: ' + colors_array[row]}};
    }
});

var table1 = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart3',
    dataTable: dataTbl,
    options: {
        width: 500, // use an integer here, not a string
        allowHtml: true
    },
    view: {
        columns: columns
    }
});

jsfiddle: http://jsfiddle.net/asgallant/89FzH/

спасибо за быстрый ответ, поэтому я предполагаю, что вы не хотите, чтобы я создавал новый TD вместо push-столбца в таблице, я уже попробовал ваш код, но я хочу знать, что я помещаю разные цвета в каждый новый созданный TD, Вы делаете ту же функциональность?
Да, это сопоставляет цвета в вашем массиве colors с конкретными строками в DataTable, поэтому при сортировке цвета останутся со строкой.
хорошо, пробовал ваш код, но я не могу заполнить какой-либо цвет фона во вновь созданном столбце, также нет ошибки в коде, короткий столбец создан, но в этом столбце нет цвета
Я думаю, что нам нужна некоторая модификация здесь calc: function (dt, row) { // set the background of an empty cell to the color of this row in the colors array return {v: '', p: {style: 'background-color: ' + colors[row]}}; } , Я получаю это вышеупомянутый селектор, я предупрежден, и я могу получить там, но некоторые, как изменение цвета не вызвано
У меня было несколько опечаток в коде, и вам нужно также установить для параметра allowHtml значение true . Я обновил свой ответ. Вот также пример jsfiddle : jsfiddle.net/asgallant/89FzH
я исправил опечатки в моем коде и теперь пытаюсь вариант allowHtml
большое спасибо этот вариант помог мне в решении моей проблемы