Есть ли способ сделать всю строку в Tabulator интерактивной для ячейки в этой строке, содержащей уникальный URL-адрес для каждой строки? - PullRequest
Новая
       37

Есть ли способ сделать всю строку в Tabulator интерактивной для ячейки в этой строке, содержащей уникальный URL-адрес для каждой строки?

0 голосов
/ 11 июля 2019

Используя Tabulator, у меня есть ячейка, содержащая уникальный URL-адрес, на который должна ссылаться вся строка.

Я пробовал следующий код: 

{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, 
minwidth:30, minWidth:30},
{title:"Database", field:"database", minwidth:110, editor:"input"},
{title:"Environment", field:"environment", minwidth:140, editor:"input"},
{title:"Product", field:"product", minwidth:140, editor:"input"},
{title:"URL", field:"url", formatter:"link", minwidth:130, 
editor:"input"},'''

$("#tabulator-example").tabulator({
    rowClick:function(e,row){

    }, 
});

Таблица Tabulator просто исчезаеткаждый раз, когда я пытаюсь добавить строку кода rowClick из примера.

Ответы [ 2 ]

0 голосов
/ 12 июля 2019

Использование Выбор selectable: true,

const tabledata = [{
    id: 1,
    name: "Oli Bob",
    EDN: ''
  },
  {
    id: 2,
    name: "Mary May",
    EDN: ''
  },
  {
    id: 3,
    name: "Christine Lobowski",
    EDN: ''
  },
  {
    id: 4,
    name: "Brendon Philips",
    EDN: ''
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    EDN: ''
  },
  {
    id: 6,
    name: "Frank Harbours",
    EDN: ''
  },
];

const table = new Tabulator("#example-table", {
  data: tabledata,
  selectable: true,
  columns: [{
      title: "ID",
      field: "id"
    },
    {
      title: "Name",
      field: "name"
    },
    {
      title: "EDN",
      field: "EDN",
    }
  ]
});
<!DOCTYPE html>
<html>

<head>
  <!-- Tabulator CDN -->
  <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>


</body>

</html>
0 голосов
/ 12 июля 2019

Так я создавал таблицы (ниже).

Затем в вашей функции rowClick вы можете получить доступ к данным строки: 

    rowClick: function (e, row) {
        // alert("Row " + row.getData().id + " Clicked!!!!");
    },  

let dataTable = new Tabulator("#data-list", {
        height: "84vh",
        width: 150,
        virtualDomBuffer: 30,
        // layout: "fitDataFill",
        layout: "fitColumns",
        resizableColumns: false,
        selectable: 1,
        responsiveLayout: "hide",
        placeholder: "No Data",
        columns: [
            {
                title: "Meeting",
                field: "startDate",
                formatter: eventListRowFormatter,
                variableHeight: true,
                headerSort: false
            },
            { formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
        ],
        rowClick: function (e, row) {
            // do something
        },
        rowDeselected: function (row) {
          // do something
        },
        ajaxLoader: false
    });
...