bee-tree-table
react bee-tree-table component for tinper-bee
左树右表结构,支持点击左侧的树节点,进行相应的table数据的请求展示,支持分页和表格的搜索等功能
使用方法
class Demo1 extends Component {
constructor(props) {
super(props);
const keys = this.props.keys;
this.state = {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
data: "0_0",
dataSource: [],
selectedKeys:[]
};
}
/**
* 被选中的时候,触发的事件
*/
onSelect = (info) => {
console.log('selected', info +"first");
let data;
if (info) {
data = info[0];
this.setState({
data: data
})
}
}
/**
* 这里与后台请求用来返回数据
*/
getData = (value) =>{
this.setState({
dataSource: value
})
}
render() {
let {data,dataSource} = this.state;
return (
<div>
<div>
<Row>
<Col md={12} sm={12}>
<TreeTable data={data} dataSource={dataSource} >
<Tree className="myCls" showLine
onSelect={this.onSelect}
selectedKeys={this.state.selectedKeys}
>
<TreeNode title="node 0_0" key="0_0">
<TreeNode title="node 0_0_0" key="0_0_0" >
<TreeNode title="node 0_0_0_0" key="0_0_0_0" />
<TreeNode title="node 0_0_0_1" key="0_0_0_1" />
</TreeNode>
<TreeNode title="node 0_0_1" key="0_0_1">
<TreeNode title="node 0_0_1_0" key="0_0_1_0" />
</TreeNode>
</TreeNode>
</Tree>
</TreeTable>
</Col>
</Row>
</div>
</div>
)
}
}
API
bee-tree-table
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 传入的key,需要与后台返回数据对象的key或者唯一的一个标示符进行匹配 | any | - |
dataSource | table要显示的表结构 | array | [] |
placeholder | 输入框的默认提示 | string | - |
onChange | input 的 value 变化时,调用此函数 | handleChange(value) | - |
onKeyDown | 监听input的键盘事件,调用此函数 | handleKeyDown() | - |
onSelect | 当用户选择树节点触发的回调函数 | onSelect() | - |
onSearch | 当用户点击搜索图标时触发的回调函数 | handleSearchData(value) | - |
开发调试
$ npm install -g bee-tools$ git clone https://github.com/tinper-bee/bee-tree-table$ cd bee-tree-table$ npm install$ npm run dev