Как вставить новый ряд в реаги-табулятор - PullRequest
Новая
       5

Как вставить новый ряд в реаги-табулятор

0 голосов
/ 13 января 2020

Итак, этот код взят из официальной документации для вставки новой строки: 

$("#add-row").click(function(){
    $("#example-table").tabulator("addRow", {});
});

.. но я использую реактив-табулятор https://www.npmjs.com/package/react-tabulator

Это схема ниже метода возврата: 

<div>
        <button id="add-row" onClick={ReactTabulator("addRow")}>Add Row</button>
      </div>
        <ReactTabulator
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />
      </div>

Я новичок в React, поэтому не могу понять, как вставить новую строку. Что может быть бонусной информацией, если вы хотите вставить новую строку, вы можете выбрать, будет ли она вставлена ​​в первую или последнюю строку, т.е. с помощью следующей опции addRowPos: "bottom".

Ответы [ 2 ]

2 голосов
/ 20 января 2020

У меня была та же проблема, и у меня работает следующее:

Сначала создайте ссылочный объект для <ReactTabulator>.

Для этого инициируйте ref в конструкторе: 

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object
    }

И добавьте ссылку в <ReactTabulator>. 

<div>
      </div>
        <ReactTabulator
        ref={this.tableRef}
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />

Теперь вы можете получить доступ к объекту табулятора следующим образом: 

var tabulator = this.tableRef.current.table;

Для завершения вашего примера и бонусный вопрос, установите обратный вызов onClick:

Определите метод onAddRow как часть класса. Он вызывает метод addRow объекта табулятора (this.tableRef.current.table).

Согласно http://tabulator.info/docs/4.0/update: второй аргумент addRow является необязательным и определяет, будет ли строка добавлена ​​в верхнюю или нижнюю часть таблицы. Значение true добавит строку в верхнюю часть таблицы, значение false добавит строку в нижнюю часть таблицы. 

onAddRow(){
    this.tableRef.current.table.addRow({}, true); //true adds to top
}

Привязать метод onAddRow к this в конструктор 

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object

        // This binding is necessary to make `this` work in the callback
        this.onAddRow= this.onAddRow.bind(this);
    }

Вызовите метод addRow по клику: 

<button id="add-row" onClick={this.onAddRow}>Add Row</button>
0 голосов
/ 13 января 2020

Я сам никогда не использовал Tabulator, но переход от подхода на основе jQuery к React в основном сводит на нет то, как вы думаете о вещах. В React вы берете данные (состояние) и визуализируете свое представление на основе этих данных (снова, снова и снова - каждый раз, когда данные изменяются). Таким образом, вместо вызова функции добавления строк в самом Tabulator (как вы сделали в примере выше), вы изменяете данные (добавляя строку непосредственно к нему), что, в свою очередь, вызывает повторную визуализацию компонента Tabulator с новым row.

Итак, пусть код говорит, я полагаю.

Сначала вам нужно сохранить данные в состоянии вашего компонента: 

// here we initialize your data state with empty array
// and define setData function that will be used to update 'data'
const [data, setData] = useState([]);

// here we fetch the data from somewhere,
// before your component is mounted for the first time
useEffect(() => {
    // let's say we fetch it using fetch()
    const remoteData = await fetch(...);
    // we set the data to what we fetched using setData;
    // that causes component to re-render;
    // doing data = remoteData does not trigger re-rendering
    setData(remoteData);
},[]);
// this sample assumes that the fetch operation is triggered only once, at startup,
// so that's why empty array is passed as second parameter to useEffect

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

// we define click handler for the button
const addRowClickHandler = (event) => {
    // we're setting new value of the data array,
    // which is current content of the array plus new empty object;
    // the reason why we do it this way (by making the copy of original data)
    // is because re-rendering is based on detecting the change in the data object;
    // comparison utilizes shallow equality so even after adding new element
    // with push() data===data still returns true
    setData([...data,{}]);
}

Теперь ваше представление должно выглядеть так: 

<div>
    <button id="add-row" onClick={addRowClickHandler}>Add Row</button>
</div>
<ReactTabulator
    columns={editableColumns}
    data={data}
    footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
    options={options}
/>

Удачного кодирования и дайте мне знать если это работает;)

...