自动出现滚动条、左侧固定列border-shadow样式
This commit is contained in:
wanghaoo
parent
c31f73979c
commit
af280232e1
|
|
@ -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' |
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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' |
|
||||
|
|
|
|||
|
|
@ -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
102
src/Table.scss
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
137
src/lib/sort.js
137
src/lib/sort.js
|
|
@ -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,26 +44,65 @@ 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();
|
||||
}
|
||||
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);
|
||||
|
|
@ -56,54 +113,56 @@ export default function sort(Table, Icon) {
|
|||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
this.changeOrderNum(column);
|
||||
}
|
||||
}
|
||||
let seleObj = columns.find(da=>da.key == column.key);
|
||||
seleObj.order = order;
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue