forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

自动出现滚动条、左侧固定列border-shadow样式

This commit is contained in:
wanghaoo 2018-09-25 14:31:20 +08:00
parent c31f73979c
commit af280232e1
13 changed files with 360 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -76,7 +76,6 @@ class Demo extends Component {
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
| expandedRowKeys | 展开的行，控制属性 | array | - |
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
| useFixedHeader | 是否使用固定表头 | bool | false |
| bodyStyle | 添加到tablebody上的style | object | {} |
| style | 添加到table上的style | object | {} |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |

6
demo/demolist/Demo13.js
View File

@ -27,7 +27,6 @@ const columns13 = [
key: "b",
width: 200,
sumCol: true,
order:"ascend",
sorter: (a, b) => a.c - b.c,
sorterClick:(data,type)=>{//排序的回调函数
//type value is up or down
@ -39,7 +38,6 @@ const columns13 = [
dataIndex: "c",
key: "c",
width: 200,
order:"descend",
sumCol: true,
sorter: (a, b) => a.c - b.c,
sorterClick:(data,type)=>{//排序的回调函数
@ -106,6 +104,9 @@ class Demo13 extends Component {
let multiObj = {
type: "checkbox"
};
let sortObj ={
mode:'multiple'
}
return (
<div>
<Button className="editable-add-btn" onClick={this.onClick}>
@ -117,6 +118,7 @@ class Demo13 extends Component {
columns={columns13}
data={this.state.data13}
multiSelect={multiObj}
sort = {sortObj}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
</div>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

80
dist/demo.css vendored
View File

@ -8541,8 +8541,6 @@ ul {
.u-table-fixed-right-expanded-row {
color: transparent;
pointer-events: none; }
.u-table-scroll-position-left .u-table-fixed-left {
box-shadow: none; }
.u-table-scroll-position-right .u-table-fixed-right {
box-shadow: none; }
.u-table-thead th {
@ -8550,6 +8548,44 @@ ul {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
width: 14px;
height: 1em;
vertical-align: middle;
text-align: center;
display: inline-block; }
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up {
line-height: 6px;
display: block;
width: 14px;
cursor: pointer; }
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9; }
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
filter: none;
font-size: 12px; }
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
transform: scale(0.66667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
transition: all 0.3s; }
.u-table-thead th:hover .bee-table-column-sorter {
display: inline-block; }
.u-table-thead .th-drag {
cursor: pointer; }
.u-table-thead .th-drag-hover {
@ -8740,46 +8776,6 @@ ul {
right: 20px;
position: absolute; }
.bee-table-column-sorter {
position: relative;
margin-left: 4px;
display: inline-block;
width: 14px;
height: 1em;
vertical-align: middle;
text-align: center; }
.bee-table-column-sorter > .bee-table-column-sorter-down,
.bee-table-column-sorter > .bee-table-column-sorter-up {
line-height: 6px;
display: block;
width: 14px;
cursor: pointer; }
.bee-table-column-sorter-down.on .uf-triangle-down,
.bee-table-column-sorter-down.on .uf-triangle-up,
.bee-table-column-sorter-up.on .uf-triangle-down,
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9; }
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
filter: none;
font-size: 12px; }
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
transform: scale(0.66667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
transition: all 0.3s; }
.col-resize-container {
height: 0px;
position: relative; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

211
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

@ -23,7 +23,6 @@ import 'bee-table/build/Table.css';
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
| expandedRowKeys | 展开的行，控制属性 | array | - |
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
| useFixedHeader | 是否使用固定表头 | bool | false |
| bodyStyle | 添加到tablebody上的style | object | {} |
| style | 添加到table上的style | object | {} |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |

5
src/Table.js
View File

@ -198,6 +198,9 @@ class Table extends Component{
if(this.computeWidth < this.contentWidth){
let contentWidthDiff = this.contentWidth - this.computeWidth;
this.setState({contentWidthDiff,lastShowIndex});
}else{
this.contentWidth = this.computeWidth;
this.setState({contentWidth:this.contentWidth});//重新渲染，为了显示滚动条
}
}
@ -598,7 +601,7 @@ class Table extends Component{
if (scroll.x === true) {
tableStyle.tableLayout = 'fixed';
} else {
tableStyle.width = scroll.x;
tableStyle.width = this.contentWidth;
}
}
const tableBody = hasBody ? getBodyWrapper(

102
src/Table.scss
View File

@ -263,9 +263,9 @@ $table-move-in-color: $bg-color-base;
}
}
&-scroll-position-left &-fixed-left {
box-shadow: none;
}
// &-scroll-position-left &-fixed-left {
// box-shadow: none;
// }
&-scroll-position-right &-fixed-right {
box-shadow: none;
@ -278,6 +278,57 @@ $table-move-in-color: $bg-color-base;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.bee-table-column-sorter {
position: relative;
margin-left: 4px;
width: 14px;
height: 1em;
vertical-align: middle;
text-align: center;
// display: none;
display: inline-block;
& > .bee-table-column-sorter-down,
& > .bee-table-column-sorter-up {
line-height: 6px;
display: block;
width: 14px;
cursor: pointer;
}
}
.bee-table-column-sorter-down.on .uf-triangle-down,
.bee-table-column-sorter-down.on .uf-triangle-up,
.bee-table-column-sorter-up.on .uf-triangle-down,
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9;
}
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
-webkit-filter: none;
filter: none;
font-size: 12px;
}
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
-webkit-transform: scale(0.66666667) rotate(0deg);
-ms-transform: scale(0.66666667) rotate(0deg);
transform: scale(0.66666667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
&:hover{
.bee-table-column-sorter {
display: inline-block;
}
}
}
.th-drag{
cursor: pointer;
@ -530,51 +581,6 @@ $table-move-in-color: $bg-color-base;
}
}
.bee-table-column-sorter {
position: relative;
margin-left: 4px;
display: inline-block;
width: 14px;
height: 1em;
vertical-align: middle;
text-align: center;
& > .bee-table-column-sorter-down,
& > .bee-table-column-sorter-up {
line-height: 6px;
display: block;
width: 14px;
cursor: pointer;
}
}
.bee-table-column-sorter-down.on .uf-triangle-down,
.bee-table-column-sorter-down.on .uf-triangle-up,
.bee-table-column-sorter-up.on .uf-triangle-down,
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9;
}
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
-webkit-filter: none;
filter: none;
font-size: 12px;
}
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
-webkit-transform: scale(0.66666667) rotate(0deg);
-ms-transform: scale(0.66666667) rotate(0deg);
transform: scale(0.66666667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-resize-container {
height: 0px;

2
src/TableHeader.js
View File

@ -185,6 +185,8 @@ class TableHeader extends Component{
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth+'px';
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll('colgroup col')
contentColDomArr[this.drag.currIndex].style.width = newWidth+"px" ;
//固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
const siblingDom = contentTableDom.parentNode.nextElementSibling;
if(siblingDom){

6
src/lib/filterColumn.js
View File

@ -87,8 +87,8 @@ export default function filterColumn(Table,Popover) {
return columns.map((da,i)=>
{
if(!da.fixed){
return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
<Checkbox id={da.key} checked={da.checked}/>
return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} >
<Checkbox id={da.key} checked={da.checked} onClick={()=>{this.checkedColumItemClick(da)}}/>
<span>{da.title}</span>
</div>)
}
@ -156,7 +156,7 @@ export default function filterColumn(Table,Popover) {
content={content}
show={showModal} >
<div className={`${prefixCls}-pop-column-filter-cont`}>
<Icon type="uf-navmenu" onClick={this.openCloumList}/>
<Icon type="uf-grid" onClick={this.openCloumList}/>
</div>
</Popover>
</div>

155
src/lib/sort.js
View File

@ -6,6 +6,21 @@ import React, { Component } from "react";
* @param {*} Icon
*/
export default function sort(Table, Icon) {
const IconType = [{
'type':'noSort',
'icon':'uf-symlist',
'order':'',
},{
'type':'up',
'icon':'uf-sortup',
'order':'ascend',
},{
'type':'down',
'icon':'uf-sortdown',
'order':'descend',
}
]
return class SortTable extends Component {
constructor(props) {
super(props);
@ -14,6 +29,9 @@ export default function sort(Table, Icon) {
columns:props.columns,
};
}
static defaultProps = {
sort: {mode:'single'}
};
componentWillReceiveProps(nextProps){
if(nextProps.data !== this.props.data){
this.setState({
@ -26,84 +44,125 @@ export default function sort(Table, Icon) {
columns: nextProps.columns,
});
}
}
getOrderNum =()=>{
let orderNum=0 ;
this.state.columns.forEach((item,index)=>{
if(item.order=='ascend' || item.order=='descend'){
orderNum++;
}
})
return orderNum?orderNum:1;
}
//当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
/**
* column 当前的排序的列
*/
changeOrderNum = (column)=>{
let {columns} = this.state;
columns.forEach((col)=>{
if(col.orderNum>column.orderNum){
col.orderNum--;
}
if(column.key == col.key){
col.orderNum = '';
}
})
this.setState({columns});
}
/**
* 获取排序方式
*/
getColAndOrderType = ()=>{
}
toggleSortOrder = (order, column) => {
let { data, oldData ,columns} = this.state;
let ascend_sort = function(key) {
return function(a, b) {
return a.key - b.key;
};
};
let descend_sort = function(key) {
return function(a, b) {
return b.key - a.key;
};
};
// if (sortOrder === order) {
// // 切换为未排序状态
// order = "";
// }
let {sort} = this.props;
// let ascend_sort = function(key) {
// return function(a, b) {
// return a.key - b.key;
// };
// };
// let descend_sort = function(key) {
// return function(a, b) {
// return b.key - a.key;
// };
// };
if (!oldData) {
oldData = data.concat();
}
if (order === "ascend") {
data = data.sort(function(a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function(a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
}
let seleObj = columns.find(da=>da.key == column.key);
seleObj.order = order;
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
seleObj.orderNum = this.getOrderNum();
}
//通过后端请求
if(sort.backSource){
//获取排序的字段和方式
}else{
if (order === "ascend") {
data = data.sort(function(a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function(a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
this.changeOrderNum(column);
}
}
this.setState({
data,
oldData,
columns
});
};
//每个column上添加orderNum属性，不排序时为“”。
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
//点击置为“”时，动态的设置相关column的orderNum值。并排序
renderColumnsDropdown=(columns)=>{
const prefixCls = "bee-table";
const {mode} = this.props.sort;
return columns.map(originColumn => {
let iconTypeIndex = 0;
let column = Object.assign({}, originColumn);
if(column.order ){
if(column.order === "ascend"){
iconTypeIndex = 1;
}
if(column.order === "descend"){
iconTypeIndex = 2;
}
}
let sortButton;
if (column.sorter) {
let isAscend = column.order && column.order === "ascend";
let isDescend = column.order && column.order === "descend";
// //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
// if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
// column.orderNum = this.getOrderNum();
// console.log(column.orderNum);
// }
sortButton = (
<div className={`${prefixCls}-column-sorter`}>
<span
className={`${prefixCls}-column-sorter-up ${
isAscend ? "on" : "off"
}`}
title="↑"
className={`${prefixCls}-column-sorter-up `}
onClick={() =>{
this.toggleSortOrder("ascend", column);
this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);
if(column.sorterClick){
column.sorterClick(column,"up");
column.sorterClick(column,IconType[iconTypeIndex].type);
}
} }
>
<Icon type="uf-triangle-up" />
</span>
<span
className={`${prefixCls}-column-sorter-down ${
isDescend ? "on" : "off"
}`}
title="↓"
onClick={() => {
this.toggleSortOrder("descend", column);
if(column.sorterClick){
column.sorterClick(column,"down");
}
}}
>
<Icon type="uf-triangle-down" />
<Icon type={IconType[iconTypeIndex].icon} />
<span >{column.orderNum}</span>
</span>
</div>
);
}