通过滑块可以设置实时显示最近多长时间的缴费事件,或者显示最近多少个缴费事件。
我们借鉴Vue,React等MVC框架的思想,将数据和状态绑定到DOM对象上。
HTML代码如下:
<div class="sidebar-pane" id="pay">
<h1 class="sidebar-header">
营收概览
<span class="sidebar-close"><i class="fa fa-caret-right"></i></span>
</h1>
<div class="panel panel-success">
<!-- Default panel contents -->
<div class="panel-heading">实时营收</div>
<div class="panel-body" data-role="realPay" data-number="5" data-minute="10" data-by="realPayByTime">
<!-- Single button -->
<div>
<div class="btn-group" data-slider="realPayByTime">
<label for="realPayByTime" style="margin-right: 10px;">最近<span>10</span>分钟缴费</label>
<br>
<input data-role="slider" data-slider-id='realPayByTime' type="text" data-slider-min="0" data-slider-max="120" data-slider-step="1" data-slider-value="10" data-slider-ticks="[3,10,20,30,60,120]" data-slider-ticks-tooltip="true" id='realPayByTime' />
</div>
<div class="btn-group" data-slider="realPayByCount" style="display: none;">
<label for="realPayByCount" style="margin-right: 10px;">最近<span>5</span>次缴费</label>
<br>
<input data-role="slider" data-slider-id='realPayByCount' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="5" data-slider-ticks="[3,10,20,30,50,100]" data-slider-ticks-tooltip="true" id='realPayByCount' />
</div>
</div>
<div>
<div class="btn-group" data-role="realPayBy">
<button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false" data-slider="realPayByTime">
按最近时间
</button>
<button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false" data-slider="realPayByCount">
按最近数量
</button>
</div>
<div class="btn-group" data-role="realPayOK">
<button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
开启
</button>
<button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
当滑块位置变化时,将滑块位置对应的数值保存在$('[data-role=realPay]')对应的DOM上。滑块事件代码如下:
$('[data-role=realPay]').find('input[data-role="slider"]:eq(1)').slider({
formatter: function (value) {
return '最近的' + (value) + '个缴费事件';
}
}).on('slide', function () {
var slider = $(this).data('slider');
console.log(slider.getValue());
$('[data-role=realPay]').data('number', slider.getValue());
$(this).siblings().filter('label').find('span').html(slider.getValue());
});
$('[data-role=realPay]').find('input[data-role="slider"]:eq(0)').slider({
formatter: function (value) {
return '最近' + (value) + '分钟的缴费事件';
}
}).on('slide', function () {
var slider = $(this).data('slider');
console.log(slider.getValue());
$('[data-role=realPay]').data('minute', slider.getValue());
$(this).siblings().filter('label').find('span').html(slider.getValue());
});
“按最近时间”还是“按最近数量”数据方式,将方式对应的数值保存在$('[data-role=realPay]')对应的DOM上。
$('[data-role=realPay] [data-role="realPayBy"]').find('button').click(function () {
var sliderId = $(this).data("slider");
$('[data-role=realPay]').data('by', sliderId);
$('[data-role=realPay] .btn-group[data-slider=' + sliderId + ']').show().siblings().hide();
$(this).removeClass('btn-default').addClass('btn-primary').siblings().removeClass('btn-primary').addClass('btn-default');
refreshPayEvent();
});
点击开启,开启刷新数据计时器:
$('[data-role=realPay] [data-role="realPayOK"]').find('button:first').click(function () {
window.refreshInterval = setInterval(function () {
refreshPayEvent();
map.reorderLayer(payLayer, 999);
}, dictConfig['constParams']['payInterval']);
$(this).removeClass('btn-default').addClass('btn-primary').siblings().removeClass('btn-primary').addClass('btn-default');
});
点击关闭,清除刷新数据计时器,同时清除地图上图形。
$('[data-role=realPay] [data-role="realPayOK"]').find('button:last').click(function () {
clearInterval(refreshInterval);
payLayer.clear();
$(this).removeClass('btn-default').addClass('btn-primary').siblings().removeClass('btn-primary').addClass('btn-default');
});
根据滑块位置以及数据方式,构造请求参数从后台获取数据后更新Backbone.Collection。
function refreshPayEvent() {
var by = $('[data-role=realPay]').data('by');
var number = $('[data-role=realPay]').data('number');
var minute = $('[data-role=realPay]').data('minute');
var params = (by == 'realPayByTime' ? '?minute=' + minute : '?number=' + number);
$.getJSON(dictConfig['constParams']['payUrl'] + params, function (data) {
var data = _.map(data['result'], function (item) {
return $.parseJSON(item);
});
colPayEvent.set(data);
})
}
根据idAttribute设置的表示主键的字段比较后台获得的新数据和colPayEvent中的旧数据,如果新数据中有旧数据不存在的元素,则触发colPayEvent的add事件(在地图上添加对应点位符号),如果旧数据中有元素新数据中不再有,则触发colPayEvent的remove事件(在地图上移除对应点位符号)。我们也可以为Backbone.Collection指定model,这时新数据和旧数据根据idAttribute设置的主键来标明同一记录,如果其他字段不一致,则会触发model的change事件。
,
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。