table快捷键

demo/demolist/Demo30.js

@@ -0,0 +1,98 @@
+/**
+*
+* @title 快捷键在table中的简单使用应用。
+* @description tab 键可以默认选中第一行、up 选中上一条、down 选中下一条 更多api 见文档说明。
+*/
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+
+const columns = [
+  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+];
+
+const data = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+class Demo30 extends Component {
+
+  constructor(props){
+      super(props);
+      this.state = {
+        data: data,
+        selectedRowIndex: 2
+      }
+  }
+
+  onKeyTab=()=>{
+    let {selectedRowIndex} = this.state;
+    // let count = selectedRowIndex;//(selectedRowIndex+1);
+    // count == (data.length-1)?count = -1:count;
+    // this.setState({
+    //   selectedRowIndex: (count+1)
+    // })
+    console.log(" ---onKeyTab---- ",selectedRowIndex);
+     this.setState({
+      selectedRowIndex: 0
+    })
+  }
+
+  onKeyUp=()=>{
+    let {selectedRowIndex} = this.state;
+    let count = selectedRowIndex;
+    let len = (data.length-1);
+    count = count == 0?count = len:(count-1);
+    this.setState({
+      selectedRowIndex: count
+    })
+  }
+
+  onKeyDown=()=>{
+    let {selectedRowIndex} = this.state;
+    let count = selectedRowIndex;
+    count == (data.length-1)?count = -1:(count+1);
+    this.setState({
+      selectedRowIndex: (count+1)
+    })
+  }
+ 
+  onTabkeKeyDown = ()=>{
+    let {selectedRowIndex} = this.state;
+    console.log(" ----onTabkeKeyDown--- ",selectedRowIndex);
+  }
+ 
+  render() {
+    return (
+      <div><input />
+      <Table
+        columns={columns}
+        data={data}
+        rowClassName={(record,index,indent)=>{
+          if (this.state.selectedRowIndex == index) {
+              return 'selected';
+          } else {
+              return '';
+          }
+        }}
+        onRowClick={(record,index,indent)=>{
+          this.setState({ 
+              selectedRowIndex: index
+          });
+        }}
+        onKeyTab={this.onKeyTab}
+        onKeyUp={this.onKeyUp}
+        onKeyDown={this.onKeyDown}
+        onTabkeKeyDown={this.onTabkeKeyDown}
+      /> </div>
+    );
+  }
+}
+
+export default Demo30;

docs/api.md

@@ -55,11 +55,17 @@ import 'bee-table/build/Table.css';
 | headerScroll       | 表头下是否显示滚动条 | bool| false
 | sort       | 排序的属性 | object| {  mode:'single'//单列排序,  backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
 | syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
+| onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
+| onKeyUp       | up快捷键，可以处理table的上一条数据 | function| -
+| onKeyDown       | up快捷键，可以处理table的下一条数据 | function| -
+| onTabkeKeyDown       | 触发table的快捷键 | function| -
 
+> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
 
 
+
 ### Column
 
 |参数|说明|类型|默认值|

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 { Event,EventUtil} from "./utils";
 
 const propTypes = {
   data: PropTypes.array,
@@ -135,6 +136,14 @@ class Table extends Component {
     this.computeTableWidth = this.computeTableWidth.bind(this);
   }
 
+  componentWillMount() {
+    EventUtil.addHandler(document,'keydown',this.onKeyDown);
+  }
+
+  componentWillUnmount() {
+    EventUtil.removeHandler(document,'keydown',this.onKeyDown);
+  }   
+
   componentDidMount() {
     setTimeout(this.resetScrollY, 300);
     //含有纵向滚动条
@@ -977,7 +986,24 @@ class Table extends Component {
         currentHoverKey: isHover ? key : null,
       });
     }
+  }
 
+  onKeyDown=(e)=>{
+    let event = Event.getEvent(e);
+    // event.preventDefault?event.preventDefault():event.returnValue = false;
+    if (event.keyCode === 9){//tab
+      this.props.onKeyTab&&this.props.onKeyTab();
+    }else if(event.keyCode === 38){//up
+      this.props.onKeyUp&&this.props.onKeyUp();
+    }else if(event.keyCode === 40){//down
+      this.props.onKeyDown&&this.props.onKeyDown();
+    }
+    this.props.onTabkeKeyDown&&this.props.onTabkeKeyDown();
+    // else if(event.altKey && event.keyCode === 38){
+    //   this.props.onKeyMove&&this.props.onKeyMove('up');
+    // }else if(event.altKey && event.keyCode === 40){
+    //   this.props.onKeyMove&&this.props.onKeyMove('down');
+    // }
   }
 
   render() {
@@ -1008,7 +1034,7 @@ class Table extends Component {
     const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
     const rightFixedWidth = this.columnManager.getRightColumnsWidth();
     return (
-      <div className={className} style={props.style} ref={el => this.contentTable = el}>
+      <div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex="0" >
         {this.getTitle()}
         <div className={`${clsPrefix}-content`}>
          

src/Table.scss

@@ -471,6 +471,12 @@ $checkbox-height:16px;
     pointer-events: none;
   }
 }
+.u-table:focus{
+  outline: none;
+  // border-color: #9ecaed;
+  // box-shadow: 0 0 10px #9ecaed;
+  box-shadow: 0 0 0;
+}
 
 .u-table.bordered {
   table {