示例分类顺序调整

demo/demolist/Demo01.js

@@ -1,12 +1,12 @@
 /**
 *
-* @title 基本用法
+* @title 基本表格
 * 【Tooltip】
 * @description
 */
 
 import React, { Component } from "react";
-import {Button,Tooltip,Popconfirm} from "tinper-bee";
+import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [
@@ -29,29 +29,13 @@ const columns = [
     }
   },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    render(text, record, index) {
-      return (
-        <div style={{ position: 'relative' }} title={text} >
-          <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-            <a href="javascript:;" tooltip={text}>
-              一些操作
-            </a>
-          </Popconfirm>
-        </div>
-      );
-    }
-  }
 ];
 
 const data = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+  { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
 class Demo1 extends Component {
@@ -63,6 +47,19 @@ class Demo1 extends Component {
       selectedRowIndex: 0
     }
   }
+  handleClick = () => {
+    console.log('这是第' , this.currentIndex , '行');
+    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 (
@@ -73,6 +70,8 @@ class Demo1 extends Component {
           parentNodeId='parent'
           height={40}
           headerHeight={40}
+          hoverContent={this.getHoverContent}
+          onRowHover={this.onRowHover}
           onRowClick={(record, index, indent) => {
             this.setState({
               selectedRowIndex: index

demo/demolist/Demo02.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title 无数据时显示
+* @title 默认无数据展示
 * @description 无数据时显示效果展示（可自定义）
  *
 * import {Table} from 'tinper-bee';
@@ -9,6 +9,7 @@
 
 import React, { Component } from 'react';
 import Table from '../../src';
+import Icon from 'bee-icon';
 
 
 const columns10 = [
@@ -35,11 +36,11 @@ const columns10 = [
     
   ];
 
-  const emptyFunc = () => <span>这里没有数据！</span>
+  const emptyFunc = () => <Icon type="uf-nodata"></Icon>
   
   class Demo10 extends Component {
     render() {
-      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
+      return <Table className="demo02" columns={columns10} data={data10} emptyText={emptyFunc} />;
     }
   }
 

demo/demolist/Demo02.scss

@@ -0,0 +1,5 @@
+.demo02 {
+    .u-table-placeholder i{
+        font-size: 40px;
+    }
+}

demo/demolist/Demo04.js

@@ -0,0 +1,79 @@
+/**
+*
+* @title 隔行换色
+* @description 可自定义斑马线颜色
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+const columns6 = [
+  {
+    title: "Full Name",
+    width: 100,
+    dataIndex: "name",
+    key: "name"
+  },
+  { title: "Age", width: 100, dataIndex: "age", key: "age"},
+  { title: "Address", dataIndex: "address", key: "1" }
+];
+
+const data6 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York Park"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },{
+    key: "11",
+    name: "John Brown",
+    age: 32,
+    address: "New York Park"
+  },
+  {
+    key: "12",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "13",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "14",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  }
+];
+
+class Demo04 extends Component {
+  render() {
+    return <Table className="demo04" columns={columns6} data={data6} />;
+  }
+}
+
+export default Demo04; 

demo/demolist/Demo04.scss

@@ -0,0 +1,8 @@
+.demo04 {
+    &.u-table tr:nth-child(2n){
+        background: #f7f9fb;
+    }
+    &.u-table tr.u-table-row-hover, .u-table tr:hover{
+        background: #ebecf0;
+    }
+}

demo/demolist/Demo05.js

@@ -1,6 +1,6 @@
 /**
 *
-* @title loading表格
+* @title 表格 Loading 加载
 * @description  loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
 *
 */

demo/demolist/Demo18.js

@@ -1,6 +1,6 @@
 /**
  *
- * @title 多表头
+ * @title 多列表头
  * @description columns[n] 可以内嵌 children，以渲染分组表头。
  * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
  *

demo/demolist/Demo2.js

@@ -41,8 +41,8 @@ const columns12 = [
 
 const data12 = [
   { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
-  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false}
 ];
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
 let MultiSelectTable  = multiSelect(Table, Checkbox);
@@ -85,6 +85,13 @@ class Demo12 extends Component {
         columns={columns12} 
         data={data12} 
         multiSelect={multiObj}
+        rowClassName={(record,index,indent)=>{
+          if (record._checked) {
+              return 'selected';
+          } else {
+              return '';
+          }
+        }}
         getSelectedDataFunc={this.getSelectedDataFunc}/>
     );
   }

dist/demo.css

@@ -578,6 +578,15 @@
   .demo25 .u-table-filter-column-filter-icon {
     right: 15px; }
 
+.demo02 .u-table-placeholder i {
+  font-size: 40px; }
+
+.demo04.u-table tr:nth-child(2n) {
+  background: #f7f9fb; }
+
+.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
+  background: #ebecf0; }
+
 th .drop-menu .uf {
   font-size: 12px;
   visibility: hidden;