高质量编码-事件图层前端交互设计
原创高质量编码-事件图层前端交互设计
原创
MiaoGIS
修改于 2019-05-23 18:03:19
修改于 2019-05-23 18:03:19
通过滑块可以设置实时显示最近多长时间的缴费事件，或者显示最近多少个缴费事件。
我们借鉴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 删除。
评论
登录后参与评论
推荐阅读