制表器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>