Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
commit
b5a54dc5f9
|
@ -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;
|
|
@ -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
|
||||
|
||||
|参数|说明|类型|默认值|
|
||||
|
|
28
src/Table.js
28
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`}>
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue