Щелкните строку, чтобы открыть модальные таблицы данных - PullRequest
Новая
       104

Щелкните строку, чтобы открыть модальные таблицы данных

0 голосов
/ 06 августа 2020

Я пытаюсь понять, как сделать мои строки dataTable доступными для щелчка, чтобы открыть Bootstrap Modal для редактирования выбранной строки. В настоящее время у меня есть кнопка «Просмотр», открывающая модальное окно, но я также хотел бы иметь возможность просто щелкнуть строку.

Исходя из приведенного ниже кода, что мне нужно добавить, чтобы передать «RecordID» в модальный. 

tabletoday = $('#userTable').DataTable({
    createdRow: function (row, data, dataIndex) {
        $('td:eq(0)', row).css('padding-left', '2px');
        $('td:eq(3)', row).css('padding-right', '2px');
    },
    autoWidth: false,
    order: [
        [1, 2, 3, 4, 5, 6, "asc"]
    ],
    paging: false,
    searching: false,
    bInfo: false,
    scrollY: "550px",
    scrollCollapse: true,
    ajax: {
        url: 'get_conf_bookings.php',
        dataSrc: '',
    },
    language: {
        "emptyTable": "There are no rooms booked for <?php echo $date; ?>"
    },
    columnDefs: [{
            "targets": [5, 6, 7, 8],
            "orderable": false
        },
        {
            targets: [1],
            className: 'zoom'
        },
        {
            "targets": [5, 6, 7],
            "className": "text-center"
        },
    ],
    columns: [{
            data: "RoomName",
            width: '13%'
        },
        {
            data: "ClientImage",
            width: '10%',
            render: function (data, type) {
                if (data != null) {
                    return '<img src="' + imagepathroom + '' + data + '" class="WayfinderSignageImage" />';
                } else {
                    return '<img src="' + noimageroom + '" class="WayfinderSignageImage"/>';
                }
            }
        },
        {
            data: "ClientName",
            width: '38%'
        },
        {
            data: "RoomFromDate",
            width: '12%'
        },
        {
            data: "RoomToDate",
            width: '11%'
        },

        {
            data: 'Override',
            width: '6%',
            render: function (data, type) {
                if (data == 2) {
                    return '<img src="' + pendingroomoverride + '" class="wayfinder-on"/>';
                } else if (data == 1) {
                    return '<img src="' + onimageroomoverride + '" class="wayfinder-on"/>';
                } else {
                    return '';
                }
            }
        },
        {
            data: 'WayfinderOnOff',
            width: '6%',
            render: function (data, type) {
                if (data == 1 || data == 0) {
                    return '<img src="' + offimageroom + '" class="wayfinder-on"/>';
                } else {
                    return '<img src="' + onimageroom + '" class="wayfinder-off"/>';
                }
            }
        },
        {
            data: 'RecordID',
            width: '4%',
            render: function (data, type, full, meta) {
                var recordid = full.RecordID;
                return '<input type="button" name="edit" value="View" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_data_modal">'
            }
        },
        {
            data: 'ToDateTime',
            "visible": false
        },
    ],
    rowCallback: function (row, data) {
        $('td', row).attr('nowrap', 'nowrap');
        if (data.ToDateTime < nowtimestamp) {
            $(row).removeClass('userTableCol0GrayLeft').addClass('userTableCol0RedLeft');
        } else {
            $(row).removeClass('userTableCol0RedLeft').addClass('userTableCol0GrayLeft');
        }
    },
});

1 Ответ

1 голос
/ 06 августа 2020

DataTables поддерживает события щелчка DOM в своих таблицах, поэтому вы можете сделать что-то вроде этого: 

  tabletoday = $('#userTable').DataTable({
     ...
  });

  // follows after the end of your DataTable definition:
  $('#userTable tbody').on('click', 'tr', function () {
    var data = tabletoday.row( this ).data();
      alert( 'Record ID: ' + data.RecordID );
  } );

Это дает вам идентификатор записи, который необходимо передать в модальное окно.

Подробнее подробности об этих «делегированных событиях» можно найти здесь .

ОБНОВЛЕНИЕ

Моим первоначальным решением было использовать это: 

alert( 'Record ID: ' + data[7] );

Это было основано на неправильном предположении, что каждая строка данных была структурирована как массив значений - итак, примерно так: 

  [ 
    "Brindley Suite", 
    "navex_logo.png",
    "NaveX Systems",
    null,
    "0",
    "03-08-2020 07:00",
    "08-08-2020 18:00",
    "53325",
    1596909600, 
    "1"
  ]

В приведенном выше случае мы можем получить доступ к значению используя свой индекс в массиве: data[7]

Однако в этом случае каждая строка представляет собой объект (содержащий пары ключ / значение), примерно так: 

  { 
    "RoomName": "Brindley Suite", 
    "ClientImage": "navex_logo.png",
    "ClientName": "NaveX Systems",
    "FullBoardRoom": null,
    "Override": "0",
    "RoomFromDate": "03-08-2020 07:00",
    "RoomToDate": "08-08-2020 18:00",
    "RecordID": "53325",
    "ToDateTime": 1596909600, 
    "WayfinderOnOff": "1"
  }

В этом случае , мы получаем доступ к значению, используя его ключ: data.RecordID.

...