Рендеринг DataTables из JSON данных, как предварительно проверить переключатель на столе - PullRequest
1 голос
/ 24 апреля 2020

Я отображаю текстовые поля и радио-кнопки в моих таблицах данных. Я могу заполнить данные внутри моего текстового поля. Но как мне выбрать переключатель на основе значения из моих JSON данных?


      $.getJSON(json, function(data) {
      table = $('#my_table').DataTable({
        "order":[[3, "desc"]],
        "bDestroy": true,
        data: data.items,
        columns: [{
          className: 'details-control',
          orderable: false,
          data: null,
          defaultContent: ''
        }, {
          className: 'eq',
          orderable: true,
          data:'eq'
        }, {
          className: 'prop',
          orderable: true,
          data: 'prop'
        }, {
          className: 'radio_type',
          orderable: false,
          data: null,
          render: function(data, type, row) {
            console.log(row.radio_type);
            return `<label class="radio-inline" for="true_${row.eq}_${row.prop}"><input id="true_${row.eq}_${row.prop}" value="true" type="radio" name="radio_type">True</label>
            <label class="radio-inline" for="false_${row.eq}_${row.prop}"><input id="false_${row.eq}_${row.prop}" value="false" type="radio" name="radio_type">False</label>
            <label class="radio-inline" for="ns_${row.eq}_${row.prop}"><input id="ns_${row.eq}_${row.prop}" value="ns" type="radio" name="radio_type">ns</label>`;
          }
        }, {
          className: 'notes',
          orderable: false,
          date: null,
          render: function(data, type, row) {
            return `<textarea class="form-control" rows="1" id="input_${row.eq}_${row.prop}">${row.notes}</textarea>`;
          }
        }]
      });
    });

Как мне установить переключатель на основании row.radio_type? Это всегда будет либо true, false or ns.

1 Ответ

1 голос
/ 24 апреля 2020

Шаблонные литералы поддерживают условные операторы! Добавьте троицу в конец каждой секции переключателя перед >:

${row.radio_type == 'true' ? " checked" : ""}
${row.radio_type == 'false' ? " checked" : ""}
${row.radio_type == 'ns' ? " checked" : ""}

т.е.

return `<label class="radio-inline" for="true_${row.eq}_${row.prop}"><input id="true_${row.eq}_${row.prop}" value="true" type="radio" name="radio_type" ${row.radio_type == 'true' ? " checked" : ""}>True</label><label class="radio-inline" for="false_${row.eq}_${row.prop}"><input id="false_${row.eq}_${row.prop}" value="false" type="radio" name="radio_type" ${row.radio_type == 'false' ? " checked" : ""}>False</label><label class="radio-inline" for="ns_${row.eq}_${row.prop}"><input id="ns_${row.eq}_${row.prop}" value="ns" type="radio" name="radio_type" ${row.radio_type == 'ns' ? " checked" : ""}>ns</label>`;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...