[Feature]多选表格复选框水平居中显示、修改编辑表格样式、[Fixbug]表头未和表体同步滚动
This commit is contained in:
parent
bbd4d1cae3
commit
c3928c7757
|
@ -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;
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 : "";
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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)=>{
|
||||||
|
|
|
@ -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
|
@ -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 {
|
||||||
|
|
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
12
src/Table.js
12
src/Table.js
|
@ -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'
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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:"";
|
||||||
|
|
Loading…
Reference in New Issue