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

[Feature]多选表格复选框水平居中显示、修改编辑表格样式、[Fixbug]表头未和表体同步滚动

This commit is contained in:
yangchch6 2019-05-08 17:29:40 +08:00
parent bbd4d1cae3
commit c3928c7757
22 changed files with 165 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/Table.css
View File

@ -523,7 +523,8 @@
height: 14px;
line-height: 14px;
margin: 0px;
display: block; }
display: block;
margin-left: 5px; }
.u-table .u-checkbox .u-checkbox-label {
line-height: 14px;
padding-left: 16px; }
@ -755,6 +756,12 @@
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: 26px; }
.filter-wrap .calendar-picker .u-input-group-btn {
line-height: 20px; }
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {
line-height: 12px; }
.u-row-hover {
position: absolute;
right: 24px;

11
build/Table.js
View File

@ -1282,7 +1282,6 @@ var Table = function (_Component) {
handleScrollX = _props8.handleScrollX;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
// Prevent scrollTop setter trigger onScroll event
@ -1293,10 +1292,10 @@ var Table = function (_Component) {
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
var position = '';
if (e.target === bodyTable && headTable) {
if (e.target === this.bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && this.bodyTable) {
this.bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
position = 'left';
@ -1320,8 +1319,8 @@ var Table = function (_Component) {
if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
}
if (bodyTable && e.target !== bodyTable) {
bodyTable.scrollTop = e.target.scrollTop;
if (this.bodyTable && e.target !== this.bodyTable) {
this.bodyTable.scrollTop = e.target.scrollTop;
}
if (this.hoverDom) {
this.hoverDom.style.display = 'none';

2
build/lib/multiSelect.js
View File

@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 40,
width: 49,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";

14
demo/demolist/Demo0501.js
View File

@ -514,24 +514,24 @@ class Demo0501 extends Component {
renderRowHover = () => {
const { currentIndex } = this.state;
return this.state.editingRowsMap[currentIndex] ? (
<div className={"opt-btns"}>
<div className="cancel-btns">
<Button
colors="dark"
className="btn-abort"
size="sm"
bordered
onClick={this.abortEdit(currentIndex)}
>
取消
</Button>
<Button colors="primary" onClick={this.commitChange(currentIndex)}>
<Button size="sm" colors="primary" onClick={this.commitChange(currentIndex)}>
确认
</Button>
</div>
) : (
<div className={"opt-btns"}>
<Button colors="dark" onClick={this.edit(currentIndex)}>
<div className="opt-btns">
<Button size="sm" onClick={this.edit(currentIndex)}>
编辑
</Button>
<Button colors="dark" onClick={this.delete(currentIndex)}>
<Button size="sm" onClick={this.delete(currentIndex)}>
删除
</Button>
</div>

17
demo/demolist/Demo0501.scss
View File

@ -1,19 +1,10 @@
.demo0501 .u-table {
.u-row-hover {
.opt-btns {
.opt-btns,.cancel-btns {
button {
border-radius: 3px;
margin: 0;
&:first-child {
margin-right: 10px;
}
&.btn-abort {
background-color: #fff;
color: rgb(70, 83, 105);
&:hover {
background-color: #eff0f3;
}
margin-right: 8px;
}
}
}
@ -47,7 +38,7 @@
&::before {
content: " ";
border: 2px solid #F44336;
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;

2
demo/demolist/Demo0502.js
View File

@ -493,7 +493,7 @@ class Demo0502 extends Component {
render() {
return (
<div className="demo0502 u-editable-table">
<Table data={this.state.dataSource} columns={this.columns} />
<Table data={this.state.dataSource} columns={this.columns} height={40}/>
</div>
);
}

7
demo/demolist/Demo0502.scss
View File

@ -37,6 +37,13 @@
.editable-cell-input-wrapper {
padding-right: 0;
.ref-input-wrap {
width: auto !important;
height: 30px;
.u-input-group{
display: inline-block;
}
}
}
.verify-cell {

13
demo/demolist/Demo0503.js
View File

@ -369,13 +369,14 @@ class EditModal extends Component {
<Modal.Title>编辑行</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Row style={{ width: 770, margin: "0 auto" }}>
{
columns.map((item, index) => {
return (
<Col sm={6} md={6} lg={6} style={{ padding: "0 0 0 10px" }} key={index}>
<FormGroup>
<Label>{item.title}</Label>
<Label><Icon type="uf-mi" className='mast'></Icon>{item.title}</Label>
{this.renderElm[item.key] &&
this.renderElm[item.key](
data,
@ -395,12 +396,12 @@ class EditModal extends Component {
})
}
</Row>
</Form>
</Modal.Body>
<Modal.Footer style={{textAlign: "right"}}>
<Button
colors="dark"
className="btn-abort"
style={{ marginRight: 15 }}
style={{ marginRight: 8 }}
bordered
onClick={onHide}
>
取消
@ -535,8 +536,8 @@ class Demo0503 extends Component {
renderRowHover = () => {
return (
<div className={"opt-btns"}>
<Button colors="dark" onClick={this.edit}>
<div className="opt-btns">
<Button size="sm" onClick={this.edit}>
编辑
</Button>
</div>

26
demo/demolist/Demo0503.scss
View File

@ -1,16 +1,8 @@
.demo0503-m-b {
button {
&.btn-abort {
background-color: #fff;
color: rgb(70, 83, 105);
&:hover {
background-color: #eff0f3 !important;
}
}
}
.u-modal .u-modal-body {
&.u-modal .u-modal-body {
padding: 16px 0;
background: #f7f9fb;
}
.u-form-group {
@ -42,16 +34,9 @@
font-size: 12px;
height: 32px;
line-height: 32px;
}
.required {
&::before {
content: "*";
position: absolute;
top: 9px;
left: -9px;
.mast {
padding: 0;
color: red;
font-size: 14px;
}
}
@ -69,4 +54,7 @@
.tp-content {
color: #F44336;
}
}
.ref-core-button .u-button:first-child{
margin-right: 8px;
}

9
demo/demolist/Demo0505.js
View File

@ -46,7 +46,7 @@ class StringEditCell extends Component {
return editable ? (
<div className="editable-cell">
<div className={cls}>
<FormControl value={value} onChange={this.handleChange} />
<FormControl className={!value && "error"} value={value} onChange={this.handleChange} />
<span className="error">
{value === "" ? (
<Tooltip
@ -506,12 +506,11 @@ class Demo0505 extends Component {
const columns = this.columns;
return (
<div className="demo0505 u-editable-table">
<div className="opt-btns">
<div className="toolbar-btns">
{isEditingAll ? (
<React.Fragment>
<Button
colors="dark"
className="btn-abort"
bordered
onClick={this.abortEdit}
>
取消
@ -521,7 +520,7 @@ class Demo0505 extends Component {
</Button>
</React.Fragment>
) : (
<Button colors="dark" onClick={this.edit}>
<Button colors="secondary" onClick={this.edit}>
编辑全表
</Button>
)}

20
demo/demolist/Demo0505.scss
View File

@ -1,21 +1,11 @@
.demo0505 {
.opt-btns {
margin-bottom: 15px;
button {
border-radius: 3px;
.toolbar-btns {
margin-bottom: 8px;
.u-button {
&:first-child {
margin-right: 10px;
}
&.btn-abort {
background-color: #fff;
color: rgb(70, 83, 105);
&:hover {
background-color: #eff0f3;
}
margin-right: 8px;
}
}
}
@ -52,7 +42,7 @@
&::before {
content: " ";
border: 2px solid #F44336;
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;

1
demo/demolist/Demo0903.js
View File

@ -119,6 +119,7 @@ class Demo13 extends Component {
清空已选
</Button>
<ComplexTable
bordered
selectDisabled={this.state.selectDisabled}
selectedRow={this.state.selectedRow}
columns={columns13}

3
demo/demolist/Demo1304.js
View File

@ -31,7 +31,7 @@ class Demo1304 extends Component {
render() {
let {selectedValue} = this.state;
let columns = [
{ title: "单选", dataIndex: "check", key: "check", width: 50,render(text, record, index){
{ title: "单选", dataIndex: "check", key: "check", width: 49, textAlign:'center',render(text, record, index){
return(
<Radio.RadioGroup name="fruits" selectedValue={selectedValue}>
<Radio value={record.check} />
@ -48,6 +48,7 @@ class Demo1304 extends Component {
className="demo1304"
columns={columns}
data={data}
bordered
height={40}
headerheight={40}
rowClassName={(record,index,indent)=>{

1
demo/demolist/Demo1304.scss
View File

@ -3,5 +3,6 @@
width: 16px;
height: 16px;
display: block;
margin-left: 8px;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

74
dist/demo.css vendored
View File

@ -511,7 +511,8 @@
height: 14px;
line-height: 14px;
margin: 0px;
display: block; }
display: block;
margin-left: 5px; }
.u-table .u-checkbox .u-checkbox-label {
line-height: 14px;
padding-left: 16px; }
@ -743,6 +744,12 @@
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: 26px; }
.filter-wrap .calendar-picker .u-input-group-btn {
line-height: 20px; }
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {
line-height: 12px; }
.u-row-hover {
position: absolute;
right: 24px;
@ -827,15 +834,10 @@
padding-top: 0px;
padding-bottom: 0px; }
.demo0501 .u-table .u-row-hover .opt-btns button {
border-radius: 3px; }
.demo0501 .u-table .u-row-hover .opt-btns button:first-child {
margin-right: 10px; }
.demo0501 .u-table .u-row-hover .opt-btns button.btn-abort {
background-color: #fff;
color: #465369; }
.demo0501 .u-table .u-row-hover .opt-btns button.btn-abort:hover {
background-color: #eff0f3; }
.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {
margin: 0; }
.demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {
margin-right: 8px; }
.demo0501 .u-table .u-table-row td {
padding: 5px 8px; }
@ -857,7 +859,7 @@
position: relative; }
.demo0501 .u-table .required::before {
content: " ";
border: 2px solid #F44336;
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;
@ -906,6 +908,11 @@
.u-editable-table .u-table .editable-cell-input-wrapper {
padding-right: 0; }
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {
width: auto !important;
height: 30px; }
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {
display: inline-block; }
.u-editable-table .u-table .verify-cell {
padding-right: 25px !important; }
@ -919,14 +926,9 @@
.u-editable-table-tp .tp-content {
color: #F44336; }
.demo0503-m-b button.btn-abort {
background-color: #fff;
color: #465369; }
.demo0503-m-b button.btn-abort:hover {
background-color: #eff0f3 !important; }
.demo0503-m-b .u-modal .u-modal-body {
padding: 16px 0; }
.demo0503-m-b.u-modal .u-modal-body {
padding: 16px 0;
background: #f7f9fb; }
.demo0503-m-b .u-form-group {
overflow: hidden; }
@ -953,14 +955,9 @@
font-size: 12px;
height: 32px;
line-height: 32px; }
.demo0503-m-b .required::before {
content: "*";
position: absolute;
top: 9px;
left: -9px;
color: red;
font-size: 14px; }
.demo0503-m-b .u-label .mast {
padding: 0;
color: red; }
.demo0503-m-b .required-icon {
position: absolute;
@ -973,17 +970,13 @@
.u-editable-table-tp .tp-content {
color: #F44336; }
.demo0505 .opt-btns {
margin-bottom: 15px; }
.demo0505 .opt-btns button {
border-radius: 3px; }
.demo0505 .opt-btns button:first-child {
margin-right: 10px; }
.demo0505 .opt-btns button.btn-abort {
background-color: #fff;
color: #465369; }
.demo0505 .opt-btns button.btn-abort:hover {
background-color: #eff0f3; }
.ref-core-button .u-button:first-child {
margin-right: 8px; }
.demo0505 .toolbar-btns {
margin-bottom: 8px; }
.demo0505 .toolbar-btns .u-button:first-child {
margin-right: 8px; }
.demo0505 .u-table .u-row-select {
background-color: #FFF7E7; }
@ -1008,7 +1001,7 @@
position: relative; }
.demo0505 .u-table .required::before {
content: " ";
border: 2px solid #F44336;
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;
@ -1053,7 +1046,8 @@ th:hover .uf {
.demo1304 .u-table-tbody .u-radio-group {
width: 16px;
height: 16px;
display: block; }
display: block;
margin-left: 8px; }
.demo8 .u-table {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

100
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

12
src/Table.js
View File

@ -1102,7 +1102,7 @@ class Table extends Component {
handleBodyScroll(e) {
const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
const { headTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
if (e.currentTarget !== e.target) {
@ -1110,10 +1110,10 @@ class Table extends Component {
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
let position = '';
if (e.target === bodyTable && headTable) {
if (e.target === this.bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && this.bodyTable) {
this.bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
position='left';
@ -1143,8 +1143,8 @@ class Table extends Component {
if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
}
if (bodyTable && e.target !== bodyTable) {
bodyTable.scrollTop = e.target.scrollTop;
if (this.bodyTable && e.target !== this.bodyTable) {
this.bodyTable.scrollTop = e.target.scrollTop;
}
if(this.hoverDom){
this.hoverDom.style.display = 'none'

9
src/Table.scss
View File

@ -599,6 +599,7 @@ $icon-color:#505F79;
line-height: $checkbox-height;
margin:0px;
display: block;
margin-left: 5px;
.u-checkbox-label{
line-height: $checkbox-height;
padding-left: 16px;
@ -924,6 +925,14 @@ $icon-color:#505F79;
.u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: $filter-form-control-height;
}
.calendar-picker {
.u-input-group-btn{
line-height: 20px;
}
}
.u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf{
line-height: 12px;
}
}
.u-row-hover{
position: absolute;

2
src/lib/multiSelect.js
View File

@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 40,
width: 49,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";