Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
wanghaoo 2018-12-26 14:36:17 +08:00
commit b5a54dc5f9
4 changed files with 137 additions and 1 deletions

98
demo/demolist/Demo30.js Normal file
View File

@ -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;

View File

@ -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
|参数|说明|类型|默认值|

View File

@ -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`}>

View File

@ -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 {