修改示例数据、增加远程加载数据示例

2019-04-18 15:31:24 +08:00 · 2019-04-18 15:31:24 +08:00 · 6d25e1a2d1
parent 707c1a98ed
commit 6d25e1a2d1
16 changed files with 12623 additions and 2872 deletions
--- a/demo/demolist/Demo01.js
+++ b/demo/demolist/Demo01.js
@ -2,7 +2,7 @@
 *
 * @title 基本表格
 * @parent 基础 Basic
-* @description 鼠标hover行时呼出操作按钮
+* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
 */

 import React, { Component } from "react";
@ -11,14 +11,15 @@ import Table from "../../src";

 const columns = [
  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
    fixed:'left',
+    textAlign:'center',
    render: (text, record, index) => {
      return (
        <Tooltip inverse overlay={text}>
          <span tootip={text} style={{
            display: "inline-block",
-            width: "60px",
+            width: "80px",
            textOverflow: "ellipsis",
            overflow: "hidden",
            whiteSpace: "nowrap",
@ -28,14 +29,15 @@ const columns = [
      );
    }
  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500,"textAlign":'center'},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200,"textAlign":'center' }
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
+  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo01 extends Component {
--- a/demo/demolist/Demo02.js
+++ b/demo/demolist/Demo02.js
@ -11,30 +11,29 @@ import React, { Component } from 'react';
 import Table from '../../src';
 import Icon from 'bee-icon';

-
 const columns02 = [
    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: "员工编号",
+      dataIndex: "num",
+      key: "num",
      width: "40%"
    },
    {
-      title: "Age",
-      dataIndex: "age",
-      key: "age",
+      title: "员工姓名",
+      dataIndex: "name",
+      key: "name",
      width: "30%"
    },
    {
-      title: "Address",
-      dataIndex: "address",
-      key: "address"
+      title: "部门",
+      dataIndex: "department",
+      key: "department"
    }
-  ];
+];
  
-  const data02 = [];
+const data02 = [];

-  const emptyFunc = () => <Icon type="uf-nodata"></Icon>
+const emptyFunc = () => <Icon type="uf-nodata"></Icon>
  
 class Demo02 extends Component {
  render() {
--- a/demo/demolist/Demo03.js
+++ b/demo/demolist/Demo03.js
@ -2,7 +2,7 @@
 *
 * @title 固定表头
 * @parent 基础 Basic
-* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
+* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
 */

 import React, { Component } from 'react';
@ -10,63 +10,167 @@ import Table from '../../src';

 const columns03 = [
  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name"
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      render(text, record, index) {
+          return index + 1;
+      }
  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 200, 
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 200
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 200
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 200
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+      width: 200
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+  },
+  {
+      title: "审批状态",
+      dataIndex: "approvalState_name",
+      key: "approvalState_name",
+      width: 200
+  },
+  {
+      title: "确认状态",
+      dataIndex: "confirmState_name",
+      key: "confirmState_name",
+       width: 200
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
+      width: 100
+  }
 ];

 const data03 = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+  { 
+    orderCode:"2343", 
+    supplierName: "xxx",
+    type_name: "123",
+    purchasing:'内行', 
+    purchasingGroup:"323",
+    voucherDate:"kkkk",
+    approvalState_name:"vvvv",
+    confirmState_name:"aaaa",
+    closeState_name:"vnnnnn",
+    key: "1"
+  }, 
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "2"
  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "3"
  },
-  {
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "4"
  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },{
-    key: "11",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "5"
  },
-  {
-    key: "12",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "6"
  },
-  {
-    key: "13",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "7"
+  },
+  { 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "8"
  },
-  {
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
 ];

 class Demo03 extends Component {
--- a/demo/demolist/Demo04.js
+++ b/demo/demolist/Demo04.js
@ -12,13 +12,13 @@ import Table from '../../src';

 const columns04 = [
  {
-    title: "Full Name",
+    title: "员工姓名",
    width: 100,
    dataIndex: "name",
    key: "name"
  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
+  { title: "年龄", width: 100, dataIndex: "age", key: "age"},
+  { title: "住址", dataIndex: "address", key: "1" }
 ];

 const data04 = [
@ -73,7 +73,12 @@ const data04 = [

 class Demo04 extends Component {
  render() {
-    return <Table className="demo04" columns={columns04} data={data04} />;
+    return <Table 
+            className="demo04" 
+            columns={columns04} 
+            data={data04} 
+            height={40}
+            headerHeight={40}/>
  }
 }

--- a/demo/demolist/Demo05.js
+++ b/demo/demolist/Demo05.js
@ -2,38 +2,25 @@
 *
 * @title 表格 Loading 加载
 * @parent 基础 Basic
-* @description  loading可以传boolean或者object对象，object为bee-loading组件的参数类型
+* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
 *
 */

 import React, { Component } from "react";
 import Table from "../../src";
-import {Button,Popconfirm} from "tinper-bee";
+import {Button,Tooltip} from "tinper-bee";

 const columns05 = [
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    render(text, record, index) {
-      return (
-        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-          <a href="javascript:;">
-            一些操作
-          </a>
-        </Popconfirm>
-      );
-    }
-  }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data05 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo05 extends Component {
@ -60,8 +47,6 @@ class Demo05 extends Component {
        <Table
          columns={columns05}
          data={data05}
-          title={currentData => <div>标题: 这是一个标题</div>}
-          footer={currentData => <div>表尾: 我是小尾巴</div>}
          // loading={this.state.loading}或者是boolean
          loading={{show:this.state.loading}}
        />
--- a/demo/demolist/Demo11.js
+++ b/demo/demolist/Demo11.js
@ -8,12 +8,15 @@
 import React, { Component } from "react";
 import Table from "../../src";

-const columns11 = [
+const columns = [
    {
        title: "序号",
        dataIndex: "index",
        key: "index",
        width: 200, 
+        render(text, record, index) {
+            return index + 1;
+        }
    },
    {
        title: "订单编号",
@ -43,14 +46,13 @@ const columns11 = [
        title: "采购组",
        dataIndex: "purchasingGroup",
        key: "purchasingGroup",
-         width: 300
+        width: 300
    },
    {
        title: "凭证日期",
        dataIndex: "voucherDate",
        key: "voucherDate",
        width: 200,
-        
    },
    {
        title: "审批状态",
@ -72,9 +74,8 @@ const columns11 = [
    }
 ];

-const data11 = [
+const data = [
    { 
-        index: 1, 
        orderCode:"2343", 
        supplierName: "xxx",
        type_name: "123",
@ -87,52 +88,47 @@ const data11 = [
        key: "1"
    }, 
    { 
-      index: 2, 
-      _checked:true,
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "2"
+        orderCode:"222", 
+        supplierName: "22xxx",
+        type_name: "1223",
+        purchasing:'内行2', 
+        purchasingGroup:"3223",
+        voucherDate:"222kk",
+        approvalState_name:"22vvvv",
+        confirmState_name:"2aaaa",
+        closeState_name:"2vnnnnn",
+        key: "2"
    },
    { 
-      index: 3, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      _disabled:true,
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "3"
+        orderCode:"222", 
+        supplierName: "22xxx",
+        type_name: "1223",
+        purchasing:'内行2', 
+        purchasingGroup:"3223",
+        voucherDate:"222kk",
+        approvalState_name:"22vvvv",
+        confirmState_name:"2aaaa",
+        closeState_name:"2vnnnnn",
+        key: "3"
    },
    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      key: "4"
+        orderCode:"222", 
+        supplierName: "22xxx",
+        type_name: "1223",
+        purchasing:'内行2', 
+        purchasingGroup:"3223",
+        voucherDate:"222kk",
+        approvalState_name:"22vvvv",
+        confirmState_name:"2aaaa",
+        closeState_name:"2vnnnnn",
+        key: "4"
    },
 ];

 class Demo11 extends Component {
  render() {
    return (
-        <Table columns={columns11} data={data11} scroll={{x:true}} />
+        <Table columns={columns} data={data} scroll={{x:true}} />
    );
  }
 }
--- a/demo/demolist/Demo21.js
+++ b/demo/demolist/Demo21.js
@ -2,7 +2,7 @@
 *
 * @title 渲染本地数据
 * @parent 数据操作 Data Opetation
-* @description 
+* @description 可自定义页头和页脚。
 */

 import React, { Component } from "react";
@ -11,14 +11,15 @@ import Table from "../../src";

 const columns = [
  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
    fixed:'left',
+    textAlign:'center',
    render: (text, record, index) => {
      return (
        <Tooltip inverse overlay={text}>
          <span tootip={text} style={{
            display: "inline-block",
-            width: "60px",
+            width: "80px",
            textOverflow: "ellipsis",
            overflow: "hidden",
            whiteSpace: "nowrap",
@ -28,16 +29,16 @@ const columns = [
      );
    }
  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
+  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];
-
 class Demo21 extends Component {

  constructor(props) {
@ -52,6 +53,10 @@ class Demo21 extends Component {
        <Table
          columns={columns}
          data={data}
+          height={40}
+          headerHeight={40}
+          title={currentData => <div>员工信息统计表</div>}
+          footer={currentData => <div>合计: 共{data.length}条数据</div>}
        />
    );
  }
--- a/demo/demolist/Demo22.js
+++ b/demo/demolist/Demo22.js
@ -0,0 +1,75 @@
+/**
+*
+* @title 渲染远程数据
+* @parent 数据操作 Data Opetation
+* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
+*/
+
+import React, { Component } from "react";
+import {Button} from "tinper-bee";
+import reqwest from 'reqwest';
+import Table from "../../src";
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  sorter: true,
+  render: name => `${name.first} ${name.last}`,
+  width: '20%',
+}, {
+  title: 'Gender',
+  dataIndex: 'gender',
+  filters: [
+      { text: 'Male', value: 'male' },
+      { text: 'Female', value: 'female' },
+  ],
+  width: '20%',
+}, {
+  title: 'Email',
+  dataIndex: 'email',
+}];
+
+class Demo22 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [],
+      loading: false,
+    }
+  }
+
+  fetch = (params = {}) => {
+    console.log('params:', params);
+    this.setState({ loading: true });
+    reqwest({
+      url: 'https://randomuser.me/api',
+      method: 'get',
+      data: {
+        results: 10,
+        ...params,
+      },
+      type: 'json',
+    }).then((data) => {
+      this.setState({
+        loading: false,
+        data: data.results,
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div className="demo22">
+        <Button className="opt-btns" colors="primary" onClick={() => this.fetch()}>点击加载远程数据</Button>
+        <Table
+          columns={columns}
+          data={this.state.data}
+          loading={this.state.loading}
+          scroll={{y:200}}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo22;
--- a/demo/demolist/Demo22.scss
+++ b/demo/demolist/Demo22.scss
@ -0,0 +1,5 @@
+.demo22{
+    .opt-btns{
+        margin-bottom: 8px;
+    }
+}
--- a/demo/demolist/Demo71.js
+++ b/demo/demolist/Demo71.js
@ -56,22 +56,6 @@ class Demo21 extends Component {
                  title: "武功级别",
                  dataIndex: "d",
                  key: "d"
-                },
-                {
-                  title: "操作",
-                  dataIndex: "e",
-                  key: "e",
-                  render(text, record, index){
-                    return (
-                      <div  title={text} >
-                        <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                          <a href="javascript:;" tooltip={text} >
-                            一些操作
-                          </a>
-                        </Popconfirm>
-                      </div>
-                    );
-                  }
                }
              ]};
  }
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -625,6 +625,9 @@
  -ms-flex-pack: center;
  justify-content: center; }

+.demo22 .opt-btns {
+  margin-bottom: 8px; }
+
 .demo32 .u-table-thead th {
  padding-top: 0px;
  padding-bottom: 0px; }
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/package.json
+++ b/package.json
@ -88,6 +88,7 @@
  "react": "^16.6.3",
  "react-addons-test-utils": "^15.5.0",
  "react-dom": "^16.6.3",
+  "reqwest": "^2.0.5",
  "tinper-bee": "latest"
 }
 }