Merge branch 'master' of github.com:tinper-bee/bee-table

demo/demolist/Demo0101.js

@@ -2,7 +2,8 @@
 *
 * @title 基本表格
 * @parent 基础 Basic
-* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
+* @description 单元格数据过长时，可结合Tooltip组件使用。
+* demo0101
 */
 
 import React, { Component } from "react";
@@ -11,9 +12,8 @@ import Table from "../../src";
 
 const columns = [
   {
-    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
     fixed:'left',
-    textAlign:'center',
     render: (text, record, index) => {
       return (
         <Tooltip inverse overlay={text}>
@@ -29,15 +29,16 @@ const columns = [
       );
     }
   },
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
+  { title: "员工姓名", dataIndex: "b", key: "b", width:100 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
+  { title: "部门", dataIndex: "d", key: "d", width: 100 },
+  { title: "职级", dataIndex: "e", key: "e", width: 100 }
 ];
 
 const data = [
-  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
-  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
-  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
 ];
 
 class Demo01 extends Component {
@@ -53,24 +54,11 @@ class Demo01 extends Component {
     console.log('内容：' , this.currentRecord);
   }
 
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
   render() {
     return (
         <Table
           columns={columns}
           data={data}
-          parentNodeId='parent'
-          bordered = {true}
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
         />
     );
   }

demo/demolist/Demo0102.js

@@ -2,8 +2,8 @@
 *
 * @title 默认无数据展示
 * @parent 基础 Basic
-* @description 无数据时显示效果展示（可自定义）
+* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
-*
+* demo0102
 */
 
 
@@ -33,11 +33,18 @@ const columns02 = [
   
 const data02 = [];
 
-const emptyFunc = () => <Icon type="uf-nodata"></Icon>
+// 在此自定义无数据时的展示内容
+const emptyFunc = () => 'No Data';
   
 class Demo02 extends Component {
   render() {
-    return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
+    return (
+      <Table 
+      columns={columns02} 
+      data={data02} 
+      // emptyText={emptyFunc} 
+      />
+    )
   }
 }
 

demo/demolist/Demo0102.scss

@@ -1,6 +0,0 @@
-.demo02 {
-    .u-table-placeholder i{
-        font-size: 60px;
-        line-height: 60px;
-    }
-}

demo/demolist/Demo0103.js

@@ -3,6 +3,7 @@
 * @title 固定表头
 * @parent 基础 Basic
 * @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
+* demo0103
 */
 
 import React, { Component } from 'react';

demo/demolist/Demo0104.js

@@ -3,7 +3,7 @@
 * @title 隔行换色
 * @parent 基础 Basic
 * @description 可自定义斑马线颜色
-*
+* demo0104
 */
 
 
@@ -11,64 +11,92 @@ import React, { Component } from 'react';
 import Table from '../../src';
 
 const columns04 = [
-  {
+  {title: "序号",dataIndex: "index",key: "index",width: 80, 
-    title: "员工姓名",
+      render(text, record, index) {
-    width: 100,
+          return index + 1;
-    dataIndex: "name",
+      }
-    key: "name"
   },
-  { title: "年龄", width: 100, dataIndex: "age", key: "age"},
+  {title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
-  { title: "住址", dataIndex: "address", key: "1" }
+  {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}
 ];
 
 const data04 = [
-  {
+  { 
-    key: "1",
+    orderCode:"NU0391025", 
-    name: "John Brown",
+    supplierName: "xx供应商",
-    age: 32,
+    type_name: "1",
-    address: "New York Park"
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    key: "2"
   },
-  {
+  { 
-    key: "2",
+    orderCode:"NU0391027", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "3",
-    address: "London Park"
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    key: "3"
   },
-  {
+  { 
-    key: "3",
+    orderCode:"NU0391028", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "4",
-    address: "London Park"
+    purchasing:'组织c', 
+    purchasingGroup:"cc",
+    voucherDate:"2019年03月01日",
+    key: "4"
   },
-  {
+  { 
-    key: "4",
+    orderCode:"NU0391029", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "5",
-    address: "London Park"
+    purchasing:'组织d', 
-  },{
+    purchasingGroup:"ss",
-    key: "11",
+    voucherDate:"2019年02月14日",
-    name: "John Brown",
+    key: "5"
-    age: 32,
-    address: "New York Park"
   },
-  {
+  { 
-    key: "12",
+    orderCode:"NU0391030", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "1",
-    address: "London Park"
+    purchasing:'组织e', 
+    purchasingGroup:"zz",
+    voucherDate:"2019年02月18日",
+    key: "6"
   },
-  {
+  { 
-    key: "13",
+    orderCode:"NU0391031", 
-    name: "Jim Green",
+    supplierName: "xx供应商",
-    age: 40,
+    type_name: "2",
-    address: "London Park"
+    purchasing:'组织f', 
+    purchasingGroup:"qq",
+    voucherDate:"2019年01月01日",
+    key: "7"
+  },
+  { 
+    orderCode:"NU0391032", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织g', 
+    purchasingGroup:"pp",
+    voucherDate:"2019年01月31日",
+    key: "8"
   },
-  {
-    key: "14",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  }
 ];
 
 class Demo04 extends Component {

demo/demolist/Demo0105.js

@@ -3,7 +3,7 @@
 * @title 表格 Loading 加载
 * @parent 基础 Basic
 * @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
-*
+* demo0105
 */
 
 import React, { Component } from "react";

demo/demolist/Demo0106.js

@@ -1,8 +1,9 @@
 /**
 *
-* @title 基本表格
+* @title 单元格内容居中
 * @parent 基础 Basic
-* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
+* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
+* demo0106
 */
 
 import React, { Component } from "react";
@@ -11,7 +12,7 @@ import Table from "../../src";
 
 const columns = [
   {
-    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
+    title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
     fixed:'left',
     textAlign:'center',
     render: (text, record, index) => {
@@ -29,18 +30,19 @@ const columns = [
       );
     }
   },
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
+  { title: "员工姓名", dataIndex: "b", key: "b", width:100,textAlign:'center'},
-  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
+  { title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
-  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
+  { title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
+  { title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
 ];
 
 const data = [
-  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
-  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
-  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
 ];
 
-class Demo01 extends Component {
+class Demo06 extends Component {
 
   constructor(props) {
     super(props);
@@ -53,26 +55,15 @@ class Demo01 extends Component {
     console.log('内容：' , this.currentRecord);
   }
 
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  }
-
   render() {
     return (
         <Table
           columns={columns}
           data={data}
-          height={40}
+          bordered
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
         />
     );
   }
 }
 
-export default Demo01;
+export default Demo06;

demo/demolist/Demo0201.js

@@ -3,6 +3,7 @@
 * @title 横向滚动条
 * @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
+* demo0201
 */
 
 import React, { Component } from "react";

demo/demolist/Demo0202.js

@@ -3,75 +3,104 @@
 * @title 纵向滚动条
 * @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
+* demo0202
 */
 
 import React, { Component } from "react";
 import Table from "../../src";
 
-const columns12 = [
+const columns = [
-    {
+    {title: "序号",dataIndex: "index",key: "index",width: 80, 
-      title: "Full Name",
+        render(text, record, index) {
-      width: 100,
+            return index + 1;
-      dataIndex: "name",
+        }
-      key: "name"
     },
-    { title: "Age", width: 100, dataIndex: "age", key: "age"},
+    {title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
-    { title: "Address", dataIndex: "address", key: "1" }
+    {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}
 ];
-
+  
-const data12 = [
+const data = [
-    {
+    { 
-        key: "1",
+      orderCode:"NU0391025", 
-        name: "John Brown",
+      supplierName: "xx供应商",
-        age: 32,
+      type_name: "1",
-        address: "New York Park"
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      key: "1"
+    }, 
+    { 
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      key: "2"
     },
-    {
+    { 
-        key: "2",
+      orderCode:"NU0391027", 
-        name: "Jim Green",
+      supplierName: "xx供应商",
-        age: 40,
+      type_name: "3",
-        address: "London Park"
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      key: "3"
     },
-    {
+    { 
-        key: "3",
+      orderCode:"NU0391028", 
-        name: "Jim Green",
+      supplierName: "xx供应商",
-        age: 40,
+      type_name: "4",
-        address: "London Park"
+      purchasing:'组织c', 
+      purchasingGroup:"cc",
+      voucherDate:"2019年03月01日",
+      key: "4"
     },
-    {
+    { 
-        key: "4",
+      orderCode:"NU0391029", 
-        name: "Jim Green",
+      supplierName: "xx供应商",
-        age: 40,
+      type_name: "5",
-        address: "London Park"
+      purchasing:'组织d', 
-    },{
+      purchasingGroup:"ss",
-        key: "11",
+      voucherDate:"2019年02月14日",
-        name: "John Brown",
+      key: "5"
-        age: 32,
-        address: "New York Park"
     },
-    {
+    { 
-        key: "12",
+      orderCode:"NU0391030", 
-        name: "Jim Green",
+      supplierName: "xx供应商",
-        age: 40,
+      type_name: "1",
-        address: "London Park"
+      purchasing:'组织e', 
+      purchasingGroup:"zz",
+      voucherDate:"2019年02月18日",
+      key: "6"
     },
-    {
+    { 
-        key: "13",
+      orderCode:"NU0391031", 
-        name: "Jim Green",
+      supplierName: "xx供应商",
-        age: 40,
+      type_name: "2",
-        address: "London Park"
+      purchasing:'组织f', 
+      purchasingGroup:"qq",
+      voucherDate:"2019年01月01日",
+      key: "7"
+    },
+    { 
+      orderCode:"NU0391032", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织g', 
+      purchasingGroup:"pp",
+      voucherDate:"2019年01月31日",
+      key: "8"
     },
-    {
-        key: "14",
-        name: "Jim Green",
-        age: 40,
-        address: "London Park"
-    }
 ];
 class Demo12 extends Component {
   render() {
     return (
-        <Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
+        <Table columns={columns} data={data} scroll={{y:150 }} />
     );
   }
 }

demo/demolist/Demo0301.js

@@ -3,6 +3,7 @@
 * @title 渲染本地数据
 * @parent 数据操作 Data Opetation
 * @description 可自定义页头和页脚。
+* demo0301
 */
 
 import React, { Component } from "react";

demo/demolist/Demo0302.js

@@ -3,6 +3,7 @@
 * @title 渲染远程数据
 * @parent 数据操作 Data Opetation
 * @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
+* demo0302
 */
 
 import React, { Component } from "react";

demo/demolist/Demo0402.js

@@ -4,7 +4,7 @@
  * @parent 列渲染 Custom Render
  * @description columns[n] 可以内嵌 children，以渲染分组表头。
  * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
- *
+ * demo0402
  */
 
 import React, { Component } from "react";

demo/demolist/Demo0404.js

@@ -3,6 +3,7 @@
 * @title 数据关联
 * @parent 列渲染 Custom Render
 * @description 数据行关联自定义菜单显示
+* demo0404
 */
 
 import React, { Component } from 'react';

demo/demolist/Demo0405.js

@@ -3,7 +3,7 @@
  * @title 列合计（总计）
  * @parent 列渲染 Custom Render
  * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
- *
+ * demo0405
  */
 
 import React, { Component } from "react";

demo/demolist/Demo0501.js

@@ -3,7 +3,7 @@
 * @title 编辑态表格
 * @parent 编辑 Editor
 * @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
-*
+* demo0501
 */
 
 import React from "react";

demo/demolist/Demo0502.js

@@ -2,7 +2,7 @@
  *
  * @title 单元格编辑
  * @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
- *
+ * demo0502
  */
 import React, { Component } from "react";
 import Table from "../../src";
@@ -80,7 +80,7 @@ class StringEditCell extends Component {
   }
 }
 
-const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
+const SELECT_SOURCE = ["xx供应商", "yy供应商", "zz供应商", "aa供应商", "bb供应商"];
 
 class SelectEditCell extends Component {
   constructor(props, context) {
@@ -137,11 +137,11 @@ class SelectEditCell extends Component {
 }
 
 const dataSource = [
-  { name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
+  { name: "NU03910001", quality: "xx供应商", level: 70, key: "1" },
-  { name: "绝命", quality: "太古传奇", level: 70, key: "2" },
+  { name: "NU03910002", quality: "yy供应商", level: 75, key: "2" },
-  { name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
+  { name: "NU03910003", quality: "zz供应商", level: 50, key: "3" },
-  { name: "虹光", quality: "传奇", level: 70, key: "4" },
+  { name: "NU03910004", quality: "aa供应商", level: 70, key: "4" },
-  { name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
+  { name: "NU03910005", quality: "bb供应商", level: 60, key: "5" }
 ];
 
 class Demo501 extends Component {
@@ -149,19 +149,19 @@ class Demo501 extends Component {
     super(props);
     this.columns = [
       {
-        title: "装备名称",
+        title: "订单编号",
         dataIndex: "name",
         key: "name",
         render: (text, record, index) => (
           <StringEditCell
             value={text}
-            colName={"装备名称"}
+            colName={"订单编号"}
             onChange={this.onCellChange(index, "name")}
           />
         )
       },
       {
-        title: "品质",
+        title: "供应商名称",
         dataIndex: "quality",
         key: "quality",
         render: (text, record, index) => (
@@ -172,7 +172,7 @@ class Demo501 extends Component {
         )
       },
       {
-        title: "需求等级",
+        title: "采购数量",
         dataIndex: "level",
         key: "level"
       }

demo/demolist/Demo0502.scss

@@ -25,4 +25,4 @@
   .tooltip-inner {
     border-color: #F44336 !important;
   }
-}
+}

demo/demolist/Demo0601.js

@@ -3,7 +3,7 @@
 * @title 左侧固定列
 * @parent 列操作-锁定 Fixed
 * @description 固定列到表格的左侧
-*
+* demo0601
 */
 
 

demo/demolist/Demo0602.js

@@ -3,7 +3,7 @@
 * @title 右侧固定列
 * @parent 列操作-锁定 Fixed
 * @description 固定列到表格的右侧
-*
+* demo0602
 */
 
 

demo/demolist/Demo0603.js

@@ -3,7 +3,7 @@
 * @title 动态设置列锁定、解除锁定
 * @parent 列操作-锁定 Fixed
 * @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
-*
+* demo0603
 */
 import React, { Component } from 'react';
 import {Icon,Menu,Dropdown} from "tinper-bee";

demo/demolist/Demo0701.js

@@ -3,7 +3,7 @@
 * @title 按条件、值过滤
 * @parent 列操作-过滤 Filter
 * @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
-*
+* demo0701
 */
 
 import React, { Component } from 'react';

demo/demolist/Demo0702.js

@@ -3,7 +3,7 @@
 * @title 复杂表格中行过滤
 * @parent 列操作-过滤 Filter
 * @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
-*
+* demo0702
 */
 
 /**

demo/demolist/Demo0802.js

@@ -3,7 +3,7 @@
 * @title 列过滤面板
 * @parent 列操作-隐藏 Hide
 * @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
-*
+* demo0802
 */
 
 

demo/demolist/Demo0901.js

@@ -2,7 +2,7 @@
 * @title 列排序
 * @parent 列操作-排序 Sort
 * @description  column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
-*
+* demo0901
 */
 
 
@@ -14,35 +14,42 @@ import sort from "../../src/lib/sort.js";
 let ComplexTable = sort(Table, Icon);
 const columns11 = [
   {
-    title: "名字",
+    title: "单据编号",
-    dataIndex: "a",
+    dataIndex: "num",
-    key: "a",
+    key: "num",
-    width: 100
+    width: 120,
+    fixed: "left"
   },
   {
-    title: "性别",
+    title: "单据日期",
-    dataIndex: "b",
+    dataIndex: "date",
-    key: "b",
+    key: "date",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
     width: 200,
-    sorter: (a, b) => a.c - b.c
   },
   {
-    title: "武功级别",
+    title: "供应商",
-    dataIndex: "d",
+    dataIndex: "supplier",
-    key: "d"
+    key: "supplier",
+    width: 100
+  },
+  {
+    title: "联系人",
+    dataIndex: "contact",
+    key: "contact",
+  },
+  {
+    title: "整单数量",
+    dataIndex: "total",
+    key: "total",
+    width: 150,
+    sorter: (a, b) => a.total - b.total
   }
 ];
 
 const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+  { num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
 ];
 
 const defaultProps11 = {

demo/demolist/Demo0902.js

@@ -2,6 +2,7 @@
 * @title 后端列排序
 * @parent 列操作-排序 Sort
 * @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
+* demo0902
 */
 
 
@@ -11,43 +12,89 @@ import Table from '../../src';
 import sort from "../../src/lib/sort.js";
 let ComplexTable = sort(Table, Icon);
 
+// const columns11 = [
+//   {
+//     title: "名字",
+//     dataIndex: "a",
+//     key: "a",
+//     width: 100
+//   },
+//   {
+//     title: "性别",
+//     dataIndex: "b",
+//     key: "b",
+//     width: 100
+//   },
+//   {
+//     title: "年龄",
+//     dataIndex: "c",
+//     key: "c",
+//     width: 200,
+//     sorter: (a, b) => a.c - b.c
+//   },
+//   {
+//     title: "武功级别",
+//     dataIndex: "d",
+//     key: "d"
+//   },
+//   {
+//     title: "分数",
+//     dataIndex: "e",
+//     key: "e",
+//     sorter: (a, b) => a.c - b.c
+//   },
+// ];
+
+// const data11 = [
+//   { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
+//   { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
+//   { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
+// ];
 const columns11 = [
   {
-    title: "名字",
+    title: "单据编号",
-    dataIndex: "a",
+    dataIndex: "num",
-    key: "a",
+    key: "num",
-    width: 100
+    width: 120,
+    fixed: "left"
   },
   {
-    title: "性别",
+    title: "单据日期",
-    dataIndex: "b",
+    dataIndex: "date",
-    key: "b",
+    key: "date",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
     width: 200,
-    sorter: (a, b) => a.c - b.c
   },
   {
-    title: "武功级别",
+    title: "供应商",
-    dataIndex: "d",
+    dataIndex: "supplier",
-    key: "d"
+    key: "supplier",
+    width: 100
   },
   {
-    title: "分数",
+    title: "联系人",
-    dataIndex: "e",
+    dataIndex: "contact",
-    key: "e",
+    key: "contact",
-    sorter: (a, b) => a.c - b.c
   },
+  {
+    title: "整单数量",
+    dataIndex: "total",
+    key: "total",
+    width: 150,
+    sorter: (a, b) => a.total - b.total
+  },
+  {
+    title: "金额",
+    dataIndex: "money",
+    key: "money",
+    width: 100,
+    sorter: (a, b) => a.money - b.money
+  }
 ];
 
 const data11 = [
-  { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
+  { num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
+  { num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
+  { num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
 ];
 
 const defaultProps = {

demo/demolist/Demo0903.js

@@ -3,7 +3,7 @@
  * @title 多列排序
  * @parent 列操作-排序 Sort
  * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
- *
+ * demo0903
  */
 
 import React, { Component } from "react";
@@ -15,14 +15,14 @@ import sum from "../../src/lib/sum.js";
 
 const columns13 = [
   {
-    title: "名字",
+    title: "订单编号",
     dataIndex: "a",
     key: "a",
     className:'dfasd',
     width: 200
   },
   {
-    title: "功力指数",
+    title: "金额",
     dataIndex: "b",
     key: "b",
     width: 200,
@@ -34,7 +34,7 @@ const columns13 = [
     }
   },
   {
-    title: "年龄",
+    title: "整单数量",
     dataIndex: "c",
     key: "c",
     width: 200,
@@ -46,7 +46,7 @@ const columns13 = [
     }
   },
   {
-    title: "成绩",
+    title: "日销售量",
     dataIndex: "e",
     key: "e",
     width: 200,
@@ -54,7 +54,7 @@ const columns13 = [
     sorter: (a, b) => a.c - b.c,
   },
   {
-    title: "武功级别",
+    title: "供应商",
     dataIndex: "d",
     key: "d",
     width: 200
@@ -62,11 +62,11 @@ const columns13 = [
 ];
 
 const data13 = [
-  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
+  { a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
-  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
+  { a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
-  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
+  { a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
-  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
+  { a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
-  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
+  { a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
 ];
 
 

demo/demolist/Demo1001.js

@@ -3,6 +3,7 @@
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
 * @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
+* demo1001
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@@ -12,19 +13,19 @@ import dragColumn from '../../src/lib/dragColumn';
 
 const columns = [
   {
-    title: "名字",
+    title: "订单编号",
     dataIndex: "a",
     key: "a",
     width: 100
   },
   {
-    title: "性别",
+    title: "单据日期",
     dataIndex: "b",
     key: "b",
     width: 200
   },
   {
-    title: "年龄",
+    title: "供应商",
     dataIndex: "c",
     key: "c",
     width: 200,
@@ -32,7 +33,7 @@ const columns = [
     sorter: (a, b) => a.c - b.c
   },
   {
-    title: "武功级别",
+    title: "联系人",
     dataIndex: "d",
     key: "d",
     width: 200,
@@ -40,9 +41,9 @@ const columns = [
 ];
 
 const data = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+  { a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
 ];
 
 const DragColumnTable = dragColumn(Table);

demo/demolist/Demo1002.js

@@ -3,6 +3,7 @@
 * @title 拖拽改变列宽度
 * @parent 列操作-拖拽 Drag
 * @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
+* demo1002
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";

demo/demolist/Demo1101.js

@@ -3,7 +3,7 @@
 * @title 嵌套子表格
 * @parent 扩展行 Expanded Row
 * @description 通过expandedRowRender参数来实现子表格
-*
+* demo1101
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1102.js

@@ -3,7 +3,7 @@
 * @title 树型表格数据展示
 * @parent 扩展行 Expanded Row
 * @description 通过在data中配置children数据，来自动生成树形表格
-*
+* demo1102
 */
 
 

demo/demolist/Demo1103.js

@@ -3,6 +3,7 @@
 * @title 自定义表格标题、表尾、选中行颜色
 * @parent 扩展行 Expanded Row
 * @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
+* demo1103
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1105.js

@@ -3,6 +3,7 @@
 * @title 紧凑型、宽松型
 * @parent 扩展行 Expanded Row
 * @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
+* demo1105
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1106.js

@@ -2,7 +2,8 @@
 *
 * @title 自定义行高
 * @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
+* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
+* demo1106
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1107.js

@@ -3,6 +3,7 @@
 * @title 图片在表格中的展示
 * @parent 扩展行 Expanded Row
 * @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
+* demo1107
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1108.js

@@ -3,7 +3,7 @@
 * @title 自定义行、列合并
 * @parent 扩展行 Expanded Row
 * @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
-*
+* demo1108
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1301.js

@@ -2,8 +2,8 @@
 *
 * @title 多选表格
 * @parent 行操作-选择
-* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
+* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
-*
+* demo1301
 */
 
 
@@ -13,39 +13,19 @@ import {Checkbox} from "tinper-bee";
 import Table from '../../src';
 import multiSelect from "../../src/lib/multiSelect.js";
 
-const columns12 = [
+const columns = [
-  {
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-    title: "名字",
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-    dataIndex: "a",
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-    key: "a",
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200,
-    sorter: (a, b) => a.c - b.c
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
 ];
 
-const data12 = [
+const data = [
-  { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
-  { a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
+  { a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
-  { a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
+  { a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
 ];
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let MultiSelectTable  = multiSelect(Table, Checkbox);
@@ -54,7 +34,7 @@ class Demo12 extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      data: data12
+      data: data
     };
   }
   /**
@@ -85,8 +65,8 @@ class Demo12 extends Component {
     };
     return (
       <MultiSelectTable 
-        columns={columns12} 
+        columns={columns} 
-        data={data12} 
+        data={data} 
         multiSelect={multiObj}
         rowClassName={(record,index,indent)=>{
           if (record._checked) {

demo/demolist/Demo1401.js

@@ -3,6 +3,7 @@
 * @title 万行以上数据渲染
 * @parent 无限滚动 Infinite-scroll
 * @description 万行数据渲染
+* demo1401
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1402.js

@@ -3,7 +3,7 @@
 * @title 嵌套子表格滚动加载
 * @parent 无限滚动 Infinite-scroll
 * @description 通过expandedRowRender参数来实现子表格
-*
+* demo1402
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1403.js

@@ -3,6 +3,7 @@
 * @title 多功能表格滚动加载
 * @parent 无限滚动 Infinite-scroll
 * @description
+* demo1403
 */
 
 import React, { Component } from "react";

demo/demolist/Demo1404.js

@@ -2,6 +2,7 @@
 * @title 层级树大数据场景
 * @parent 无限滚动 Infinite-scroll
 * @description
+* demo1404
 */
 import React, { Component } from "react";
 import {Tooltip} from "tinper-bee";

demo/demolist/Demo1601.js

@@ -2,6 +2,7 @@
  * @title 表格+分页
  * @parent 分页 Pagination
  * @description 点击分页联动表格
+ * demo1601
  */
 
 import React, { Component } from "react";
@@ -9,26 +10,22 @@ import {Pagination} from "tinper-bee";
 
 import Table from "../../src";
 
-const columns8 = [
+const columns = [
-  { title: "姓名", dataIndex: "a", key: "a", width: 100 },
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { 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"
-  }
 ];
 
 const pageData = {
   1: [
-    { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
+    { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-    { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
+    { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-    { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
+    { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
   ],
   2: [
-    { a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
+    { a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
-    { a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
+    { a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" },
   ]
 };
 
@@ -51,7 +48,7 @@ class Demo8 extends Component {
   render() {
     return (
       <div className="demo8">
-        <Table columns={columns8} data={this.state.data} />
+        <Table columns={columns} data={this.state.data} />
         <Pagination
           first
           last

demo/demolist/Demo1602.js

@@ -3,7 +3,7 @@
  * @title 表格+搜索
  * @parent 搜索 search
  * @description 搜索刷新表格数据
- *
+ * demo1602
  */
 
 import React, { Component } from "react";
@@ -86,36 +86,17 @@ class Search extends Component {
   }
 }
 
-const columns9 = [
+const columns = [
-  {
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-    title: "姓名",
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-    dataIndex: "a",
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-    key: "a",
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
-    width: 100
-  },
-  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
-    width: 100
-  },
-  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 200
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d"
-  }
 ];
 
 const userData = [
-  { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
-  { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];
 
 class Demo9 extends Component {
@@ -151,7 +132,7 @@ class Demo9 extends Component {
         <div className="clearfix">
           <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
         </div>
-        <Table columns={columns9} data={this.state.data} />
+        <Table columns={columns} data={this.state.data} />
       </div>
     );
   }

src/Table.js

@@ -9,6 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
 import createStore from './createStore';
 import Loading from 'bee-loading';
+import Icon from 'bee-icon';
 import { Event,EventUtil,closest} from "./utils";
 
 const propTypes = {
@@ -78,7 +79,7 @@ const defaultProps = {
   scroll: {},
   rowRef: () => null,
   getBodyWrapper: body => body,
-  emptyText: () => 'No Data',
+  emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
   columns:[],
   minColumnWidth: 80,
   locale:{},

src/Table.scss

@@ -247,6 +247,7 @@ $icon-color:#505F79;
     border-bottom: 1px solid $table-border-color;
     text-align: center;
     position: relative;
+    .table-nodata{ font-size:48px; }
   }
 
   &-expand-icon-col {