javascript - 即使表中有数据，制表符 table.getRow() 返回 false

Question

我想使用索引获取表中行的行组成部分，如下所示:

    row_1 = table.getRow(1);
    console.log(row_1);

但它会产生警告:“查找错误 - 未找到匹配行:1”控制台记录“false”，即使我当前在该表中显示了大约 50 行。

var table = new Tabulator("#table_1", {
  height:"fitData",
  layout:"fitData",
  movableRows: true, //enable user movable rows
  movableColumns: true, //enable user movable columns
  columns:[                 //define the table columns
		{title:"Col1", field:"col1", editor:true},
    {title:"Col2", field:"col2", editor:true},
    {title:"Col3", field:"col3", editor:true},
	],
  rowFormatter:function(row){
    var data = row.getData(); //get data object for row
  },
});         // Build Tabulator:

var tabledata = [{'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
                {'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
                {'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
								];

table.setData(tabledata);
table.setSort("col1", "asc");

row_1 = table.getRow(1);
console.log(row_1);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<!--Tabulator table here:-->
<div style="float: left; margin-left: 1%; margin-top: 20px; padding: 0; width: fit-content; max-width: 98%; height: 500px; text-align: left; display: inline-block;">
  <button class="btn btn-primary" type="button" id="column_toggle" style="width: 30px; height: 30px; padding: 0; margin-bottom: 5px; position:relative; float: right;" hidden>
  </button>
  <div id="table_1" style="display: contents;" class="noselect">
  </div>
</div>

<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>

Answer 1

为表数据分配 ID

var table = new Tabulator("#table_1", {
  height: "fitData",
  layout: "fitData",
  movableRows: true, //enable user movable rows
  movableColumns: true, //enable user movable columns
  columns: [ //define the table columns
    {
      title: "Col1",
      field: "col1",
      editor: true
    },
    {
      title: "Col2",
      field: "col2",
      editor: true
    },
    {
      title: "Col3",
      field: "col3",
      editor: true
    },
  ],
  rowFormatter: function(row) {
    var data = row.getData(); //get data object for row
  },
}); // Build Tabulator:

var tabledata = [{
    'id': 1,
    'col1': 'data1',
    'col2': 'data2',
    'col3': 'data3'
  },
  {
    'id': 2,
    'col1': 'data1',
    'col2': 'data2',
    'col3': 'data3'
  },
  {
    'id': 3,
    'col1': 'data1',
    'col2': 'data2',
    'col3': 'data3'
  },
];

table.setData(tabledata);
table.setSort("col1", "asc");

row_1 = table.getRow(1);
console.log(row_1.getData());

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<!--Tabulator table here:-->
<div style="float: left; margin-left: 1%; margin-top: 20px; padding: 0; width: fit-content; max-width: 98%; height: 500px; text-align: left; display: inline-block;">
  <button class="btn btn-primary" type="button" id="column_toggle" style="width: 30px; height: 30px; padding: 0; margin-bottom: 5px; position:relative; float: right;" hidden>
      </button>
  <div id="table_1" style="display: contents;" class="noselect">
  </div>
</div>

<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>