From 0abc535ef47ab6f5db86fc0231f21deff0def471 Mon Sep 17 00:00:00 2001 From: jonyshi Date: Tue, 25 Dec 2018 15:27:29 +0800 Subject: [PATCH] =?UTF-8?q?table=E5=BF=AB=E6=8D=B7=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo30.js | 98 +++++++++++++++++++++++++++++++++++++++++ docs/api.md | 6 +++ src/Table.js | 28 +++++++++++- src/Table.scss | 6 +++ 4 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 demo/demolist/Demo30.js 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 {