Ant-design: لا توجد طريقة لإظهار تجميع البيانات الإحصائية في الجدول

مرحبًا TangMonk ، يبدو أنك تطلب ميزة بدلاً من الإبلاغ عن خطأ ، وأخشى أنه ليس لدينا خطة لتنفيذ هذه الميزة. يمكنك تعطيل ترقيم الصفحات الافتراضي للجدول وتنفيذ ترقيم الصفحات بنفسك.

ربما يمكننا القيام بشيء لجعل footer يتناسب مع شكل الجدول؟

yesmeck ، شكرًا على ردك ، ولكن هناك العديد من المشكلات حول هذا الموضوع ، أعتقد أن هذه الميزة مفيدة وضرورية حقًا.

القضايا ذات الصلة: # 3591 ، # 1483 ، # 4581

@ afc163 ، شكرا لك!

ما هو اقتراحك أو الحل؟

لست متأكدًا ، أعتقد أنه لا يمكن تقييد حجم بيانات الجدول الصارم باستخدام pageSize ، يجب معالجة البيانات من جانب الخادم بدلاً من جانب العميل ، لذلك يمكننا إضافة أي بيانات إضافية إلى الجدول

مرحبا،
هل هناك أي تحديث لهذه الميزات؟ أو طريقة أخرى للقيام بذلك؟

yesmeck أبسط حل هو جعل التذييل يعرض <tfoot> فعليًا داخل الجدول ، بدلاً من إلحاق <div> إضافي خارج الجدول.

يحاول الناس ضغط صف إضافي في dataSource لمجرد أنهم يريدون تخطيط الجدول لمحاذاة الأعمدة لهم.

نعم ، لدينا بالفعل خاصية footer ، لا يمكننا معرفة اسم مناسب لـ <tfoot/> .

أقترح إعادة تنفيذ الخاصية الحالية footer لجعلها تعرض <tfoot /> داخل جدول ، وليس إضافة خاصية tfoot . لا تعتقد أنه سوف يكسر أي شيء.

yesmeck يبدو أن هذه الميزة مطلوبة بشكل متكرر. أنا أيضًا أعاني من أجل إضافة صف ملخص. حصلت على عمل حولها ، ولكنها تنطوي على تلاعب متسلل ، يسعدني رؤية حل أجمل.

أي شخص في الفريق يعتني بها بالفعل؟ إذا لم يكن الأمر كذلك ، فربما يمكنني النظر في الأمر.

يمكنك تجربة العلاقات العامة.

yesmeck هنا تذهب: https://github.com/react-component/table/pull/191
انظر المثال / renderFooterInTable للتأثير

بعد التفكير لبعض الوقت في واجهة برمجة تطبيقات tfoot ، أود إضافتها إلى خاصية column :

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  footer: (data) => {
    return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
  },
}, {
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

يجعل

من الواضح أكثر أن تجعله فرقًا بين Table[footer] .

فكره جيده. أوافق على أن هذا سيكون مكانًا أفضل للضغط في واجهة برمجة تطبيقات جديدة.

hackape هل يمكنك اقتراح

شيء مؤكد

https://codesandbox.io/s/m45r6o4nj8
تم تحقيق ذلك ، ولكن هناك مشكلة في ارتباط شريط التمرير ، فمن الملائم رؤيته

yesmeck ما هي حالة عنصر التفاعل / الجدول رقم 195 الآن ، أي ملاحظات؟

رآها اندمجت 👍yesmeck

ومع ذلك ، تلقيت طلب ميزة إضافية. أود أن أقترح السماح لما يسمى "التذييل" بالظهور أعلى الجدول ، أسفل رأس الجدول مباشرة.

مثال:

الميزة الفعلية المطلوبة التي تتم مناقشتها طوال الوقت هي وسيلة للضغط في صف إضافي لعرض المعلومات الإحصائية - وبعبارة أخرى ، "صف ملخص" ، دون العبث بمحتوى dataSource ، وليس "تذييل" في المعنى الموضعي.

hackape يمكنك استخدام تجميع الأعمدة ، راجع https://codesandbox.io/s/pmorq2x2lq

نعم ، لو كان الغرض فقط هو تحديد المواقع ، فسيكون هذا وسيلة قابلة للتطبيق. ولكن من منظور منطق الأعمال ، من الأفضل السماح للمستخدم بالقيام بذلك عبر واجهة برمجة التطبيقات (API) المقترحة.

أعتقد أنه يمكننا إعادة تسمية column.footer API إلى column.summary .

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  summary: {
    render: (data) => {
      return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
    },
    position: 'bottom',  // default to 'bottom', could be 'top'
  }
}]

yesmeck ضع في اعتبارك https://github.com/ant-design/ant-design/issues/6896

أقترح تقديم اثنين من المحترفين الجدد المسمى pinnedTopData و pinnedBottomData .

const columns = [
  { title: 'Price', dataIndex: 'price' },
  { name: 'Name', dataIndex: 'name' },
];

const data = [
  { price: 3, Name: 'Foo' },
  { price: 5, Name: 'Bar' },
];

const pinnedData = [
  { price: <span style={{ fontWeight: 'bold' }}>Total: 8</span> }
];

<Table
  columns={columns}
  dataSource={data}
  pinnedTopData={pinnedData}
  pinnedBottomData={pinnedData}
/>

يجعل:

| السعر | الاسم |
| ---------- | ------ |
| المجموع: 8 | |
| 3 | فو |
| 5 | شريط |
| المجموع: 8 | |

من الأفضل حل # 6896 وهذه المشكلة بنفس واجهة برمجة التطبيقات.

هل هناك تقدم جديد؟

يرى Nokecy الحل بطريقتين. لم يقم بإضافته إلى السمة مؤقتًا. أعتقد أن
1. إذا لم يكن هناك العديد من الأعمدة ولم يظهر شريط تمرير ، فمن السهل حلها ، ولدي مثال أعلاه.
2. يمكنك استخدام أشرطة عناوين متعددة لعرضها ، فهي ليست جميلة جدًا.

إنني أتطلع إلى تحسين هذه الوظيفة والاستمرار في الاهتمام ، لكن antd لدينا هو 2. حتى لو تم تحديثها ، لا أعرف ما إذا كان الإصدار

اي تحديث لهذه القضية ؟؟

قبل أن يتمكنوا من شحن واجهة برمجة تطبيقات رسمية ، أقترح حاليًا توفير مكون مخصص table.props.components.body.wrapper ، والتلاعب بـ props.children الذي تلقاه.

https://codesandbox.io/s/xpvwpx0npw
لقد تلاعبت بشكل مباشر بعنصر dom وقمت بتغليف الإجمالي. يمكنك إضافة الكثير من التذييلات وفقًا لهذه الطريقة ، لكن المسؤول لا يوصي بتشغيل عنصر dom مباشرةً. إذا كنت بحاجة إليه بشكل عاجل ، يمكنك الرجوع إلى هذا

@ LDD123 التمرير x موجود فقط في التذييل في

jagratiTomar @ سيتم تمرير الجسم عند تمرير التذييل ، أقوم بربط التمرير x الخاص بالجسم بالتمرير-x في التذييل

@ LDD123 هل يمكنك المشاركة والمثال حيث يوجد التمرير y أيضًا في النص الأساسي ، لأنه في هذه الحالة يجب تمرير النص فقط وليس التذييل

jagratiTomar الآن ، لقد

@ LDD123 لذلك أنت تقول أنه عندما يكون هناك تمرير ص هذا المثال سيعمل righ؟

نعم

مرحبا yesmeck @ afc163 ،

يضع المصممون لدينا التذييل (يحتوي على القيم المجمعة) أعلى النص وأسفل الرأس مباشرةً لأغراض تجربة المستخدم. تحتوي الأسهم الخاصة بالفرز في الرأس والتذييل على قيم مجمعة فقط. باستخدام أسهم ColumnGroup للفرز ، يتم إلحاقها بالجزء السفلي. من منظور التصميم ، يكون تصميم التذييل أسهل كثيرًا وتعيينه في الأعلى نظرًا لأن حاوية التذييل لها لون مختلف وأن بعض الخلايا فقط بها فاصل.

سأفعل فقط:

.my-table tfoot > tr {
 background-color: gray;
}

يمكن أن يحتوي مكون الجدول على شيء مثل هذا:

<Table appendColumnFooterTop={true}>
   <Column
      footer={(data) => <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>}
   />
</Table>

التصميم:

لا تمانع في النص غير المحاذي في الخلايا الموجودة في صفحة تم إنجازها مسبقًا ، حيث يتعين عليهم محاذاة النص الجديد الذي نقوم بترميزه.

يمكنني تقديم مساعدتي إذا كنت أعلم أنه يمكن إصداره في غضون أسبوعين أو ثلاثة أسابيع (تذييل العمود ومحاذاة). وإلا سأضطر إلى إيجاد حلول أخرى.

لم أستطع فهم ما إذا كان # 6896 يتعلق بتذييل العمود لذا كتبت هنا.

شكر.

kaanozcan لقد هنا ) مرة أخرى في مارس ، قام الفريق الأساسي بدمجها ، ثم تم التراجع عنها. يبدو أن لديهم فكرة أخرى حول كيفية معالجة المشكلة. بالنظر إلى الموقف ، أقترح عليك أن تسلك طريق "إيجاد حلول أخرى".

kaanozcan هنا مثال يحقق هدفك من خلال المكونات المخصصة https://codesandbox.io/s/xjpkx9rzzw

yesmeck هذا يعمل بشكل مثالي. شكر.

يمكن تحقيق الإغلاق بسبب الطلب الأصلي من خلال المكونات المخصصة.

yesmeck هل يمكننا تقديم عرض توضيحي حول حالة الاستخدام هذه؟

https://codesandbox.io/s/xjpkx9rzzw
هذا المثال ليس له معنى عملي. لأنه إذا تغيرت البيانات .. المجموع الأخير لا يستخدم أحدث البيانات. إنه نتيجة التحديث الأخير. يجب أن يكون حيث توجد بيانات متسخة.

yesmeck لا يمكن استخدام المثال الذي قدمته ... لأنه لا يمكن تغيير البيانات.
const data = [ { key: "1", name: "John Brown", age: 30, address: "New York No. 1 Lake Park", }, { key: "2", name: "Jim Green", age: 20, address: "London No. 1 Lake Park", }, { key: "3", name: "Joe Black", age: Math.random() * 20, address: "Sidney No. 1 Lake Park", }, ]; مثل هذا التعديل ... في الواقع المجموع النهائي غير صحيح.

yesmeck https://codesandbox.io/s/xjpkx9rzzw هذا العرض التوضيحي به مشكلة ، عند تعيين اليسار من الثابت ، يمكنك رؤية النمط في حالة من الفوضى。

تمكنت من القيام بذلك باستخدام غلاف المكون ، لكنه محرج نوعًا ما. يبدو الرمز هكذا

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      localData: props.data,
    };

    this.tableRef = React.createRef();
  }

  handleTableUpdate = () => {
    this.setState({ localData: this.tableRef.current.getLocalData() });
  }

  render() {
    return (
      <Table
        ref={this.tableRef}
        columns={this.props.columns}
        dataSource={this.props.data}
        onChange={this.handleTableUpdate}
        components={{
          body: {
            wrapper: (props) => (
              <BodyWithSummary
                columns={this.props.columns}
                data={this.state.localData}
                {...props}
              />
            ),
          },
        }}
      />
    );
  }
}

function BodyWithSummary(props) {
  const { data, columns, ...otherProps } = props;
  return (
    <tbody {...otherProps}>
      <React.Fragment>
        {data && data.length > 0 && (
          <tr>
            {props.columns.map((col) => renderColumn(col, data))}
          </tr>
        )}
        {props.children}
      </React.Fragment>
    </tbody>
  );
}

الشيء المزعج هو أنني بحاجة إلى الاتصال بـ getLocalData إذا كنت أرغب في حساب البيانات المجمعة في الصفوف التي تمت تصفيتها.
سيكون أجمل بكثير إذا كان غلاف الجسم سيتلقى مرجع الجدول كدعم أو لديه طريقة أسهل للوصول إلى البيانات التي سيتم تقديمها (props.children هي قائمة بالعقد التفاعلية ، وليست مفيدة جدًا لحساب المجاميع)

هل يمكننا استخدام الخاصية footer ولكن يتم عرضها في الجدول بدلاً من div الإضافية؟

تم التعامل معها مؤقتًا مثل هذا:

      .ant-table-footer {
        padding: 0;
      }

                                    footer={(currentPageData)=>{
                                        return (
                                            <Row style={{marginRight:17}}>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>合计</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4}>
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                            </Row>
                                        );
                                    }}

إنها ليست مثالية.

نتطلع إلى أسفل الأعمدة التي ستخرج قريبًا O (∩_∩) O

ybning هل لديك مشاكل مع الأعمدة الثابتة؟ العديد من هذه الأعمدة الثابتة ستواجه مشاكل. .

yesmeck يكسر المثال الخاص بك حساب الجدول الداخلي: https://codesandbox.io/s/rrpo02qwkq
انتقل إلى الصفحة 2 ثم ارجع إلى الصفحة 1 ، حيث تقوم بتكرار البيانات الموجودة في كل تنقل.

أي تحديث لهذه القضية؟

linrf لا ، آمل أن يتمكن أحد من حل هذه المشكلة

مثله.
https://codepen.io/chaegumi/pen/OaqxVd

هل يمكننا إضافة خاصية total لإحصائيات تجميع الصفقات؟
يختلف total عن footer ،
اقبل فقط دالة للتعامل مع بيانات العمود ، الافتراضي هو reduce

أخيرًا أضع الإجمالي في العمود

إن عرض محتوى تذييل الجدول الخاص بـ antd ليس سهلاً حقًا للاستخدام ، خاصةً عندما يحتوي الجدول نفسه على أعمدة ثابتة.

يمكنك تغيير طريقة تحقيق ذلك من خلال جدولين ، أحدهما لعرض الجدول الأصلي والآخر لعرض عنصر التذييل السفلي. مع تغطية النمط ، قم بإخفاء رأس تذييل الجدول وشريط التمرير لمنطقة التمرير الأصلية للجدول. أخيرًا ، أضف كود JS لمحاذاة مواضع التمرير الأفقية للجدولين ، وهو نفسه تقريبًا.

المكونات:

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import styles from './index.less';

export default class ChartTable extends PureComponent {
  constructor(props) {
    super(props);

    this.refBox = React.createRef();
  }
  componentDidMount() {
    const tableList = Array.from(this.refBox.current.querySelectorAll('.ant-table-body'));
    this.tableList = tableList;
    tableList.forEach((table) => {
      table.addEventListener('scroll', this.handleTableScroll);
    });
  }
  componentWillUnmount() {
    this.tableList.forEach((table) => {
      table.removeEventListener('scroll', this.handleTableScroll);
    });
  }
  handleTableScroll = (e) => {
    const current = e.currentTarget;
    this.tableList.forEach((table) => {
      if (table !== current && table.scrollLeft !== current.scrollLeft) {
        table.scrollLeft = current.scrollLeft;
      }
    });
  }
  renderFooterTable = () => {
    const { columns, dataSource } = this.props;
    const dataList = [{
      department: '合计',
    }];
    return (
      <Table
        className={styles.footerTable}
        pagination={false}
        scroll={{ x: 'max-content' }}
        size="small"
        columns={columns}
        dataSource={dataList}
      />
    );
  }
  render() {
    return (
      <div ref={this.refBox}>
        <Table
          className={styles.mainTable}
          pagination={false}
          scroll={{ x: 'max-content', y: 350 }}
          size="small"
          columns={this.props.columns}
          dataSource={this.props.dataSource}
        />
        {this.renderFooterTable()}
      </div>
    );
  }
}

ملف تغطية النمط:

mainTable {
  :global {
    .ant-table-body::-webkit-scrollbar {
      display: none;
    }
  }  
}
.footerTable {
  border-top: 1px solid #e8e8e8;

  :global {
    thead {
      display: none;
    }
  }
}

أحب أن يكون لديك طريقة +1 لعرض تجميعات الأعمدة في التذييل.

يمكن تنفيذ ذلك باستخدام دعامة المكونات.

const __Table = (totalsRow = initTotals(), key='tableKey') => ({
    className,
    style,
    children
}) => (
    <table className={className} style={style} key={key}>
        {children}
        <tfoot>
            <tr>
                // add tfoot td here
            </tr>
        </tfoot>
    </table>
);

const TableWithTFoot = ({allData, columns}) =>
    <Table
        dataSource={allData.data}
        columns={columns}
        pagination={false}
        components={{ table: __Table(allData.totals) }}
    />

قام rororofff بتمويل 5.00 دولارات لهذه المشكلة.

• أرسل طلب السحب عبر
• تريد المساهمة؟ شارك في هذه المشكلة عبر IssueHunt .
• تحقق من IssueHunt Issue Explorer لمعرفة المزيد من المشكلات الممولة.
• بحاجة الى مساعدة من المطورين؟ أضف المستودع الخاص بك على IssueHunt لجمع الأموال.

piuccio وفقًا

https://github.com/Arweil/antd-ext/blob/master/src/TableExt/TableExt.tsx

https://github.com/ant-design/ant-design/issues/5710#issuecomment -450855438

this.refBox = React.createRef();

أنا استخدم حزمة الإصدار هذه ، فشلت تشغيل هذا الرمز.
"antd": "2.13.14" ، "رد فعل": "15.4.0" ، "رد فعل دوم": "15.4.0"

رسالة خطأ
Uncaught TypeError: _react2.default.createRef is not a function at new EstimationReport (psReport.js?18c1:47) at eval (ReactCompositeComponent.js?063f:295) at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75) at

carvendy من المحتمل أن يكون هو إعداد حل الوحدة عند استيراد react . حاول التغيير

import from 'react';

في هذا:

import * as react from 'react'

لقد صنعت أحد المكونات ،
استخدم نموذج الأعمدة لتقديم التذييل
ومع ذلك ، فإن أشرطة التمرير غير مدعومة حاليًا.

import React from 'react';

class TableFooter extends React.Component {
  render() {
    const { dataSource, columns } = this.props;
    return (
      <table className="ant-table">
        <colgroup>
          {columns.map((colModel, index) => {
            return <col style={{
              width: colModel.width,
              minWidth: colModel.width
            }} key={index} />
          })}
        </colgroup>
        <tfoot >
          <tr >
            {columns.map((colum, idxCol) => {
              return <td style={{ padding: "0px 8px" }} className={colum.className} key={idxCol}>
                <strong>
                  {colum.footerContent ? colum.footerContent : (colum.footerSum ? dataSource.reduce((sum, record) => sum + parseFloat(record[colum.key]), 0) : "")}
                </strong>
              </td>
            })}
          </tr>
        </tfoot>
      </table>
    )
  }
}
export default TableFooter;

استدعاء الصفحة

...
render() {
  const columns = [
      {
        key: 'productName'
        footerContent: 'SUM:',
      },
      {
        key: 'quantity',
        footerSum: true,
      }
    }
];
return (
  <Table
    columns={columns}
    dataSource={dataSource}
    footer={()=> {
        return (
           <TableFooter dataSource={dataSource} columns={columns} />
        )
       }
    }
  />
)
....

var data = this.getLocalData () ؛
فار الحالي
var pageSize ؛
var state = this.state؛ // إذا لم يكن هناك ترحيل ، فسيتم عرض الكل افتراضيًا

  if (!this.hasPagination()) {
    pageSize = Number.MAX_VALUE;
    current = 1;
  } else {
    pageSize = state.pagination.pageSize;
    current = this.getMaxCurrent(state.pagination.total || data.length);
  } // 分页
  // ---
  // 当数据量少于等于每页数量时，直接设置数据
  // 否则进行读取分页数据


  if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
    data = data.filter(function (_, i) {
      return i >= (current - 1) * pageSize && i < current * pageSize;
    });
  }

  return data;
}

هذه هي الكود المصدري لبيانات معالجة الجدول. هل يمكنك إضافة دالة هنا لحساب مجموع قيم القائمة ، وإضافة العدد الإجمالي للبيانات عند الإخراج ، وطرح البيانات المضافة للتو من الصفحة و pageizesorrycc

بعد عامين ، لا تزال هذه المشكلة قائمة.

بعد عامين ، لا تزال هذه المشكلة قائمة.

لقد استخدمت في الأصل طريقة تعديل عرض إعادة كتابة العمود وإلحاق البيانات في الجدول غير المقسم إلى صفحات:

ولكن في حالة ترقيم الصفحات ، إذا تم تحميل بيانات متعددة ، فسيتم قتلها. https://github.com/ant-design/ant-design/blob/fee5e291632cce131611dd1a9e2ab89e02ee43a3/components/table/Table.tsx#L407

أرغب في العلاقات العامة ، لكنني أخشى أن تصميم API الخاص بي لا يلبي متطلبات رئيسي @ afc163 ...

بعد عامين ، لا تزال هذه المشكلة قائمة.

الجدول الجديد في الطريق. نتطلع إلى الجدول الجديد

https://github.com/ant-design/ant-design/issues/16911#issuecomment -523423460

@ alexchen1875 لم يذكر أي شيء متعلق بهذا.

@ alexchen1875 لم يذكر أي شيء متعلق بهذا.

اقرأ التعليمات الموجودة في قسم الجدول بعناية.

@ alexchen1875 رهيبة!

أرغب في تقديم PR وإضافة الدعائم مؤقتًا "السماح للبيانات بعدم اقتصاص البيانات" لدعم تخطي https://github.com/ant-design/ant-design/blob/61e319b66826530a1882c20a41862a15d57b120a/components/table/Table.tsx منطق التصفية https://github.com/ant-design/ant-design/issues/5710#issuecomment -524164125 متاحًا أيضًا في حالة ترقيم الصفحات ، لا أعرف ما إذا كان الفريق سيقبل ...

لقد قمت بتعديل هذا العرض التوضيحي ،
دعم إضافي للأعمدة الثابتة ، وتجميع الرؤوس ، ودمج الخلايا والتمرير ،
لقد استخدمت \

👉 عنوان تجريبي جديد

الاستعمال:

const calcRow = [
    {
        colspan: 2,
        render: () => 'total'
    },
    {
        render: sum => sum('age')
    },
    {
        render: sum => sum('score')
    }
]

كان antd v4 يدعم الجدول summary : https://github.com/ant-design/ant-design/issues/21656

https://ant.design/components/table/#components -table-demo-abstract

كان antd v4 يدعم الجدول summary : # 21656

https://ant.design/components/table/#components -table-demo-abstract

يدعم antd4 الملخص ، لكني أشعر أن هذا الملخص لا يزال بحاجة إلى الاستمرار في التكرار. على الرغم من أن الطريقة الحالية لاستخدامه مجانية في الكتابة ، إلا أن التأثير في نفس الوقت هو أن الكود مرهق للغاية ولا يتناسب مع الهدف الأصلي لـ antd4 ليصبح أبسط وأبسط.

السيناريو البسيط الشائع هو تلخيص بيانات الصفحة الحالية. يجب أن تكون التجربة المألوفة هي تكوين الملخص مباشرة