修改gird组件 loading效果
This commit is contained in:
wangsongsole
parent
3de1c2fd75
commit
e42f6034de
|
|
@ -1,195 +1,189 @@
|
||||||
.gird {
|
.gird {
|
||||||
height: auto;
|
height: auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-head {
|
.th-head {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-td {
|
.th-td {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
color: #626366;
|
color: #626366;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-body {
|
.th-body {
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-bottom: 1px solid #dfe1e6;
|
border-bottom: 1px solid #dfe1e6;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-body.hide {
|
.th-body.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.empty-text {
|
.empty-text {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 28px 0;
|
padding: 28px 0;
|
||||||
color: rgba(0, 0, 0, .6);
|
color: rgba(0, 0, 0, 0.6);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-tr {
|
.th-tr {
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr {
|
.tr {
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr.active{
|
.tr.active {
|
||||||
|
background-color: #ebf2f7 !important;
|
||||||
background-color: #ebf2f7 !important;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tfoot {
|
.tfoot {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tfoot.hide {
|
.tfoot.hide {
|
||||||
/* visibility: hidden; */
|
/* visibility: hidden; */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tfoot .td {
|
.tfoot .td {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
.th-body .tr:first-child .td{
|
.th-body .tr:first-child .td {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
.td {
|
.td {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
word-break:break-all;
|
word-break: break-all;
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th-td-total {
|
.th-td-total {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
padding-left: 30px;
|
|
||||||
|
|
||||||
|
padding-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* */
|
/* */
|
||||||
.zent-switch-checked {
|
.zent-switch-checked {
|
||||||
background-color: #296bef !important;
|
background-color: #296bef !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zent-switch-checked:hover {
|
.zent-switch-checked:hover {
|
||||||
background-color: #125bed !important;
|
background-color: #125bed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-link {
|
.grid-link {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #296bef;
|
color: #296bef;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-link:hover {
|
.grid-link:hover {
|
||||||
color: #125bed;
|
color: #125bed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td.total {
|
.td.total {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gird .th-td:hover .zenticon-arrow-down {
|
.gird .th-td:hover .zenticon-arrow-down {
|
||||||
color: #626366;
|
color: #626366;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gird .zenticon-arrow-down {
|
.gird .zenticon-arrow-down {
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td-edit {
|
.td-edit {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td:hover .td-edit {
|
.td:hover .td-edit {
|
||||||
color: #313233;
|
color: #313233;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td-confirm {
|
.td-confirm {
|
||||||
width: 300px !important;
|
width: 300px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-loading {
|
.grid-loading {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-loading.show {
|
.grid-loading.show {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-loading.show .loading-bar {
|
.grid-loading.show .loading-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: width 0.5s;
|
transition: width 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-bar {
|
.loading-bar {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
background-color: #409EFF;
|
background-color: #409eff;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-txt {
|
.loading-txt {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagebar {
|
.pagebar {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagebar.hide {
|
.pagebar.hide {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,10 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDom from 'react-dom'
|
import ReactDom from 'react-dom'
|
||||||
import './main.css'
|
import './main.css'
|
||||||
import { Icon, Menu, Checkbox, Switch, Sweetalert, Notify } from 'zent'
|
import { Icon, Checkbox, Switch, InlineLoading } from 'zent'
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import Pagination from '../pagination/main.js'
|
import Pagination from '../pagination/main.js'
|
||||||
import GridEdit from '../gridEdit/main.js'
|
import GridEdit from '../gridEdit/main.js'
|
||||||
import Input from '../input/main.js'
|
|
||||||
import GridCheckBar from '../gridCheckBar/main.js'
|
|
||||||
|
|
||||||
//tabbar组件机构{title:"",index:""}
|
//tabbar组件机构{title:"",index:""}
|
||||||
//props {}
|
//props {}
|
||||||
|
|
@ -176,9 +174,9 @@ export default class menu extends React.Component {
|
||||||
this.setState({
|
this.setState({
|
||||||
allChecked: e.target.checked
|
allChecked: e.target.checked
|
||||||
})
|
})
|
||||||
|
|
||||||
let tableData = _.map(this.state.tableData, (item) => {
|
let tableData = _.map(this.state.tableData, (item) => {
|
||||||
return (item.checked = e.target.checked&&!item.disabled)
|
return (item.checked = e.target.checked && !item.disabled)
|
||||||
})
|
})
|
||||||
this.setState({
|
this.setState({
|
||||||
tableData: this.state.tableData
|
tableData: this.state.tableData
|
||||||
|
|
@ -270,6 +268,7 @@ export default class menu extends React.Component {
|
||||||
this.setState({ page: nextProps.page })
|
this.setState({ page: nextProps.page })
|
||||||
this.setState({ page: nextProps.page, emptyText: nextProps.emptyText })
|
this.setState({ page: nextProps.page, emptyText: nextProps.emptyText })
|
||||||
this.setState({ dataCount: nextProps.dataCount })
|
this.setState({ dataCount: nextProps.dataCount })
|
||||||
|
this.gridPageLoad()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -393,13 +392,14 @@ export default class menu extends React.Component {
|
||||||
})}{' '}
|
})}{' '}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<InlineLoading
|
||||||
className={
|
loading={this.state.pageLoading}
|
||||||
this.state.pageLoading ? 'grid-loading show' : 'grid-loading'
|
iconSize={16}
|
||||||
}>
|
textSize={14}
|
||||||
<div className='loading-bar'></div>
|
icon='circle'
|
||||||
<div className='loading-txt'>数据加载中,请耐心等待</div>
|
className='grid-loading show'
|
||||||
</div>
|
iconText='数据加载中,请耐心等待'
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
className={this.state.pageLoading ? 'th-body hide' : 'th-body'}
|
className={this.state.pageLoading ? 'th-body hide' : 'th-body'}
|
||||||
style={{ maxHeight: this.props.maxheight + 'px' }}>
|
style={{ maxHeight: this.props.maxheight + 'px' }}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue