示例调整

demo/demolist/Demo13.js

@@ -63,9 +63,12 @@ const columns13 = [
   }
 ];
 
-const data13 = [
-  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90.52, key: "1" },
-
+ const data13 = [
+  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
+  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
+  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
+  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
+  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
 ];
 
 //拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
@@ -123,7 +126,6 @@ class Demo13 extends Component {
           data={this.state.data13}
           multiSelect={multiObj}
           sort={sortObj}
-          scroll={{x:'100%',y:100}}
           getSelectedDataFunc={this.getSelectedDataFunc}
         />
       </div>

demo/demolist/Demo31.js

@@ -0,0 +1,141 @@
+/**
+*
+* @title 含有嵌套子表格的大数据场景
+* @description 通过expandedRowRender参数来实现子表格
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+import BigData from "../../src/lib/bigData";
+const BigDataTable = BigData(Table);
+const outColumns = [
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d", 
+    width:200,
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert("这是第" + index + "列，内容为:" + text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  },
+  { title: "用户名", dataIndex: "a", key: "a", width: 250 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  
+];
+const innerColumns = [
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    width:200,
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert("这是第" + index + "列，内容为:" + text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  },
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  
+];
+
+const data16 = [ ...new Array(10000) ].map((e, i) => {
+    return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
+   })
+
+
+
+class Demo31 extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+      data_obj:{
+        0:[
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
+        ],
+        1: [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
+        ],
+      }
+    }
+  }
+  expandedRowRender = (record, index, indent) => {
+    let height = 42 * (this.state.data_obj[record.key].length+ 2);
+    
+    return (
+      <Table
+        columns={innerColumns}
+        style={{height:height}}
+        data={this.state.data_obj[record.key]} 
+
+      />
+    );
+  };
+  getData=(expanded, record)=>{
+    //当点击展开的时候才去请求数据
+    let new_obj = Object.assign({},this.state.data_obj);
+    if(expanded){
+      if(record.key==='1'){
+        new_obj[record.key] = [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
+        ]
+        this.setState({
+          data_obj:new_obj
+        })
+      }else{
+        new_obj[record.key] = [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
+        ]
+        this.setState({
+          data_obj:new_obj
+        })
+      }
+    }
+  }
+  haveExpandIcon=(record, index)=>{
+    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
+    if(index == 0){
+      return true;
+    }
+    return false;
+  }
+  render() {
+    return (
+      <BigDataTable
+        columns={outColumns}
+        data={data16}
+        onExpand={this.getData}
+        expandedRowRender={this.expandedRowRender}
+        scroll={{y:350}}
+        defaultExpandedRowKeys={[0,1]}
+        title={currentData => <div>标题: 这是一个标题</div>}
+        footer={currentData => <div>表尾: 我是小尾巴</div>}
+      />
+    );
+  }
+}
+
+export default Demo31;

demo/demolist/Demo5.js

@@ -21,14 +21,7 @@ const columns5 = [
     fixed: "left"
   },
   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-  { title: "Column 1", dataIndex: "c1", key: "1" },
-  { title: "Column 2", dataIndex: "c2", key: "2" },
-  { title: "Column 3", dataIndex: "c3", key: "3" },
-  { title: "Column 4", dataIndex: "c4", key: "4" },
-  { title: "Column 5", dataIndex: "c5", key: "5" },
-  { title: "Column 6", dataIndex: "c6", key: "6" },
-  { title: "Column 7", dataIndex: "c7", key: "7" },
-  { title: "Column 8", dataIndex: "c8", key: "8" }
+  { title: "address", dataIndex: "address", key: "address" }
 ];
 
 const data5 = [
@@ -60,7 +53,7 @@ const data5 = [
 
 class Demo5 extends Component {
   render() {
-    return <Table columns={columns5} data={data5}scroll={{ x: "130%", y: 140 }}/>;
+    return <Table columns={columns5} data={data5}scroll={{ x: "110%", y: 140 }}/>;
   }
 }