Событие onClick в строке строки таблицы - PullRequest
0 голосов
/ 06 февраля 2019

Я создал таблицу с DataTables, и документы в каждой строке отредактированы и заполнены локальными данными JSON.

У меня есть контекстное меню, и один из вариантов - «Открыть документ», который будет аналогичен щелчку по ссылке и открытию документа таким образом.

Япытаясь получить атрибут (или правильную вещь), который будет вызван событием onClick.Однако поскольку данные таблицы интегрированы в DataTables, я не уверен, как мне поступить.Есть мысли?

Визуализация DataTable:

$('#km-table-id').DataTable( {
      columns: [
        // { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "Blank" },
        { data: "Titles" }
      ],
      columnDefs: [
        {
          data: "Path", 
          ordering:  true, targets: [2],
          render: function(data, type, row) { // ---- wraps docs in anchors
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [2]
        },
        { searchable: true, targets: [0], visible: false },
      ],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" },
      lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
      order: [],
      pageLength: 500,
      paging: true,
      pagingType: "full_numbers"
    });

Попытка открыть документ через контекстное меню onClick:

$("li[data-action='open']").click(function(evt) {
      $(this).attr({target: "_blank", href: row.Path})
    });

HTML контекстное меню:

<ul class="custom-menu">
    <li data-action="open">Open Document</li>
    <li data-action="add" id="add-id">Set As Favorite</li>
    <li data-action="email">Email Document</a></li>
  </ul>

1 Ответ

0 голосов
/ 07 февраля 2019

Обновление: я нашел (рабочее) решение.

По сути, столбец DataTable «Заголовки» должен находиться в последней позиции, чтобы правильно соответствовать каждому флажку.Я уверен, что есть решение, при котором столбцы могут появляться после, и добавление флажка будет работать, но пока это нормально.

$('#km-table-id').DataTable( {
      columns: [
        { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "Blank" },
        { data: "Titles" } // MUST be in last position to respond w/ checkboxes
      ],
      columnDefs: [
        {
          data: "Path", 
          ordering:  true, targets: [3],
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [3]
        },
        { searchable: true, targets: [1], visible: false },
      ],

... и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...