添加示例二级标题

demo/TableDemo.scss

@@ -33,3 +33,9 @@
   }
 
 }
+.opt-btns .u-button{
+  background: #505F79;
+  &:hover, &:active{
+    background: #344563;
+  }
+}

demo/demolist/Demo01.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 基本表格
-* 【Tooltip】
+* @parent 基础 Basic
 * @description 鼠标hover行时呼出操作按钮
 */
 

demo/demolist/Demo02.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 默认无数据展示
+* @parent 基础 Basic
 * @description 无数据时显示效果展示（可自定义）
 *
 */

demo/demolist/Demo03.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 固定表头
+* @parent 基础 Basic
 * @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
 */
 

demo/demolist/Demo04.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 隔行换色
+* @parent 基础 Basic
 * @description 可自定义斑马线颜色
 *
 */

demo/demolist/Demo05.js

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

demo/demolist/Demo101.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 嵌套子表格
+* @parent 扩展行 Expanded Row
 * @description 通过expandedRowRender参数来实现子表格
 *
 */

demo/demolist/Demo102.js

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

demo/demolist/Demo103.js

@@ -1,7 +1,8 @@
 /**
 *
 * @title 选中行颜色、自定义表格标题和表尾
-* @description
+* @parent 扩展行 Expanded Row
+* @description 选中行的样式可自定义
 */
 
 import React, { Component } from "react";

demo/demolist/Demo104.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 自定义行高
+* @parent 扩展行 Expanded Row
 * @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
 */
 

demo/demolist/Demo105.js

@@ -1,122 +1,120 @@
 /**
 *
-* @title 自定义行、列合并
+* @title 根据内容自动撑开行高
-* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
+* @parent 扩展行 Expanded Row
-*
+* @description 表格行含有图片时的展示
 */
 
 import React, { Component } from "react";
+import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
-const renderContent = (value, row, index) => {
+const columns = [
-  const obj = {
+    {
-    children: value,
+        title: "序号",
-    props: {},
+        dataIndex: "index",
-  };
+        key: "index",
-  if (index === 4) {
+        width: 80,
-    obj.props.colSpan = 0;
+        render(record, text, index) {
+            return index + 1;
         }
-  return obj;
-};
-
-const columns = [{
-  title: 'Name',
-  key: "name",
-  dataIndex: 'name',
-  render: (text, row, index) => {
-    if (index < 4) {
-      return <a href="#">{text}</a>;
-    }
-    return {
-      children: <a href="#">{text}</a>,
-      props: {
-        colSpan: 5,
     },
-    };
+    {
+        title: "组织部门",
+        dataIndex: "orgDept",
+        key: "orgDept",
+        width: 100,
     },
-}, {
+    {
-  title: 'Age',
+        title: "设施管理部门",
-  key: "Age",
+        dataIndex: "facilityManageUnit",
-  dataIndex: 'age',
+        key: "facilityManageUnit",
-  render: renderContent,
+        width: 100,
-}, {
-  title: 'Home phone',
-  colSpan: 2,
-  key: "tel",
-  dataIndex: 'tel',
-  render: (value, row, index) => {
-    const obj = {
-      children: value,
-      props: {},
-    };
-    if (index === 2) {
-      obj.props.rowSpan = 2;
-    }
-    if (index === 3) {
-      obj.props.rowSpan = 0;
-    }
-    if (index === 4) {
-      obj.props.colSpan = 0;
-    }
-    return obj;
     },
-}, {
+    {
-  title: 'Phone',
+        title: "案卷编号",
-  colSpan: 0,
+        dataIndex: "docketnum",
-  key: "phone",
+        key: "docketnum",
-  dataIndex: 'phone',
+        width: 100,
-  render: renderContent,
+    },
-}, {
+    {
-  title: 'Address',
+        title: "数量",
-  key: "address",
+        dataIndex: "num",
-  dataIndex: 'address',
+        key: "num",
-  render: renderContent,
+        width: 100,
-}];
+    },
+    {
+        title: "首次发现时间",
+        dataIndex: "discoveryTime",
+        key: "discoveryTime",
+        width: 100,
+    },
+    {
+        title: "实际修复时间",
+        dataIndex: "repairTime",
+        key: "repairTime",
+        width: 100,
+    },
+    {
+        title: "图样",
+        dataIndex: "picture",
+        key: "picture",
+        width: 100,
+    },
+    {
+        title: "申请单号",
+        dataIndex: "billcode",
+        key: "billcode",
+        width: 100,
+    },
+    {
+        title: "设施名称",
+        dataIndex: "facilityName",
+        key: "facilityName",
+        width: 100,
+    }
+];
 
-const data = [{
+const data = [
-  key: '1',
+  { orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""},
-  name: 'John Brown',
+  { orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""},
-  age: 32,
+  { orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""}
-  tel: '0571-22098909',
+];
-  phone: 18889898989,
+
-  address: 'New York No. 1 Lake Park',
+class Demo105 extends Component {
-}, {
+
-  key: '2',
+  constructor(props) {
-  name: 'Jim Green',
+    super(props);
-  tel: '0571-22098333',
+    this.state = {
-  phone: 18889898888,
+      data: data,
-  age: 42,
+      selectedRowIndex: 0
-  address: 'London No. 1 Lake Park',
+    }
-}, {
+  }
-  key: '3',
+  handleClick = () => {
-  name: 'Joe Black',
+    console.log('这是第' , this.currentIndex , '行');
-  age: 32,
+    console.log('内容：' , this.currentRecord);
-  tel: '0575-22098909',
+  }
-  phone: 18900010002,
+
-  address: 'Sidney No. 1 Lake Park',
+  onRowHover=(index,record)=>{
-}, {
+    this.currentIndex = index;
-  key: '4',
+    this.currentRecord = record;
-  name: 'Jim Red',
+  }
-  age: 18,
+
-  tel: '0575-22098909',
+  getHoverContent=()=>{
-  phone: 18900010002,
+    return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
-  address: 'London No. 2 Lake Park',
+  }
-}, {
-  key: '5',
-  name: 'Jake White',
-  age: 18,
-  tel: '0575-22098909',
-  phone: 18900010002,
-  address: 'Dublin No. 2 Lake Park',
-}];
 
-class Demo15 extends Component {
   render() {
     return (
-       <Table columns={columns} data={data}/>
+        <Table
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          hoverContent={this.getHoverContent}
+          onRowHover={this.onRowHover}
+        />
     );
   }
 }
 
-
+export default Demo105;
-export default Demo15;

demo/demolist/Demo106.js

@@ -0,0 +1,123 @@
+/**
+*
+* @title 自定义行、列合并
+* @parent 扩展行 Expanded Row
+* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const renderContent = (value, row, index) => {
+  const obj = {
+    children: value,
+    props: {},
+  };
+  if (index === 4) {
+    obj.props.colSpan = 0;
+  }
+  return obj;
+};
+
+const columns = [{
+  title: 'Name',
+  key: "name",
+  dataIndex: 'name',
+  render: (text, row, index) => {
+    if (index < 4) {
+      return <a href="#">{text}</a>;
+    }
+    return {
+      children: <a href="#">{text}</a>,
+      props: {
+        colSpan: 5,
+      },
+    };
+  },
+}, {
+  title: 'Age',
+  key: "Age",
+  dataIndex: 'age',
+  render: renderContent,
+}, {
+  title: 'Home phone',
+  colSpan: 2,
+  key: "tel",
+  dataIndex: 'tel',
+  render: (value, row, index) => {
+    const obj = {
+      children: value,
+      props: {},
+    };
+    if (index === 2) {
+      obj.props.rowSpan = 2;
+    }
+    if (index === 3) {
+      obj.props.rowSpan = 0;
+    }
+    if (index === 4) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  },
+}, {
+  title: 'Phone',
+  colSpan: 0,
+  key: "phone",
+  dataIndex: 'phone',
+  render: renderContent,
+}, {
+  title: 'Address',
+  key: "address",
+  dataIndex: 'address',
+  render: renderContent,
+}];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  tel: '0571-22098909',
+  phone: 18889898989,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  tel: '0571-22098333',
+  phone: 18889898888,
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'London No. 2 Lake Park',
+}, {
+  key: '5',
+  name: 'Jake White',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Dublin No. 2 Lake Park',
+}];
+
+class Demo15 extends Component {
+  render() {
+    return (
+       <Table columns={columns} data={data}/>
+    );
+  }
+}
+
+
+export default Demo15;

demo/demolist/Demo11.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 横向滚动条
+* @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */
 

demo/demolist/Demo12.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 纵向滚动条
+* @parent 滚动 Scroll View
 * @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
 */
 

demo/demolist/Demo121.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 多选表格
+* @parent 行操作-选择
 * @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
 *
 */

demo/demolist/Demo131.js

@@ -1,6 +1,7 @@
 /**
 *
-* @title 无限滚动 Infinite Scroll
+* @title 万行以上数据渲染
+* @parent 无限滚动 Infinite-scroll
 * @description 万行数据渲染
 */
 

demo/demolist/Demo132.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 嵌套子表格滚动加载
+* @parent 无限滚动 Infinite-scroll
 * @description 通过expandedRowRender参数来实现子表格
 *
 */

demo/demolist/Demo133.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 多功能表格滚动加载
+* @parent 无限滚动 Infinite-scroll
 * @description
 */
 

demo/demolist/Demo134.js

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

demo/demolist/Demo161.js

@@ -1,6 +1,6 @@
 /**
- *
  * @title 表格+分页
+ * @parent 分页 Pagination
  * @description 点击分页联动表格
  */
 

demo/demolist/Demo162.js

@@ -1,6 +1,7 @@
 /**
  *
  * @title 表格+搜索
+ * @parent 搜索 search
  * @description 搜索刷新表格数据
  *
  */

demo/demolist/Demo21.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 渲染本地数据
+* @parent 数据操作 Data Opetation
 * @description 
 */
 

demo/demolist/Demo32.js

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

demo/demolist/Demo35.js

@@ -1,6 +1,7 @@
 /**
  *
  * @title 合并列后合计
+ * @parent 列渲染 Custom Render
  * @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
  *
  */

demo/demolist/Demo41.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 编辑态表格
+* @parent 编辑 Editor
 * @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
 *
 */

demo/demolist/Demo51.js

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

demo/demolist/Demo52.js

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

demo/demolist/Demo53.js

@@ -1,8 +1,8 @@
 /**
 *
 * @title 动态设置列锁定、解除锁定
-* @description 动态设置固、取消固定列
+* @parent 列操作-锁定 Fixed
-* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
+* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
 *
 */
 import React, { Component } from 'react';
@@ -11,25 +11,6 @@ import {Icon,Menu,Dropdown} from "tinper-bee";
 import Table from '../../src';
 
 const { Item } = Menu;
-// const columns24 = [
-//   {
-//     title: "Full Name",
-//     width: 100,
-//     dataIndex: "name",
-//     key: "name",
-//     fixed: "left",
-//   },
-//   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-//   { title: "Column 1", dataIndex: "address", key: "1"  },
-//   { title: "Column 2", dataIndex: "address2", key: "2" },
-//   { title: "Column 3", dataIndex: "address", key: "3" },
-//   { title: "Column 4", dataIndex: "address", key: "4" },
-//   { title: "Column 24", dataIndex: "address", key: "24" },
-//   { title: "Column 6", dataIndex: "address", key: "6" },
-//   { title: "Column 7", dataIndex: "address", key: "7" },
-//   { title: "Column 8", dataIndex: "address", key: "8" }
-// ];
-
 
 const columns24 = [
   {
@@ -106,7 +87,6 @@ class Demo24 extends Component {
     }
   }
   
-  
   onSelect = ({key,item})=>{ 
     console.log(`${key} selected`); //获取key
     let currentObject = item.props.data; //获取选中对象的数据
@@ -167,9 +147,11 @@ class Demo24 extends Component {
   render() {
     let {columns} = this.state;
     columns = this.renderColumnsDropdown(columns);
-    return <div className="demo24">
+    return(
+      <div className="demo24">
         <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
-          </div>;
+      </div>
+    )
   }
 }
 

demo/demolist/Demo62.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 按条件、值过滤
+* @parent 列操作-过滤 Filter
 * @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
 *
 */

demo/demolist/Demo63.js

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

demo/demolist/Demo71.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 列过滤面板
+* @parent 列操作-隐藏 Hide
 * @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
 *
 */

demo/demolist/Demo81.js

@@ -1,5 +1,6 @@
 /**
 * @title 列排序
+* @parent 列操作-排序 Sort
 * @description  column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
 *
 */

demo/demolist/Demo82.js

@@ -1,6 +1,7 @@
 /**
 * @title 后端列排序
-*
+* @parent 列操作-排序 Sort
+* @description 将控制台打印的参数传递给后端即可进行列排序
 */
 
 

demo/demolist/Demo83.js

@@ -1,6 +1,7 @@
 /**
  *
  * @title 多列排序
+ * @parent 列操作-排序 Sort
  * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
  *
  */

demo/demolist/Demo91.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 拖拽改变列顺序
+* @parent 列操作-拖拽 Drag
 * @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
 */
 import React, { Component } from 'react';

demo/demolist/Demo92.js

@@ -1,6 +1,7 @@
 /**
 *
 * @title 拖拽改变列宽度
+* @parent 列操作-拖拽 Drag
 * @description 注：不支持tree结构的表头、合并表头的table
 */
 import React, { Component } from 'react';

dist/demo.css

@@ -591,6 +591,11 @@
   .demo25 .u-table-filter-column-filter-icon {
     right: 15px; }
 
+.opt-btns .u-button {
+  background: #505F79; }
+  .opt-btns .u-button:hover, .opt-btns .u-button:active {
+    background: #344563; }
+
 .demo02 .u-table-placeholder i {
   font-size: 60px; }