multi-select بودن سطرهای جدول

سلام. من برای نمایش اطلاعات از یه table استفاده کردم و الان میخوام این جدول بشه سطر هاش انتخاب بشه و اگر صفحه عوض شد و برگشتیم به صفحه قبل همچنان توی حالت انتخاب باقی بمونه.. چیکار باید بکنم؟
@sinashahoveisi
@hesammousavi

 <div className="table-responsive">
                                <table className="table table-light table-responsive table-hover table-bordered table-sm" data-bind="with: printBatch">
                                    <thead>
                                        <tr>

                                            <th>Name</th>
                                            <th>Barcode</th>
                                            <th>Direct #</th>
                                            <th>Item Number </th>
                                            <th>PLU</th>
                                            <th >Price</th>
                                            <th >Shelf Qty</th>
                                            <th >Small</th>

                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: details">
                                        {
                                            this.state.searchReasultArray.map((item, index) =>
                                                <tr className="clickable" onClick={this.selectedRow} >

                                        <td className="ellipsis-150">{item.name}</td>

                                                    <td >{item.apn}</td>

                                                    <td className="ellipsis-150" >{item.directNumber}</td>

                                                    <td >{item.itemNumber}</td>

                                                    <td >{item.plu}</td>

                                                    <td >{item.price / 100}</td>

                                                    <td  >{item.labelShelfQty}</td>

                                                    <td  ></td>

                                                </tr>
                                            )
                                        }
                                    </tbody>
                                </table>
                                <div className="d-flex justify-content-center" data-bind="widget: { kind: 'pagination', page: detailPage, totalPages: detailTotalPages }"></div>
                            </div>
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                                {
                                    this.state.count>0 ?
                                    <Pagination

                                    activePage={this.state.currentPage}
                                    totalItemsCount={this.state.count}
                                    itemsCountPerPage={20}
                                    onChange={this.handlePageChange.bind(this)}
                                    pageRangeDisplayed={10}
                                    itemClass="page-item "
                                    linkClass="page-link"

                                />
                                :
                                null
                                }

                            </div>

table

ثبت پرسش جدید

developer

تخصص : برنامه نویس

@developer 5 سال پیش مطرح شد

از استیت منیجر استفاده کنید، vuex یا redux

ارسال پاسخ

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 5 سال پیش مطرح شد

سلام میتونید از rowsSelected و onRowsSelect استفاده کنید فقط باید دقت داشته باشید که selectableRows روی 'multiple' باشد.

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {
  state = {
    columns: [
      {name : "index" , options: {display : false ,}},
      { name: "Name", options: { display: false,sortDirection: 'asc' } },
      { name: "Title", options: { display: true , } },
      { name: "Location", options: { display: true } },
      { name: "Age", options: { display: true } },
      { name: "Salary", options: { display: true } }
    ],
    par: true,
    selectedList : [],
  };

  changepar() {
    this.setState(prevState => {
      return {
        ...prevState,
        par: !prevState.par
      };
    });
    console.log(this.state);
  }
  render() {
    const data = [
      [1,"Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      [2,"Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      [3,"Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
      [4,"Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
    ];

    const options = {
      filterType: "dropdown",
      responsive: "scroll",
      selectableRows: true,
      rowsSelected: this.state.selectedList,
      selectableRows : 'multiple',
      onRowsSelect : (curRowSelected, allRowsSelected) => {
        console.log("---RowSelect")
        console.log("Row Selected: ", curRowSelected);
        console.log("All Selected: ", allRowsSelected);
        let lists = allRowsSelected.map(i => i.dataIndex)
        this.setState(prevState => {
          return {
            ...prevState,
            selectedList : lists
          }
        })
        console.log(this.state)
      },
    };

    return (
      <div>
        <button
          onClick={() => {
            this.changepar();
          }}
        >
          par
        </button>
        <MUIDataTable
          title={"ACME Employee list"}
          data={data}
          columns={this.state.columns}
          options={options}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

multi-select بودن سطرهای جدول

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید