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

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: "b", key: "b", width: 500,textAlign:'center'},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200,"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: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];
 
 class Demo01 extends Component {

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",
+      title: "员工编号",
-      dataIndex: "name",
+      dataIndex: "num",
-      key: "name",
+      key: "num",
       width: "40%"
     },
     {
-      title: "Age",
+      title: "员工姓名",
-      dataIndex: "age",
+      dataIndex: "name",
-      key: "age",
+      key: "name",
       width: "30%"
     },
     {
-      title: "Address",
+      title: "部门",
-      dataIndex: "address",
+      dataIndex: "department",
-      key: "address"
+      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() {

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",
+      title: "序号",
-    width: 100,
+      dataIndex: "index",
-    dataIndex: "name",
+      key: "index",
-    key: "name"
+      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",
+    orderCode:"2343", 
-    name: "John Brown",
+    supplierName: "xxx",
-    age: 32,
+    type_name: "123",
-    address: "New York Park"
+    purchasing:'内行', 
+    purchasingGroup:"323",
+    voucherDate:"kkkk",
+    approvalState_name:"vvvv",
+    confirmState_name:"aaaa",
+    closeState_name:"vnnnnn",
+    key: "1"
   }, 
   { 
-    key: "2",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "2"
   },
   { 
-    key: "3",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "3"
   },
   { 
-    key: "4",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    purchasing:'内行2', 
-  },{
+    purchasingGroup:"3223",
-    key: "11",
+    voucherDate:"222kk",
-    name: "John Brown",
+    approvalState_name:"22vvvv",
-    age: 32,
+    confirmState_name:"2aaaa",
-    address: "New York Park"
+    closeState_name:"2vnnnnn",
+    key: "4"
   },
   { 
-    key: "12",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "5"
   },
   { 
-    key: "13",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    key: "6"
   },
   { 
-    key: "14",
+    orderCode:"222", 
-    name: "Jim Green",
+    supplierName: "22xxx",
-    age: 40,
+    type_name: "1223",
-    address: "London Park"
+    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"
+  },
 ];
 
 class Demo03 extends Component {

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: "年龄", width: 100, dataIndex: "age", key: "age"},
-  { title: "Address", dataIndex: "address", key: "1" }
+  { 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}/>
   }
 }
 

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 },
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-  {
+  { title: "部门", dataIndex: "d", key: "d", 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>
-      );
-    }
-  }
 ];
 
 const data05 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+  { 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}}
         />

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, 
+        orderCode:"222", 
-      _checked:true,
+        supplierName: "22xxx",
-      orderCode:"222", 
+        type_name: "1223",
-      supplierName: "22xxx",
+        purchasing:'内行2', 
-      type_name: "1223",
+        purchasingGroup:"3223",
-      purchasing:'内行2', 
+        voucherDate:"222kk",
-      purchasingGroup:"3223",
+        approvalState_name:"22vvvv",
-      voucherDate:"222kk",
+        confirmState_name:"2aaaa",
-      approvalState_name:"22vvvv",
+        closeState_name:"2vnnnnn",
-      confirmState_name:"2aaaa",
+        key: "2"
-      closeState_name:"2vnnnnn",
-      key: "2"
     },
     { 
-      index: 3, 
+        orderCode:"222", 
-      orderCode:"222", 
+        supplierName: "22xxx",
-      supplierName: "22xxx",
+        type_name: "1223",
-      _disabled:true,
+        purchasing:'内行2', 
-      type_name: "1223",
+        purchasingGroup:"3223",
-      purchasing:'内行2', 
+        voucherDate:"222kk",
-      purchasingGroup:"3223",
+        approvalState_name:"22vvvv",
-      voucherDate:"222kk",
+        confirmState_name:"2aaaa",
-      approvalState_name:"22vvvv",
+        closeState_name:"2vnnnnn",
-      confirmState_name:"2aaaa",
+        key: "3"
-      closeState_name:"2vnnnnn",
-      key: "3"
     },
     { 
-      index: 4, 
+        orderCode:"222", 
-      orderCode:"222", 
+        supplierName: "22xxx",
-      supplierName: "22xxx",
+        type_name: "1223",
-      type_name: "1223",
+        purchasing:'内行2', 
-      purchasing:'内行2', 
+        purchasingGroup:"3223",
-      purchasingGroup:"3223",
+        voucherDate:"222kk",
-      voucherDate:"222kk",
+        approvalState_name:"22vvvv",
-      approvalState_name:"22vvvv",
+        confirmState_name:"2aaaa",
-      confirmState_name:"2aaaa",
+        closeState_name:"2vnnnnn",
-      closeState_name:"2vnnnnn",
+        key: "4"
-      key: "4"
     },
 ];
 
 class Demo11 extends Component {
   render() {
     return (
-        <Table columns={columns11} data={data11} scroll={{x:true}} />
+        <Table columns={columns} data={data} scroll={{x:true}} />
     );
   }
 }

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: "b", key: "b", width: 500,textAlign:'center'},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+  { 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: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { 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>}
         />
     );
   }

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;

demo/demolist/Demo22.scss

@@ -0,0 +1,5 @@
+.demo22{
+    .opt-btns{
+        margin-bottom: 8px;
+    }
+}

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>
-                    );
-                  }
                 }
               ]};
   }

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; }

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"
  }
 }