如何使反應數據網格表格單元格可編輯，並專注於單擊按鈕而不執行雙擊操作

Question

我正在使用反應數據網格列出我的數據。

我想在點擊按鈕時添加一個新行，因此第一列（不一定是第一列可以是任何一行）應該是可編輯的並且專注於創建。

我知道反應數據網格在雙擊時具有可編輯的單元格功能。 但我想在沒有任何點擊的情況下創建行。 如果用戶點擊進入后有任何方法可以禁用編輯，那就太棒了。

生成列表的代碼：

import React, { Component } from 'react';
import FileMenuFormatter from './filemenuformatter';
import NameFormatter from './nameformatter';
import ListView from '../../components/listview/listview';
import { getRow } from '../../helpers/fileviewer/fileutils';

const columns = [
    {
        key: 'name',
        name: 'Name',
        formatter: NameFormatter,
        resizable: true,
        sortable: true
    }, {
        key: 'created',
        name: 'Created On',
        resizable: true,
        sortable: true
    }, {
        key: 'lastmodified',
        name: 'Last Modified',
        resizable: true,
        sortable: true
    }, {
        key: 'filesize',
        name: 'File Size',
        resizable: true,
        sortable: true
    },
    {
        key: 'menu',
        name: '',
        width: 35,
        formatter: FileMenuFormatter,
        draggable: false
    }
];
/**
 *
 *
 * @class myComp
 * @extends {Component}
 */
class myComp extends Component {
    getList() {
        let rows = [];
        for (let index in this.props.dList) {
            if (typeof index !== 'undefined') {
                let dir = this.props.dList[index];
                rows.push(getRow("dir", dir))
            }
        }
        for (let index in this.props.fList) {
            if (typeof index !== 'undefined') {
                let file = this.props.fList[index];
                rows.push(getRow("file", file))
            }
        }

        var newRow = this.props.newRow;

        if(Object.keys(newRow).length !== 0) {
            rows.push(getRow("dir", newRow[0]));

        }

        return rows
    }
    getRow(rowId) {
        return this.getList()[rowId];
    }

    render() {
        let rowListData = this.getRowList();
        return (
            <div>
                <ListView
                    columns={columns}
                    rows={rowListData}
                    minHeight={this.props.minHeight} />
            </div>
        );
    }
}
export default myComp;

任何人都知道如何實現這一目標？

Answer 1

我已經解決了這個問題。 解決方法就在這里。

所以單擊一個按鈕我調用了我的showActive（）函數，該函數負責使列（在我的情況下是第一個）可編輯，就像反應數據網格一樣。

第1列使列可編輯，ReactDataGrid將“可編輯”作為輸入函數。 allowEdit用於檢查此列是否可編輯。 對我來說，我想只在新行創建時才能使單元格可編輯。

創建新的obj以作為表中的新行插入。 像這樣 -

 let newRow = [
                    {
                        created: milliseconds,
                        absPath: this.props.dirSelectedPath,
                        modified: milliseconds,
                        size: 0,
                        filename: folderName,
                        type: "FILE_DIR",
                        allowEdit: true
                    }
                ];

然后，下面是可編輯單元格的列配置。

const columns = [
    {
        key: 'name',
        name: 'Name',
        resizable: true,
        sortable: true,
        filterable: true,
        editable: function (rowData) {
            return rowData.allowEdit ? true : false;
        }
    }
];

現在你必須編寫一個函數來顯示突出顯示和激活的單元格。 為此，我調用了與響應數據網格調用相同的功能。

得到網格的句柄。

<ReactDataGrid showActive={this.showActive.bind(this)} rowsCount={this.getSize()} ref={node => this.grid = node} {...this.props } />

showActive() {
        let length = this.getSize(); // get the length of the grid i.e number of rows
        let obj = { idx: 0, rowIdx: length };
        let promise = new Promise(function (resolve, reject) {
            if (this.grid) {
                resolve("this worked!");
            }
        }.bind(this));

        promise.then(function () {
            this.grid.onSelect(obj);
            this.grid.setActive('Enter');
        }.bind(this), function () {
        });
    }

希望有所幫助。