commit

public/react/package.json

@@ -7,6 +7,7 @@
     "@monaco-editor/react": "^2.3.0",
     "@novnc/novnc": "^1.1.0",
     "antd": "^3.23.2",
+    "antd-table-infinity": "^1.1.3",
     "array-flatten": "^2.1.2",
     "autoprefixer": "7.1.6",
     "axios": "^0.18.0",
@@ -71,7 +72,6 @@
     "rc-tree": "^1.7.11",
     "rc-upload": "^2.5.1",
     "react": "^16.9.0",
-    "react-base-table": "^1.9.1",
     "react-beautiful-dnd": "^10.0.4",
     "react-codemirror": "^1.0.0",
     "react-codemirror2": "^6.0.0",
@@ -177,6 +177,7 @@
     "compression-webpack-plugin": "^1.1.12",
     "concat": "^1.0.3",
     "happypack": "^5.0.1",
+    "mockjs": "^1.1.0",
     "node-sass": "^4.12.0",
     "reqwest": "^2.0.5",
     "webpack-bundle-analyzer": "^3.0.3",

public/react/src/modules/paths/statics/DisplayTableData.js

@@ -4,21 +4,64 @@
  * @Github: 
  * @Date: 2020-01-10 13:46:30
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-10 13:48:54
+ * @LastEditTime : 2020-01-11 11:20:50
  */
-import React from 'react';
+import 'antd-table-infinity/dist/index.css';
-// import { Table } from 'antd';
+import 'antd-table-infinity/index.css';
+import './index.scss';
+import React, { useState, useEffect } from 'react';
+import { Spin } from 'antd';
+// import {SumTable as Table} from 'antd-table-infinity';
+import { SumTable as Table } from 'antd-table-infinity';
+import { columns, fetchData, sumData } from './mockData';
 
 const DisplayTableData = ({
-  columns,
+  // columns = [],
-  datas
+  // datas,
+  // fetchData
 }) => {
 
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleFetchData = () => {
+    setLoading(true);
+    fetchData(data.length).then(newData => {
+      setLoading(false);
+      const _data = data.concat(newData);
+      setData(_data);
+    })
+  }
+  useEffect(() => {
+    handleFetchData();
+  }, []);
+
+  const loadMoreContent = () => (
+    <div
+      style={{
+        textAlign: 'center',
+        paddingTop: 40,
+        paddingBottom: 40,
+        border: '1px solid #e8e8e8',
+      }}
+    >
+      <Spin tip="Loading..." />
+    </div>
+  );
   return (
     <Table
-      pagination={false}
+      className='statc_table'
-      dataSource={datas}
+      key="key"
+      loading={loading}
+      onFetch={handleFetchData}
+      pageSize={50}
+      loadingIndicator={loadMoreContent}
       columns={columns}
+      sumData={sumData}
+      scroll={{ y: 450 }}
+      dataSource={data}
+      bordered
+      debug
     />
   );
 }

public/react/src/modules/paths/statics/index.js

@@ -4,80 +4,104 @@
  * @Github: 
  * @Date: 2020-01-10 09:33:45
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-10 13:45:26
+ * @LastEditTime : 2020-01-11 11:18:38
  */
 import './index.scss';
-import React from 'react';
+import React, { useState } from 'react';
 import StaticNumberAndTxt from './StaticNumberAndTxt';
+import DisplayTableData from './DisplayTableData';
 import { Table, Tabs } from 'antd';
 const { TabPane } = Tabs;
 const App = () => {
 
+  // const datas = [
+  //   {
+  //     key: '1',
+  //     id: 1,
+  //     id2: '',
+  //     id3: '',
+  //     id4: '',
+  //     id5: '',
+  //     id6: ''
+  //   },
+  //   {
+  //     key: '2',
+  //     id: 2,
+  //     id2: '',
+  //     id3: '',
+  //     id4: '',
+  //     id5: '',
+  //     id6: ''
+  //   },
+  //   {
+  //     key: '3',
+  //     id: 3,
+  //     id2: '',
+  //     id3: '',
+  //     id4: '',
+  //     id5: '',
+  //     id6: ''
+  //   },
+  //   {
+  //     key: '4',
+  //     id: 4,
+  //     id2: '',
+  //     id3: '',
+  //     id4: '',
+  //     id5: '',
+  //     id6: ''
+  //   }
+  // ];
+  const [datas, setDatas] = useState([]); 
   const columns = [
     {
       title: '序号',
-      dataIndex: 'id'
+      id: 'id',
+      //align: 'center',
+      width: 100
     },
     {
       title: '使用单位',
-      dataIndex: 'id2'
+      id: 'id2',
+      //align: 'center',
+      flexGrow: 1
     },
     {
       title: '使用课堂/个',
-      dataIndex: 'id3'
+      id: 'id3',
+      //align: 'center',
+      flexGrow: 1,
+      sortable: true
     },
     {
       title: '课堂实训/个',
-      dataIndex: 'id4'
+      id: 'id4',
+      //align: 'center',
+      flexGrow: 1,
+      sortable: true
     },
     {
       title: '选用实训/个',
-      dataIndex: 'id5'
+      id: 'id5',
+      //align: 'center',
+      flexGrow: 1,
+      sortable: true
     },
     {
       title: '选用实训/次',
-      dataIndex: 'id6'
+      id: 'id6',
+      //align: 'center',
+      flexGrow: 1,
+      sortable: true
     }
   ];
 
-  const datas = [
+ 
-    {
+
-      key: '1',
+  const handleFetchData = () => {
-      id: 1,
+
-      id2: '',
+  }
-      id3: '',
+
-      id4: '',
-      id5: '',
-      id6: ''
-    },
-    {
-      key: '1',
-      id: 1,
-      id2: '',
-      id3: '',
-      id4: '',
-      id5: '',
-      id6: ''
-    },
-    {
-      key: '1',
-      id: 1,
-      id2: '',
-      id3: '',
-      id4: '',
-      id5: '',
-      id6: ''
-    },
-    {
-      key: '1',
-      id: 1,
-      id2: '',
-      id3: '',
-      id4: '',
-      id5: '',
-      id6: ''
-    }
-  ];
   return (
     <div className="static_wrap">
       <div className="ant-spin-container">
@@ -121,21 +145,25 @@ const App = () => {
             </div>
           </section>
           <section className="static_section_table">
-          <Tabs defaultActiveKey="1">
+            {/* <Tabs defaultActiveKey="1">
-            <TabPane tab="Tab 1" key="1">
+              <TabPane tab="Tab 1" key="1">
-              Content of Tab Pane 1
+                <DisplayTableData 
-            </TabPane>
+                  columns={columns} 
-            <TabPane tab="Tab 2" key="2">
+                  datas={datas} 
-              Content of Tab Pane 2
+                  fetchData={handleFetchData}
-            </TabPane>
+                />
-            <TabPane tab="Tab 3" key="3">
+              </TabPane>
-              Content of Tab Pane 3
+              <TabPane tab="Tab 2" key="2">
-            </TabPane>
+                Content of Tab Pane 2
-          </Tabs>
+              </TabPane>
-            <Table
+              <TabPane tab="Tab 3" key="3">
-              pagination={false}
+                Content of Tab Pane 3
-              dataSource={datas}
+              </TabPane>
+            </Tabs> */}
+            <DisplayTableData 
               columns={columns} 
+              datas={datas} 
+              fetchData={handleFetchData}
             />
           </section> 
         </div>

public/react/src/modules/paths/statics/index.scss

@@ -7,6 +7,10 @@
     margin-top: 20px;
   }
 
+  .static_section_table{
+    margin-bottom: 140px;
+  }
+
   .static_section_header{
     .header_title{
       line-height: 1;
@@ -75,14 +79,16 @@
       }
     }
   }
-  .static_section_table{
+  .statc_table{
-    .ant-table-body th{
+    .ant-table-header{
-      background: rgba(241,248,255,1);
+      overflow-x: hidden !important;
-      color:#303133;
+      margin-bottom: 0px !important;
-      text-align: center;
+      border-bottom: 2px solid #e8e8e8;
+      background: green;
     }
-    .ant-table-body tr:nth-child(even){
+    .ant-table-footer .ant-table-content{
-      background: rgba(241,248,255,.4);
+      border-top: 1px solid #e8e8e8;
+      box-sizing: border-box;
     }
   }
 }

public/react/src/modules/paths/statics/mockData.js

@@ -0,0 +1,84 @@
+/*
+ * @Description: 模拟数据
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-11 10:55:33
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-11 11:58:08
+ */
+import { random } from 'lodash';
+
+const getGuid = () =>
+  'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    /* eslint-disable */
+    let r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+
+const fetchData = (startIndex = 0) =>
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve(
+        startIndex >= 500 // 总共只有500条数据
+          ? []
+          : Array.from({ length: 50 }).map((_, i) => {
+              // 每次返回100条
+              const index = startIndex + i;
+              return {
+                key: getGuid(),
+                index: `${index}`,
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park',
+              };
+            }),
+      );
+    }, random(0, 1.0) * 1000);
+  });
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    render: text => text,
+    width: 50,
+  },
+  {
+    title: '使用单位',
+    dataIndex: 'name',
+    // width: 100,
+  },
+  {
+    title: '使用课堂/个',
+    // width: 200,
+    dataIndex: 'age',
+  },
+  {
+    title: '课堂学生/个',
+    // width: 200,
+    dataIndex: 'address',
+  },
+  {
+    title: '选用实训/个',
+    // width: 200,
+    dataIndex: 'address',
+  },
+  {
+    title: '选用实训/个',
+    // width: 200,
+    dataIndex: 'address',
+  }
+];
+
+const sumData = [
+  {
+    index: '合计',
+    key: ',4',
+    name: 'Disabled User',
+    age: 99,
+    address: 'Sidney No. 1 Lake Park',
+  },
+];
+
+export { columns, fetchData, sumData };