This commit is contained in:
jonyshi 2018-08-16 21:04:12 +08:00
parent 7f61d2dbdc
commit 70a0e0a460
7 changed files with 3771 additions and 4011 deletions

View File

@ -1,47 +1,33 @@
/**
*
* @title 简单表格两种tip选中行背景色文字过长
* 一种是bee-popover实现一种是标签本身的tooltip
* @title 简单表格文字过长两种tip
* Tooltip
* @description
*/
import React, { Component } from "react";
import Popover from 'bee-popover';
import Button from "bee-button";
import Tooltip from "bee-tooltip";
import Table from "../../src";
function getTitleTip(text){
return(<div>
<h3>{text}</h3>
</div>)
}
const columns = [
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
render: (text, record, index)=> {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "100px",
textOverflow:"ellipsis",
overflow:"hidden",
whiteSpace:"nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
render(text, record, index) {
return(<div style={{position: 'relative'}}>
<Popover
placement="leftTop"
content={getTitleTip(text)}
trigger="hover"
id="leftTop"
>
<span
style={{
position: 'absolute',
top: 5,
left: 0,
width: "80px",
textOverflow:"ellipsis",
overflow:"hidden",
whiteSpace:"nowrap"
}}>{text}</span>
</Popover>
</div>);
}},
{
title: "操作",
dataIndex: "d",
@ -90,20 +76,11 @@ class Demo1 extends Component {
<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
});
}}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}

58
demo/demolist/Demo20.js Normal file
View File

@ -0,0 +1,58 @@
/**
*
* @title 简单表格选中行的背景色表头表尾
* @description
*/
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 Demo26 extends Component {
constructor(props){
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
render() {
return (
<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
});
}}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo26;

View File

@ -2,8 +2,6 @@
*
* @title 表格+分页
* @description 点击分页联动表格
*
*import {Table} from 'tinper-bee';
*/
import React, { Component } from "react";
@ -59,11 +57,14 @@ class Demo8 extends Component {
last
prev
next
boundaryLinks
items={2}
maxButtons={5}
boundaryLinks
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)}
onDataNumSelect={this.dataNumSelect}
showJump={true}
total={100}
dataNum={2}
/>
</div>
);

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

7650
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long