Добавление столбца в таблицы данных

Question

я использую Zend и Datatables (плагин jQuery). У меня есть такая таблица:

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="customerTable">
    <thead>
        <tr>
            <th><?php $this->trans('ID') ?></th>
            <th><?php $this->trans('Name') ?></th>
            <th><?php $this->trans('Comment') ?></th>
            <th><?php $this->trans('Options') ?></th>
        </tr>
    </thead>
    <tbody>

    </tbody>
    <tfoot>
        <tr>
            <th><?php $this->trans('ID') ?></th>
            <th><?php $this->trans('Name') ?></th>
            <th><?php $this->trans('Comment') ?></th>
            <th><?php $this->trans('Options') ?></th>
        </tr>
    </tfoot>
</table>

Я создаю свой массив так:

public function jsonAction() {
    $this->_helper->layout->disableLayout();
    $albums = new Application_Model_DbTable_Customers();
    $albums = $albums->fetchAll()->toArray();

    foreach($albums as $entry) {
        $x[] = array($entry['id'], $entry['name'], $entry['comment'], '');
    }
    $this->view->json = json_encode(array("aaData" => $x));
}

Как видите, я создаю массив, который потом кодирую в json. Для поля «Параметры» я просто добавил ''.

В поле «Параметры» я хочу несколько значков редактирования и т. Д. Как я могу получить это легко? Каким-то образом это решение кажется не таким хорошим, как могло бы быть.

Я думаю о чем-то вроде предопределенной моей таблицы без полей параметров. Так что мой JSON соответствует этому. Затем сделайте что-то вроде:

$('#myTable').datatables({
    'optionsColumn' : {path/to/icon.jpg, /url/it/calls,
                       second icon etc}
}); 

Или просто что-то вроде addColumn (HTML), которое повторяется для каждой записи. Я не хочу вставлять HTML в свои действия, и добавление его потом через JS также отстой.

Спасибо

Answer 1

Есть множество способов сделать это. Вот один Теперь для примера кода может быть важно отметить, что мои данные поступают в «aaData» как трехмерный объект, а не как двумерный массив. Я не знаю наверняка, что mDataProp или даже aoColumns доступны для 2D-данных.

2D ( не что я использую):

['column1', 'column2', 'column3'], ['moreColumn1', 'moreColumn2', 'moreColumn3] … etc …

3D ( это то, что я использую ):

[{'key1': 'column1', 'key2': 'column2', 'key3': 'column3'}, {'key1': 'moreColumn1', … etc …}]

Чтобы добавить столбец с виджетом, вам просто нужно использовать aoColumns и создать запись с mDataProp, равным нулю. Вы можете добавить к нему класс (как ловушку для функции JavaScript) и добавить любой другой контент по умолчанию (например, один или несколько значков редактирования, текст или любой другой):

"aoColumns": [
    {
      "mDataProp": null,
      "bSortable": false,
      "sClass": "editControl",
      "sDefaultContent": '<span class="editIcon"></span>'
    },
    {
      "mDataProp": "key1"
    },
    {
      "mDataProp": "key2"
    },
    {
      "mDataProp": "key3"
    }
]

В этом примере значок добавляется как фоновое изображение класса span (CSS не показан). Существуют и другие способы достижения цели, и я согласен с более ранним постером, что вы можете просто отправить столбец «заполнитель». Это определенно будет работать с 2D-массивом. Если вы собираетесь использовать столбец-заполнитель, вы переходите на территорию "смешанных задач", но если она пуста, то это может быть полезным компромиссом.

Если это так, я бы добавил изображения и т. Д. В fnRowCallback.

"fnRowCallback": function( nRow, aData ) {

      // let's imagine we are sending a URL in one of the columns and we want it to
      // be stored in a clickable first column.

      var theLink = aData[1];

      $('td:eq(0)', nRow).addClass('clickable editIcon').attr('href', theLink);

      return nRow;
    }

Опять же, сам значок будет создан как фоновое изображение, в данном случае для элемента TD. Вы можете использовать .html() и добавить любую разметку, какую захотите, что позволит вам вместо этого использовать элементы изображения. Это всего лишь пример ... не все браузеры поддерживают href как свойство td. Но, надеюсь, это даст правильную идею в качестве отправной точки.

Answer 2

Я широко использую DataTables в своих приложениях, а также часто делаю иконки для действий.Мой выбранный метод для решения этой проблемы - включить их в массив foreach как правильно экранированную строку, а затем вывести беспорядок в виде JSON в таблицы данных, как показано на рисунке.Часто первые пару раз он не работает, и он либо молча завершается сбоем, либо с «закодированной» ошибкой типа «aData null» или «sEcho unknown».Первое, что вам нужно сделать, это как-то вывести JSON (мой метод - отправить по электронной почте), а затем запустить его через jsonlint.com 99 раз из 100, ваши изображения будут неправильно экранированы.

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

Я бы посоветовал вам задуматься над этой задачей.Сначала я сделал все свои таблицы, используя метод DOM DataTables, а затем быстро перешел на JSON, как вы это делаете, когда мои пользователи стали жаловаться на медленное время загрузки.Поскольку мы выросли, и пользователи начали добавлять на тонну больше данных, чем я ожидал, этот метод стал слишком медленным, поэтому нам пришлось переключаться на серверные транзакции DataTables.Если вы планируете обрабатывать более 1000 записей одновременно, я бы предложил использовать решение на стороне сервера , а не идти по этому пути.

Answer 3

Я пробовал нечто подобное несколько дней назад, но заметил, что DataTables не нравится, когда вы редактируете DOM таблицы после ее инициализации.Но если ваши теги уже на месте, вы можете без проблем добавлять элементы в td-элементы.

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