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

feat：表头行高40px，排序过滤列样式调整，滚动加载树表示例调整

This commit is contained in:
izbz wh 2019-04-17 15:26:27 +08:00
parent 7aa9ad6d68
commit a67e557d7e
14 changed files with 8358 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/TableDemo.scss
View File

@ -1,20 +1,20 @@
// @import "../node_modules/tinper-bee-core/scss/index.scss"; @import "../node_modules/tinper-bee-core/scss/index.scss";
// @import "../node_modules/bee-panel/src/Panel.scss"; @import "../node_modules/bee-panel/src/Panel.scss";
// @import "../node_modules/bee-layout/src/Layout.scss"; @import "../node_modules/bee-layout/src/Layout.scss";
// @import "../node_modules/bee-button/src/Button.scss"; @import "../node_modules/bee-button/src/Button.scss";
// @import "../node_modules/bee-transition/src/Transition.scss"; @import "../node_modules/bee-transition/src/Transition.scss";
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss"; @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
// @import "../node_modules/bee-form-control/src/FormControl.scss"; @import "../node_modules/bee-form-control/src/FormControl.scss";
// @import "../node_modules/bee-pagination/src/Pagination.scss"; @import "../node_modules/bee-pagination/src/Pagination.scss";
// @import "../node_modules/bee-checkbox/src/Checkbox.scss"; @import "../node_modules/bee-checkbox/src/Checkbox.scss";
// @import "../node_modules/bee-select/src/Select.scss"; @import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/bee-form/src/Form.scss"; // @import "../node_modules/bee-form/src/Form.scss";
// @import "../node_modules/bee-popover/src/Popover.scss"; @import "../node_modules/bee-popover/src/Popover.scss";
// @import "../node_modules/bee-tooltip/src/Tooltip.scss"; @import "../node_modules/bee-tooltip/src/Tooltip.scss";
// @import "../node_modules/bee-message/build/Message.css"; @import "../node_modules/bee-message/build/Message.css";
// @import "../node_modules/bee-dropdown/build/Dropdown.css"; @import "../node_modules/bee-dropdown/build/Dropdown.css";
// @import "../node_modules/bee-input-number/build/InputNumber.css"; @import "../node_modules/bee-input-number/build/InputNumber.css";
// @import "../node_modules/bee-modal/build/Modal.css"; @import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss"; @import "../src/Table.scss";

2
demo/demolist/Demo131.js
View File

@ -13,7 +13,7 @@ const columns = [
{ {
title:'序号', title:'序号',
dataIndex:'index', dataIndex:'index',
width:'50', width:'60',
key:'index', key:'index',
render:(text,record,index)=>{ render:(text,record,index)=>{
return index return index

2
demo/demolist/Demo133.js
View File

@ -17,7 +17,7 @@ const columns = [
{ {
title:'序号', title:'序号',
dataIndex:'index', dataIndex:'index',
width:'50', width:'80',
key:'index', key:'index',
render:(text,record,index)=>{ render:(text,record,index)=>{
return index return index

8
demo/demolist/Demo134.js
View File

@ -1,10 +1,3 @@
/**
*
* @title 树状表滚动加载
* 【Tooltip】
* @description
*/
import React, { Component } from "react"; import React, { Component } from "react";
import {Tooltip} from "tinper-bee"; import {Tooltip} from "tinper-bee";
@ -83,6 +76,7 @@ class Demo34 extends Component {
parentNodeId='parent' parentNodeId='parent'
scroll={{y:300}} scroll={{y:300}}
height={40} height={40}
onExpand={this.onExpand}
onRowClick={(record, index, indent) => { onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index); console.log('currentIndex--'+index);
}} }}

2
demo/demolist/Demo35.js
View File

@ -17,7 +17,7 @@ const columns = [
title: "Name", title: "Name",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
width: 100, width: 120,
fixed: "left" fixed: "left"
}, },
{ {

2
demo/demolist/Demo53.js
View File

@ -74,7 +74,7 @@ const columns24 = [
title: "武功类型", title: "武功类型",
dataIndex: "g", dataIndex: "g",
key: "g", key: "g",
width: 100 width: 150
}, },
{ {
title: "师傅", title: "师傅",

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

8313
dist/demo.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

19
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

2
index.html
View File

@ -5,7 +5,7 @@
<title>neoui-react-button</title> <title>neoui-react-button</title>
<link rel="stylesheet" href="./demo/atom-one-dark.css"> <link rel="stylesheet" href="./demo/atom-one-dark.css">
<link rel="stylesheet" href="./dist/demo.css"> <link rel="stylesheet" href="./dist/demo.css">
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> <!-- <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> -->
</head> </head>

43
src/Table.scss
View File

@ -4,22 +4,23 @@
$text-color: $font-color-base; $text-color: $font-color-base;
$font-size-base: 12px; $font-size-base: 12px;
$line-height: 1.5; $line-height: 1.33;
// 主题定制border： // 主题定制border：
$table-border-color: unquote("rgb(#{$table-border-color-base})"); $table-border-color: unquote("rgb(#{$table-border-color-base})");
// $table-head-background-color: #f7f7f7; // $table-head-background-color: #f7f7f7;
// $table-head-text-color: #666; // $table-head-text-color: #666;
$vertical-padding: 12px; $vertical-padding: 12px;
$horizontal-padding: 8px; $horizontal-padding: 16px;
// $table-border-color: #e9e9e9; // $table-border-color: #e9e9e9;
$table-hover-color: #E7F2FC; $table-hover-color: #E7F2FC;
$table-move-in-color: $bg-color-base; $table-move-in-color: $bg-color-base;
$checkbox-height:16px; $checkbox-height:14px;
$table-th-bottom-border:#C1C7D0; $table-th-bottom-border:#C1C7D0;
$filter-form-control-height:28px; $filter-form-control-height:26px;
$table-head-font-weight: bold; $table-head-font-weight: bold;
$icon-color:#505F79;
.u-table { .u-table {
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color; color: $text-color;
@ -115,6 +116,9 @@ $table-head-font-weight: bold;
.filterContext{ .filterContext{
height: 35px; height: 35px;
} }
.u-select-selection--single{
height: 26px;
}
} }
} }
} }
@ -166,7 +170,7 @@ $table-head-font-weight: bold;
} }
&.fixed-height td { &.fixed-height td {
padding: 0px 8px; padding: 0px $horizontal-padding;
} }
&-fixed-header &-body { &-fixed-header &-body {
@ -389,14 +393,20 @@ $table-head-font-weight: bold;
.bee-table-column-sorter { .bee-table-column-sorter {
position: relative; position: relative;
margin-left: 4px; margin-left: 4px;
height: 1em; height: 16px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin-top: -3px;
i{
padding: 0px;
font-weight: 600;
color: $icon-color;
}
& > .bee-table-column-sorter-down, & > .bee-table-column-sorter-down,
& > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat { & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
line-height: 6px; line-height: 16px;
display: block; display: block;
width: 34px; width: 34px;
cursor: pointer; cursor: pointer;
@ -444,6 +454,7 @@ $table-head-font-weight: bold;
} }
.th-drag:hover{ .th-drag:hover{
background: $hover-bg-color-base; background: $hover-bg-color-base;
} }
//为了区分是拖拽宽度还是交换列，先注释上面了 //为了区分是拖拽宽度还是交换列，先注释上面了
// .th-drag:hover{ // .th-drag:hover{
@ -512,17 +523,18 @@ $table-head-font-weight: bold;
} }
&-filter-icon{ &-filter-icon{
position: absolute; position: absolute;
top: 8px; width: 30px;
right: 18px; height: 38px ;
width: 22px; line-height: 38px;
height: 25px; right: 12px ;
line-height: 25px; top:1px ;
z-index: 2; z-index: 2;
background: $table-head-background-color; background: $table-head-background-color;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
i.uf{ i.uf{
padding: 0px; padding: 0px;
color: $icon-color;
} }
} }
&-pop-cont-item{ &-pop-cont-item{
@ -561,6 +573,13 @@ $table-head-font-weight: bold;
height: $checkbox-height; height: $checkbox-height;
line-height: $checkbox-height; line-height: $checkbox-height;
margin:0px; margin:0px;
.u-checkbox-label{
line-height: $checkbox-height;
&:before,&:after {
width: $checkbox-height;
height: $checkbox-height;
}
}
} }
} }
.u-table:focus{ .u-table:focus{

2
src/lib/bigData.js
View File

@ -390,7 +390,7 @@ export default function bigData(Table) {
if(!_this.props.expandedRowKeys){ if(!_this.props.expandedRowKeys){
if(expandState){ if(expandState){
expandedRowKeys.push(rowKey); expandedRowKeys.push(rowKey);
this.setState({ needRender: !needRender });
}else{ }else{
let index = -1; let index = -1;
expandedRowKeys.forEach((r, i) => { expandedRowKeys.forEach((r, i) => {