JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

[Feature]增加size属性

This commit is contained in:
yangchch6 2019-04-19 15:46:04 +08:00
parent 6d25e1a2d1
commit 0e7231aa66
24 changed files with 3036 additions and 11760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -117,6 +117,7 @@ class Demo extends Component {
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
| height | 自定义表格行高 | number | - |
| headerHeight | 自定义表头行高 | number | - |
| size | 表格大小 | `sm | md | lg` | 'md' |
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)

2
demo/demolist/Demo01.js
View File

@ -68,8 +68,6 @@ class Demo01 extends Component {
columns={columns}
data={data}
parentNodeId='parent'
height={40}
headerHeight={40}
bordered = {true}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}

1
demo/demolist/Demo02.scss
View File

@ -1,5 +1,6 @@
.demo02 {
.u-table-placeholder i{
font-size: 60px;
line-height: 60px;
}
}

4
demo/demolist/Demo04.js
View File

@ -76,9 +76,7 @@ class Demo04 extends Component {
return <Table
className="demo04"
columns={columns04}
data={data04}
height={40}
headerHeight={40}/>
data={data04} />
}
}

2
demo/demolist/Demo101.js
View File

@ -119,8 +119,6 @@ class Demo16 extends Component {
scroll={{x:true}}
dragborder={true}
draggable={true}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}

2
demo/demolist/Demo102.js
View File

@ -1,6 +1,6 @@
/**
*
* @title 层级树型展示
* @title 树型表格数据展示
* @parent 扩展行 Expanded Row
* @description 通过在data中配置children数据，来自动生成树形表格
*

119
demo/demolist/Demo104.js
View File

@ -1,85 +1,74 @@
/**
*
* @title 自定义行高
* @title 紧凑型、宽松型
* @parent 扩展行 Expanded Row
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import {Button,Tooltip,Tag} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "60px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
{ title: "单据状态", dataIndex: "status", key: "status", width: 100 },
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
{
orderNum: "NU0391025",
org: "用友网络科技股份有限公司",
supplier: "xx供应商",
orderDate: '2018年03月18日',
quantity: '100.00',
status: '错误',
submitter: '小张',
unit: 'pc',
sum:'8,487.00',
key: "1"
},
{
orderNum: "NU0391026",
org: "用友网络科技股份有限公司",
supplier: "xx供应商",
orderDate: '2018年02月05日',
quantity: '91.00',
status: '正常',
submitter: '小红',
unit: 'pc',
sum:'675.00',
key: "2"
},
{
orderNum: "NU0391027",
org: "用友网络科技股份有限公司",
supplier: "xx供应商",
orderDate: '2018年07月01日',
quantity: '98.00',
status: '异常',
submitter: '小李',
unit: 'pc',
sum:'1,531.00',
key: "3"
}
];
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
height={40}
headerHeight={40}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index
});
}}
/>
<div>
<h5>紧凑型表格</h5>
<Table columns={columns} data={data} size="sm" />
<h5>宽松型表格</h5>
<Table columns={columns} data={data} size="lg" />
</div>
);
}
}

91
demo/demolist/Demo105.js
View File

@ -1,8 +1,8 @@
/**
*
* @title 图片在表格中的展示
* @title 自定义行高
* @parent 扩展行 Expanded Row
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
*/
import React, { Component } from "react";
@ -11,67 +11,34 @@ import Table from "../../src";
const columns = [
{
title: "序号",
dataIndex: "index",
key: "index",
width: 80,
render(text, record, index) {
return index + 1;
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "60px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{
title: "组织部门",
dataIndex: "orgDept",
key: "orgDept",
width: 100,
},
{
title: "设施管理部门",
dataIndex: "facilityManageUnit",
key: "facilityManageUnit",
width: 100,
},
{
title: "案卷编号",
dataIndex: "docketnum",
key: "docketnum",
width: 100,
},
{
title: "数量",
dataIndex: "num",
key: "num",
width: 100,
},
{
title: "首次发现时间",
dataIndex: "discoveryTime",
key: "discoveryTime",
width: 150,
},
{
title: "实际修复时间",
dataIndex: "repairTime",
key: "repairTime",
width: 150,
},
{
title: "图样",
dataIndex: "picture",
key: "picture",
render(text, record, index) {
return <img style={{height:'50px'}} src={text} alt="Picture"/>
}
}
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
class Demo105 extends Component {
class Demo1 extends Component {
constructor(props) {
super(props);
@ -96,15 +63,25 @@ class Demo105 extends Component {
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
height={40}
headerHeight={40}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index
});
}}
/>
);
}
}
export default Demo105;
export default Demo1;

193
demo/demolist/Demo106.js
View File

@ -1,123 +1,110 @@
/**
*
* @title 自定义行、列合并
* @title 图片在表格中的展示
* @parent 扩展行 Expanded Row
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
*
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 4) {
obj.props.colSpan = 0;
const columns = [
{
title: "序号",
dataIndex: "index",
key: "index",
width: 80,
render(text, record, index) {
return index + 1;
}
return obj;
};
const columns = [{
title: 'Name',
key: "name",
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a href="#">{text}</a>;
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5,
},
};
{
title: "组织部门",
dataIndex: "orgDept",
key: "orgDept",
width: 100,
},
}, {
title: 'Age',
key: "Age",
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
key: "tel",
dataIndex: 'tel',
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 2) {
obj.props.rowSpan = 2;
}
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
{
title: "设施管理部门",
dataIndex: "facilityManageUnit",
key: "facilityManageUnit",
width: 150,
},
}, {
title: 'Phone',
colSpan: 0,
key: "phone",
dataIndex: 'phone',
render: renderContent,
}, {
title: 'Address',
key: "address",
dataIndex: 'address',
render: renderContent,
}];
{
title: "案卷编号",
dataIndex: "docketnum",
key: "docketnum",
width: 100,
},
{
title: "数量",
dataIndex: "num",
key: "num",
width: 100,
},
{
title: "首次发现时间",
dataIndex: "discoveryTime",
key: "discoveryTime",
width: 150,
},
{
title: "实际修复时间",
dataIndex: "repairTime",
key: "repairTime",
width: 150,
},
{
title: "图样",
dataIndex: "picture",
key: "picture",
render(text, record, index) {
return <img style={{height:'50px'}} src={text} alt="Picture"/>
}
}
];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
}, {
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
}];
const data = [
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
];
class Demo105 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
class Demo15 extends Component {
render() {
return (
<Table columns={columns} data={data}/>
<Table
columns={columns}
data={data}
parentNodeId='parent'
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
/>
);
}
}
export default Demo15;
export default Demo105;

123
demo/demolist/Demo107.js Normal file
View File

@ -0,0 +1,123 @@
/**
*
* @title 自定义行、列合并
* @parent 扩展行 Expanded Row
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
*
*/
import React, { Component } from "react";
import Table from "../../src";
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
};
const columns = [{
title: 'Name',
key: "name",
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a href="#">{text}</a>;
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5,
},
};
},
}, {
title: 'Age',
key: "Age",
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
key: "tel",
dataIndex: 'tel',
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 2) {
obj.props.rowSpan = 2;
}
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
},
}, {
title: 'Phone',
colSpan: 0,
key: "phone",
dataIndex: 'phone',
render: renderContent,
}, {
title: 'Address',
key: "address",
dataIndex: 'address',
render: renderContent,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
}, {
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
}];
class Demo15 extends Component {
render() {
return (
<Table columns={columns} data={data}/>
);
}
}
export default Demo15;

1
demo/demolist/Demo131.js
View File

@ -67,7 +67,6 @@ class Demo30 extends Component {
columns={columns}
data={data}
scroll={{y:300}}
height={40}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}

2
demo/demolist/Demo132.js
View File

@ -132,8 +132,6 @@ class Demo31 extends Component {
expandedRowRender={this.expandedRowRender}
scroll={{y:350}}
// defaultExpandedRowKeys={[0,1]}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}

1
demo/demolist/Demo133.js
View File

@ -74,7 +74,6 @@ class Demo32 extends Component {
data={data}
parentNodeId='parent'
scroll={{y:300}}
height={40}
bordered
onRowClick={(record, index, indent) => {
this.setState({

1
demo/demolist/Demo134.js
View File

@ -80,7 +80,6 @@ class Demo34 extends Component {
data={data}
parentNodeId='parent'
scroll={{y:300}}
height={40}
onExpand={this.onExpand}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);

9
demo/demolist/Demo21.js
View File

@ -13,7 +13,6 @@ const columns = [
{
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
textAlign:'center',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
@ -29,9 +28,9 @@ const columns = [
);
}
},
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
];
const data = [
@ -53,8 +52,6 @@ class Demo21 extends Component {
<Table
columns={columns}
data={data}
height={40}
headerHeight={40}
title={currentData => <div>员工信息统计表</div>}
footer={currentData => <div>合计: 共{data.length}条数据</div>}
/>

2
demo/demolist/Demo82.js
View File

@ -1,7 +1,7 @@
/**
* @title 后端列排序
* @parent 列操作-排序 Sort
* @description 将控制台打印的参数传递给后端即可进行列排序
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
*/

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

14
dist/demo.css vendored
View File

@ -1,5 +1,6 @@
/* FormGroup */
/* Navlayout */
@import url(../node_modules/tinper-bee/assets/tinper-bee.css);
.u-table {
font-size: 12px;
color: #212121;
@ -20,13 +21,15 @@
text-align: left; }
.u-table th {
font-weight: bold;
text-align: left; }
text-align: left;
line-height: 16px; }
.u-table th[colspan] {
text-align: center; }
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
border-bottom: 1px solid rgb(193, 199, 208); }
border-bottom: 1px solid rgb(193, 199, 208);
line-height: 1.33; }
.u-table td a {
color: #2196F3; }
.u-table td a:hover {
@ -55,6 +58,10 @@
.u-table th.text-right,
.u-table td.text-right {
text-align: right; }
.u-table-sm td {
padding: 8px 16px; }
.u-table-lg td {
padding: 16px 16px; }
.u-table tr.filterable th {
padding-top: 5px !important;
padding-bottom: 5px !important; }
@ -605,7 +612,8 @@
background: #344563; }
.demo02 .u-table-placeholder i {
font-size: 60px; }
font-size: 60px;
line-height: 60px; }
.demo04.u-table tr:nth-child(2n) {
background: #f7f9fb; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

14191
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -68,6 +68,7 @@ import 'bee-table/build/Table.css';
| heightConsistent | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false
| height | 自定义表格行高 | number | - |
| headerHeight | 自定义表头行高 | number | - |
| size | 表格大小 | `sm | md | lg` | 'md' |
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)

9
src/Table.js
View File

@ -51,7 +51,8 @@ const propTypes = {
onFilterClear: PropTypes.func,
syncHover: PropTypes.bool,
tabIndex:PropTypes.string,
hoverContent:PropTypes.func
hoverContent:PropTypes.func,
size: PropTypes.oneOf(['sm', 'md', 'lg']),
};
const defaultProps = {
@ -85,7 +86,8 @@ const defaultProps = {
setRowHeight:()=>{},
setRowParentIndex:()=>{},
tabIndex:'0',
heightConsistent:false
heightConsistent:false,
size: 'md'
};
class Table extends Component {
@ -1198,6 +1200,9 @@ class Table extends Component {
show: loading,
};
}
if (props.size) {
className += ` ${clsPrefix}-${props.size}`;
}
return (
<div className={className} style={props.style} ref={el => this.contentTable = el}

13
src/Table.scss
View File

@ -1,5 +1,6 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
@import "../node_modules/tinper-bee/assets/tinper-bee.css";
// @import "../node_modules/bee-loading/src/Loading";
$text-color: $font-color-base;
@ -52,6 +53,7 @@ $icon-color:#505F79;
font-weight: $table-head-font-weight;
text-align: left;
// transition: background 0.3s ease;
line-height: 16px;
&[colspan] {
text-align: center;
}
@ -62,6 +64,7 @@ $icon-color:#505F79;
td {
border-bottom: 1px solid $table-border-color;
line-height: $line-height;
a{
color: #2196F3;
&:hover{
@ -113,6 +116,16 @@ $icon-color:#505F79;
text-align: right;
}
}
&-sm {
td {
padding: 8px $horizontal-padding;
}
}
&-lg {
td {
padding: 16px $horizontal-padding;
}
}
tr {
&.filterable{