[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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -493,7 +493,7 @@ class Demo0502 extends Component {
render() { render() {
return ( return (
<div className="demo0502 u-editable-table"> <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> </div>
); );
} }

View File

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

View File

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

View File

@ -1,16 +1,8 @@
.demo0503-m-b { .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; padding: 16px 0;
background: #f7f9fb;
} }
.u-form-group { .u-form-group {
@ -42,16 +34,9 @@
font-size: 12px; font-size: 12px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
} .mast {
padding: 0;
.required {
&::before {
content: "*";
position: absolute;
top: 9px;
left: -9px;
color: red; color: red;
font-size: 14px;
} }
} }
@ -69,4 +54,7 @@
.tp-content { .tp-content {
color: #F44336; color: #F44336;
} }
}
.ref-core-button .u-button:first-child{
margin-right: 8px;
} }

View File

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

View File

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

View File

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

View File

@ -31,7 +31,7 @@ class Demo1304 extends Component {
render() { render() {
let {selectedValue} = this.state; let {selectedValue} = this.state;
let columns = [ 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( return(
<Radio.RadioGroup name="fruits" selectedValue={selectedValue}> <Radio.RadioGroup name="fruits" selectedValue={selectedValue}>
<Radio value={record.check} /> <Radio value={record.check} />
@ -48,6 +48,7 @@ class Demo1304 extends Component {
className="demo1304" className="demo1304"
columns={columns} columns={columns}
data={data} data={data}
bordered
height={40} height={40}
headerheight={40} headerheight={40}
rowClassName={(record,index,indent)=>{ rowClassName={(record,index,indent)=>{

View File

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

File diff suppressed because one or more lines are too long

74
dist/demo.css vendored
View File

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

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

100
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

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

View File

@ -599,6 +599,7 @@ $icon-color:#505F79;
line-height: $checkbox-height; line-height: $checkbox-height;
margin:0px; margin:0px;
display: block; display: block;
margin-left: 5px;
.u-checkbox-label{ .u-checkbox-label{
line-height: $checkbox-height; line-height: $checkbox-height;
padding-left: 16px; padding-left: 16px;
@ -924,6 +925,14 @@ $icon-color:#505F79;
.u-input-number.u-input-group.simple .u-input-group-btn .icon-group { .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
height: $filter-form-control-height; 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{ .u-row-hover{
position: absolute; position: absolute;

View File

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