getrebuild/rebuild
1
1
Fork 0
mirror of https://github.com/getrebuild/rebuild.git synced 2025-10-09 23:25:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

sublist load mores

Browse source
This commit is contained in:
FangfangZhao 2018-11-26 22:05:52 +08:00
parent 070cee8649
commit 1de224764c
3 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/main/webapp/assets/css/view-page.css
View file

@ -125,4 +125,10 @@ html, body {
} }
.view-action.empty { .view-action.empty {
margin-top: 4px; margin-top: 4px;
}
.btn.load-mores {
display: inline-block;
min-width: 200px;
line-height: 2.8rem;
border-radius: 99px;
} }

25
src/main/webapp/assets/js/rb-view.jsx
View file

@ -143,15 +143,24 @@ const RbViewPage = {
}, },
initVTabs(config) { initVTabs(config) {
let that = this
let rs = [] let rs = []
$(config).each(function(){ $(config).each(function(){
$('<li class="nav-item"><a class="nav-link" href="#tab-' + this[0] + '" data-toggle="tab">' + this[1] + '</a></li>').appendTo('.nav-tabs') let entity = this[0]
$('<div class="tab-pane" id="tab-' + this[0] + '"><div class="related-list rb-loading rb-loading-active"></div></div>').appendTo('.tab-content') $('<li class="nav-item"><a class="nav-link" href="#tab-' + entity + '">' + this[1] + '</a></li>').appendTo('.nav-tabs')
let rl = $('<div class="tab-pane" id="tab-' + entity + '"><div class="related-list rb-loading rb-loading-active"></div></div>').appendTo('.tab-content')
rs.push(this[0]) rs.push(this[0])
let mores = $('<div class="text-center J_mores mt-4 hide"><button type="button" class="btn btn-secondary load-mores">加载更多 ...</button></div>').appendTo(rl)
rl = rl.find('.related-list')
mores.find('.btn').on('click', function(){
let pno = ~~($(this).attr('data-pno') || 1) + 1
$(this).attr('data-pno', pno)
that.renderRelatedGrid(rl, entity, pno)
})
}) })
this.__vtab_es = rs this.__vtab_es = rs
let that = this
$('.nav-tabs li>a').on('click', function(e) { $('.nav-tabs li>a').on('click', function(e) {
e.preventDefault() e.preventDefault()
let _this = $(this) let _this = $(this)
@ -193,12 +202,18 @@ const RbViewPage = {
renderRelatedGrid(el, related, page) { renderRelatedGrid(el, related, page) {
page = page || 1 page = page || 1
$.get(rb.baseUrl + '/app/entity/related-list?masterId=' + this.__id + '&related=' + related + '&pageNo=' + page, function(res){ let psize = 20
$.get(rb.baseUrl + '/app/entity/related-list?masterId=' + this.__id + '&related=' + related + '&pageNo=' + page + '&pageSize=' + psize, function(res){
el.removeClass('rb-loading-active') el.removeClass('rb-loading-active')
$(res.data.data).each(function(){ let _data = res.data.data
$(_data).each(function(){
let h = '#!/View/' + related + '/' + this[0] let h = '#!/View/' + related + '/' + this[0]
$('<div class="card"><div class="float-left"><a href="' + h + '" onclick="RbViewPage.clickView(this)">' + this[1] + '</a></div><div class="float-right" title="修改时间">' + this[2] + '</div><div class="clearfix"></div></div>').appendTo(el) $('<div class="card"><div class="float-left"><a href="' + h + '" onclick="RbViewPage.clickView(this)">' + this[1] + '</a></div><div class="float-right" title="修改时间">' + this[2] + '</div><div class="clearfix"></div></div>').appendTo(el)
}) })
let mores = $(el).next('.J_mores')
if (_data.length >= psize) mores.removeClass('hide')
else mores.find('.btn').attr({ disabled: true }).text('已加载全部')
}) })
}, },

2
src/main/webapp/general-entity/record-view.jsp
View file

@ -24,7 +24,7 @@
<div class="col-sm-9 pr-0"> <div class="col-sm-9 pr-0">
<div class="tab-container"> <div class="tab-container">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#tab-rbview" data-toggle="tab">视图</a></li> <li class="nav-item"><a class="nav-link active" href="#tab-rbview">视图</a></li>
<a class="vtab-settings J_for-admin J_view-addons hide" data-type="TAB" title="配置显示项"><i class="zmdi zmdi-settings"></i></a> <a class="vtab-settings J_for-admin J_view-addons hide" data-type="TAB" title="配置显示项"><i class="zmdi zmdi-settings"></i></a>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">