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