diff --git a/demo/demolist/Demo30.js b/demo/demolist/Demo30.js
new file mode 100644
index 0000000..e185860
--- /dev/null
+++ b/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 (
+
+
{
+ 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}
+ />
+ );
+ }
+}
+
+export default Demo30;
diff --git a/docs/api.md b/docs/api.md
index 1979284..1a896bd 100644
--- a/docs/api.md
+++ b/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
|参数|说明|类型|默认值|
diff --git a/src/Table.js b/src/Table.js
index b2ea142..4add44f 100644
--- a/src/Table.js
+++ b/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 (
- this.contentTable = el}>
+
this.contentTable = el} tabIndex="0" >
{this.getTitle()}
diff --git a/src/Table.scss b/src/Table.scss
index 7ba2a74..7da90a5 100644
--- a/src/Table.scss
+++ b/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 {