Модал в таблице в MDBootstrap для реагирования - PullRequest
Новая
       27

Модал в таблице в MDBootstrap для реагирования

2 голосов
/ 07 апреля 2019

Я довольно новичок в реагировании и начальной загрузке материалов. Я пытаюсь заполнить набор данных в таблице, используя фиктивный файл JSON. Мне удалось найти некоторую степень успеха в этом. Я хотел включить модал в строку таблицы. такой, что когда я нажимаю на строку, появляется модальное всплывающее окно.

Я опубликую код, который я использовал. любая помощь будет принята с благодарностью. 

//TablePage.js

import React, { Component } from "react";
import { MDBDataTable } from "mdbreact";
import testdata from "../../data.js";

class TablePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        columns: [
          {
            label: "test ID",
            field: "testID",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity",
            field: "testEntity",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity Key",
            field: "testEntityKey",
            sort: "asc",
            width: 50
          },
          {
            label: "test Business Date",
            field: "testBusinessDate",
            sort: "asc",
            width: 100
          },
          {
            label: "test created Date",
            field: "testcreatedDate",
            sort: "asc",
            width: 100
          },
          {
            label: "testScore",
            field: "test Score",
            sort: "asc",
            width: 50
          },
          {
            label: "test Score Normalised",
            field: "testScoreNormalised",
            sort: "asc",
            width: 50
          },
          ,
          {
            label: "testUnitIdentifier",
            field: "test Unit Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testOwnerIdentifier",
            field: "testOwner Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testState",
            field: "test State",
            sort: "asc",
            width: 50
          },
          {
            label: "edit",
            field: "Edit",
            sort: "asc",
            width: 50
          }
        ],
        rows: testdata
      }
    };

  }

  render() {

    return (
      <MDBDataTable btn striped bordered hover data={this.state.data}>
        test
      </MDBDataTable>
    );
  }
}

export default TablePage;

Это фиктивный файл данных, который я пытался использовать. 

//data.js
const data = [
    {
        testID: 938932,
        testEntity: "employee",
        testEntityKey: 1527003,
        testBusinessDate: "6/14/2017",
        testcreatedDate: "8/7/2017",
        testScore: 115,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "938932",
        testState: "inprogress"
    },
    {
        testID: 903576,
        testEntity: "employee",
        testEntityKey: 1593873,
        testBusinessDate: "6/5/2017",
        testcreatedDate: "1/17/2018",
        testScore: 175,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "903576",
        testState: "onhold"
    },
    {
        testID: 947830,
        testEntity: "employee",
        testEntityKey: 1735438,
        testBusinessDate: "8/16/2017",
        testcreatedDate: "10/14/2017",
        testScore: 139,
        testScoreNormalised: "100",
        businessUnitIdentifier: "",
        testownerIdentifier: "947830",
        testState: "inprogress"
    },
    {
        testID: 952479,
        testEntity: "employee",
        testEntityKey: 1305158,
        testBusinessDate: "1/14/2018",
        testcreatedDate: "2/3/2018",
        testScore: 160,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "952479",
        testState: "ready"
    },
    {
        testID: 927366,
        testEntity: "employee",
        testEntityKey: 1645384,
        testBusinessDate: "8/20/2017",
        testcreatedDate: "3/18/2018",
        testScore: 123,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "927366",
        testState: "onhold"
    }]

Также выложу картинку

Снимок таблицы

1 Ответ

1 голос
/ 07 апреля 2019

Если я правильно понимаю, вы хотите знать, как добавить кнопку, чтобы открыть модальное окно в ячейке редактирования.Это можно легко сделать, добавив компонент в поле редактирования в вашем data.js: 

import React from 'react';
import ModalPage from './ModalPage';

export default [
  {
    testID: 938932,
    testEntity: "employee",
    testEntityKey: 1527003,
    testBusinessDate: "6/14/2017",
    testcreatedDate: "8/7/2017",
    testScore: 115,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "938932",
    testState: "inprogress",
    edit: <ModalPage />
  },
  {
    testID: 927366,
    testEntity: "employee",
    testEntityKey: 1645384,
    testBusinessDate: "8/20/2017",
    testcreatedDate: "3/18/2018",
    testScore: 123,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "927366",
    testState: "onhold",
    edit: <ModalPage />
  }
];

Компонент ModalPage, который я здесь использовал, - это пример примера модальной страницы из mdb docs .Вы можете сослаться на пример, который я сделал на Stackblitz .

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

...