如何使用 primereact 中的 Splitbutton 获取数据表行数据/对象

Question

我对 ReactJs 和 ReactJs 还很陌生。尝试做一个项目来学习。我正在使用 PrimeReact UI 组件库。一切工作正常，但在将行数据访问到函数中时面临问题。

参考 - https://www.primefaces.org/primereact/splitbutton/

如果我点击在操作按钮上，然后它显示数据

请帮助我。提前致谢。

import { DataTable } from "primereact/datatable";
import { SplitButton } from "primereact/splitbutton";

/* split button items*/
const items = [
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
      /* I am getting {item:{label: 'Update',icon: 'pi pi-refresh',command: (e) },originalEvent:{...}} I have check originalEvent.target but no data is there */
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
    },
  },
];

/* data to show */
const griddata = [
  {
    name: "Tivaprasad Reddy",
    employeeId: "da9d1448-e1bd-4dad-9d57-dddf655c8ecf",
    mobile: "7099111460",
    Status: "SCREENING",
    addedBy: "anil kumar",
    addedOn: "2022-02-22T15:04:00.382+00:00",
  },
  {
    name: "Mukesh Bhutani",
    employeeId: "bcdefa7a-6c4d-4ac1-bd6d-025e88e08f62",
    mobile: "9582111515",
    Status: "SCREENING",
    addedBy: "anil kumar",
    addedOn: "2022-02-22T15:05:02.416+00:00",
  },
];
const splitBtn = (d) => {
  console.log(d); /* Getting data here*/
};
const buttonTemplate = (data) => (
  <>
    <SplitButton
      label="Action"
      className="p-button-sm"
      model={items}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);
return (
  <div>
    <div className="card">
      <DataTable
        value={griddata}
        scrollable
        scrollHeight="500px"
        responsiveLayout="scroll"
      >
        <Column field="name" header="Name"></Column>
        <Column field="Title" header="Title"></Column>
        <Column field="Status" header="Status"></Column>
        {/* <Column field="Action" header="Action" body={editTemplate}></Column> */}
        <Column field="Action" header="Action" body={buttonTemplate}></Column>
      </DataTable>
    </div>
  </div>
);

Answer 1

这也让我困惑了一段时间，直到我意识到它实际上非常简单:')

您只需使用“Column”元素的“body”属性的回调函数中的“rowData”参数即可。

这里“buttonTemplate”回调函数已经携带了行数据并将其呈现在第一个参数。

因此，将“items”变量转换为一个函数，将“data”参数传递给您的项目，就像这样

const items = (data) => ([
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(e, data);
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(e, data);
    },
  },
]);

const buttonTemplate = (data) => (
  <>
    <SplitButton
      label="Action"
      className="p-button-sm"
      model={items(data)}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);

我希望这对您有所帮助

Answer 2

有多个数据表属性，您可以使用 onRowClick() 来实现此目的。

const [values, setValues] = useState({});

<DataTable
        value={griddata}
        scrollable
        scrollHeight="500px"
        responsiveLayout="scroll"
        onRowClick={(e) => { setValues(e.data) }} // setting row data in a state
      >
        <Column field="name" header="Name"></Column>
        <Column field="Title" header="Title"></Column>
        <Column field="Status" header="Status"></Column>
        <Column field="Action" header="Action" body={buttonTemplate}></Column>
      </DataTable>

现在，您可以使用在行单击时使用的状态变量来获取行数据。

const items = [
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(values); // row data
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(values); // row data
    },
  },
];

Answer 3

你可以这样走（PrimeReact）：

const items =(data: any) => ([
  {
    label: "Replicate",
    icon: "pi pi-copy",
    command: async (event: MenuItemCommandEvent) => {
      console.log(event, data)
    },
  },
  {
    label: "Delete",
    icon: "pi pi-trash",
    command: () => {
    },
  },
]);


<DataTable
>
  <Column
    body={(rowData) => (
      <SplitButton
        label="Edit"
        icon="pi pi-pencil"
        model={items(rowData)}
      />
    )}
    exportable={false}
    header="Actions"
  ></Column>
</DataTable>

感谢@Ahmed Hassan 的想法

Answer 4

如果您正在寻找 primeng 解决方案：

// .html
<p-splitButton
(onMenuShow)="targetRow = selectedRow"
/>

// in .ts
targetRow;
items: MenuItem[] = [
    {
      label: 'Label',
      command: () => {
        console.log(this.targetRow)
      }
    },
  ];