物联网平台设计心得:DateTimePicker实现选择联动
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了物联网平台设计心得:DateTimePicker实现选择联动相关的知识,希望对你有一定的参考价值。
所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期。这在一些图表查询条件里面是很常用的一个功能。下面我们就来看看如何设计。
DateTimePicker的选取与使用
在这里,我们使用的DateTimePicker是一个开源的组件,他的model名称为:ui.bootstrap.datetimepicker,我们可以去这个网址找到其相关的内容:http://dalelotts.github.io/angular-bootstrap-datetimepicker/,然后下载其相应的包,最后放到项目中,并进行引用即可(注意不能少了moment.js,它是构建与这个组件的基础上):
<!--DateTimePicker Part--> <link href="~/Content/front/angular-datetimepicker/css/datetimepicker.css" rel="stylesheet" /> <script src="~/Content/front/angular-datetimepicker/js/moment.js"></script> <script src="~/Content/front/angular-datetimepicker/js/zh-cn.js"></script> <script src="~/Content/front/angular-datetimepicker/js/datetimepicker.js"></script>
然后在module中进行注册:
var app = angular.module(‘dsBootstrap‘, [ ‘ui.grid‘, ‘ui.grid.selection‘, ‘ui.grid.pagination‘, ‘ngCookies‘, ‘ui.bootstrap.datetimepicker‘ ]);
最后在html页面进行排版布局使用即可:
<div class="row" ng-show="visible"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">开始时间:</span> <div class="dropdown"> <a class="dropdown-toggle" id="starttime" role="button" data-toggle="dropdown" data-target="#" href="#"> <div class="input-group"> <input type="text" class="form-control" data-ng-model="starttime|date:‘yyyy-MM-dd‘ "><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <datetimepicker data-ng-model="starttime" data-on-set-time="onTimeSet(newDate, oldDate)" data-datetimepicker-config="{ dropdownSelector: ‘#starttime‘,startView:‘day‘, minView:‘day‘ }" /> </ul> </div> </div> </div> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">结束时间:</span> <div class="dropdown"> <a class="dropdown-toggle" id="endtime" role="button" data-toggle="dropdown" data-target="#" href="#"> <div class="input-group"> <input type="text" class="form-control" data-ng-model="endtime|date:‘yyyy-MM-dd‘ "><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </a> <ul class="dropdown-menu" id="endContainer" role="menu" aria-labelledby="dLabel"> </ul> </div> </div> </div> </div>
这样我们就完成了第一步的工作了。从上面的Html代码我们可以看出,starttime和endtime是传递到controller中的所选择的日期值。而且我们的endtime DateTimePicker我们并没有放到前台,我们需要在后台动态生成。为什么呢?因为我们需要根据StartTime的选取值,来计算出endTime的选取范围,所以这里需要动态生成绑定。
DateTimePicker的联动
下面我们开始设计其联动工作。
首先,当选择开始时间后,会进入onTimeSet事件,在这个事件中,我们先动态生成结束时间选择器:
$scope.onTimeSet = function (newDate, oldDate) { var startTimeFmt = moment($scope.starttime).format("YYYY-MM-DD"); var endTimeFmt = moment(startTimeFmt).add(1, ‘day‘).format("YYYY-MM-DD"); //时间框置空 $("#endtime input").val(""); //移除原有的datetimepicker对象 $("#endContainer").children().remove(); //设置config $scope.config = { dropdownSelector: "#endtime", startView: "day", minView: "day" }; //动态编译datetimepicker directive var compiledeHTML = $compile(‘<datetimepicker data-ng-model="endtime" data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)" data-datetimepicker-config="{{config}}" />‘)($scope); //放入html容器 $("#endContainer").append(compiledeHTML); }
然后,当上面的方法执行到$compile的时候,就会触发其beforeRender事件,此事件允许在控件加载前,进行一些相关操作。我们利用这个事件,抛出一个days-check事件,以便动态加载时间范围:
//当选择开始时间,会进入onTimeSet事件,执行到$compile的时候,就会触发下面的beforeRender事件 //触发beforeReder事件后,会抛出一个days-check事件出去,并附带所有的当页时间对象。 $scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) { $timeout(function () { $scope.$broadcast(‘days-check‘, $dates); }); }
最后,我们接收这个事件:
//接收事件,并重置页面 $scope.$on(‘days-check‘, function (e, d) { for (var i = 0; i < d.length; i++) { //初始设置为不可选状态,不选中状态 d[i].active = false; d[i].selectable = false; //当前loop的值 var currentDate = moment(d[i].utcDateValue).format("YYYY-MM-DD"); //当前选定的开始时间 var startTimeFmt = moment($scope.starttime).format("YYYY-MM-DD"); //允许选定的最大的结束时间 var endTimeFmt = moment(startTimeFmt).add(1, ‘day‘).format("YYYY-MM-DD"); //比较并设置可选日期 if (currentDate >= startTimeFmt && currentDate <= endTimeFmt) { d[i].selectable = true; } } });
当我们收到这个days-check事件的时候,我们会首先重置所有日期为不可选状态,然后根据预先设定的值,来确定选取范围。 这样,通过上面的设置,我们的结束时间就能根据开始时间的选择而进行联动了。是不是很方便呢?最后附上controller总体代码:
app.controller(‘collectorController‘, [‘$scope‘, ‘$cookies‘, ‘$timeout‘,‘$compile‘, ‘baseService‘, ‘collectorService‘, ‘uiGridConstants‘, function ($scope, $cookies,$timeout,$compile, baseService, collectorService, uiGridConstants) { var self = this; $scope.ProvinceData = null; $scope.CityData = null; $scope.DistrictData = null; $scope.CompanyData = null; $scope.MachineData = null; $scope.RealTimeData = null; $scope.HistoryData = null; $scope.selectedProvince = null; $scope.selectedCity = null; $scope.selectedDistrict = null; $scope.selectedCompany = null; $scope.selectedMachine = null; $scope.starttime = null; $scope.endtime = null; $scope.visible = false; //datetimepicker是否显示 //art.dialog({ title: ‘加载提示‘, icon: ‘face-smile‘, fixed: true,left:‘50%‘,top:0, time:3, content: "日期选择跨度不要过大,否则会因为数据量过大而无法加载图表和列表!", padding: 0 }); //监测省份的变化,如果发生了变化,则加载城市列表 $scope.$watchCollection(‘selectedProvince‘, function (oldval, newval) { $scope.GetCityList(); }); //监测城市变化,如果发生了变化,则加载地区列表 $scope.$watchCollection(‘selectedCity‘, function (oldval, newval) { $scope.GetDistrictList(); }); //监测地区变化,如果发生了变化,则加载公司列表 $scope.$watchCollection(‘selectedDistrict‘, function (oldval, newval) { $scope.GetCompanyList(); }); //监测公司变化,如果发生了变化,则加载机器列表 $scope.$watchCollection(‘selectedCompany‘, function (oldval, newval) { $scope.GetMachineList(); }); //绑定列表 $scope.gridOptions = { enableRowSelection: true, enableSelectAll: false, selectionRowHeaderWidth: 35, rowHeight: 35, showGridFooter: false, multiSelect: true, enablePaginationControls: true, paginationPageSizes: [9, 15, 20], paginationPageSize: 9 }; $scope.gridOptions.columnDefs = [ { name: ‘Param_name‘, displayName: ‘参数名称‘ }, { name: ‘Param_unit‘, displayName: ‘参数单位‘ }, { name: ‘Param_data‘, displayName: ‘参数值‘ }, { name: ‘Param_time‘, displayName: ‘采集时间‘ } ]; $scope.gridOptions.onRegisterApi = function (gridApi) { $scope.gridApi = gridApi; }; //省份绑定 collectorService.GetProvinceData().then(function (data) { var flag = data.data.success; if (flag) { $scope.ProvinceData = data.data.data; $scope.selectedProvince = baseService.getSelectedDataMapper($scope.ProvinceData, ‘province‘); } }, null); $scope.GetCityList = function () { var selectedProvinceId; if ($scope.selectedProvince != undefined) selectedProvinceId = $scope.selectedProvince.id; else return; //市区绑定 collectorService.GetCityData(selectedProvinceId).then(function (data) { var flag = data.data.success; if (flag) { $scope.CityData = data.data.data; $scope.selectedCity = baseService.getSelectedDataMapper($scope.CityData, ‘city‘); } }, null); } $scope.GetDistrictList = function () { var selectedCityId; if ($scope.selectedCity != undefined) selectedCityId = $scope.selectedCity.id; else return; //区县绑定 collectorService.GetDistrictData(selectedCityId).then(function (data) { var flag = data.data.success; if (flag) { $scope.DistrictData = data.data.data; $scope.selectedDistrict = baseService.getSelectedDataMapper($scope.DistrictData, ‘district‘); } }, null); } $scope.GetCompanyList = function () { var selectedDistrictId; if ($scope.selectedDistrict != undefined) selectedDistrictId = $scope.selectedDistrict.id; else return; //公司绑定 collectorService.GetCompanyData(selectedDistrictId).then(function (data) { var flag = data.data.success; if (flag) { $scope.CompanyData = data.data.data; $scope.selectedCompany = baseService.getSelectedDataMapper($scope.CompanyData, ‘company‘); } }, null); } $scope.GetMachineList = function () { var selectedCompanyId; if ($scope.selectedCompany != undefined) selectedCompanyId = $scope.selectedCompany.id; else return; //设备绑定 collectorService.GetMachineList(selectedCompanyId).then(function (data) { var flag = data.data.success; if (flag) { $scope.MachineData = data.data.data; $scope.selectedMachine = baseService.getSelectedDataMapper($scope.MachineData, ‘machine‘); } }, null); } //获取实时数据 $scope.GetRealTimeDataByMachine = function () { timeCheck($scope.starttime, $scope.endtime); var starttimeFmt = timeFmt($scope.starttime); var endtimeFmt = timeFmt($scope.endtime); //获取实时数据 var machineId = $scope.selectedMachine.machine_id; collectorService.GetRealDataList(machineId).then(function (data) { var flag = data.data.success; if (flag) { $scope.RealTimeData = data.data.data; } }, null); //获取列表数据 collectorService.GetHistoryDataList(machineId,starttimeFmt,endtimeFmt).then(function (data) { var flag = data.data.success; if(flag) { $scope.HistoryData = data.data.data; $scope.gridOptions.data = data.data.list; } }, null); //将级联列表项放到cookie中,以便于之后的操作简易化 var expireDate = new Date(); expireDate.setDate(expireDate.getDate() + 7); delete $cookies[‘frontselection‘]; var cookieData = JSON.stringify({ province: $scope.selectedProvince, city: $scope.selectedCity, district: $scope.selectedDistrict, company: $scope.selectedCompany, machine: $scope.selectedMachine }); $cookies.put(‘frontselection‘, cookieData, { ‘expires‘: expireDate }); } $scope.ClickToGetParamDataList = function (paramId) { timeCheck($scope.starttime,$scope.endtime); var starttimeFmt = timeFmt($scope.starttime); var endtimeFmt = timeFmt($scope.endtime); var machineId = $scope.selectedMachine.machine_id; collectorService.GetHistoryDataListByParamId(machineId, paramId, starttimeFmt, endtimeFmt).then(function (data) { var flag = data.data.success; if (flag) { $scope.gridOptions.data = data.data.list; } }); } //显示隐藏时间段选择 $scope.ClickToShowTimePicker = function () { $scope.visible = !$scope.visible; } $scope.onTimeSet = function (newDate, oldDate) { var startTimeFmt = moment($scope.starttime).format("YYYY-MM-DD"); var endTimeFmt = moment(startTimeFmt).add(1, ‘day‘).format("YYYY-MM-DD"); //时间框置空 $("#endtime input").val(""); //移除原有的datetimepicker对象 $("#endContainer").children().remove(); //设置config $scope.config = { dropdownSelector: "#endtime", startView: "day", minView: "day" }; //动态编译datetimepicker directive var compiledeHTML = $compile(‘<datetimepicker data-ng-model="endtime" data-before-render="beforeRender($view, $dates, $leftDate, $upDate, $rightDate)" data-datetimepicker-config="{{config}}" />‘)($scope); //放入html容器 $("#endContainer").append(compiledeHTML); } //接收事件,并重置页面 $scope.$on(‘days-check‘, function (e, d) { for (var i = 0; i < d.length; i++) { //初始设置为不可选状态,不选中状态 d[i].active = false; d[i].selectable = false; //当前loop的值 var currentDate = moment(d[i].utcDateValue).format("YYYY-MM-DD"); //当前选定的开始时间 var startTimeFmt = moment($scope.starttime).format("YYYY-MM-DD"); //允许选定的最大的结束时间 var endTimeFmt = moment(startTimeFmt).add(1, ‘day‘).format("YYYY-MM-DD"); //比较并设置可选日期 if (currentDate >= startTimeFmt && currentDate <= endTimeFmt) { d[i].selectable = true; } } }); //当选择开始时间,会进入onTimeSet事件,执行到$compile的时候,就会触发下面的beforeRender事件 //触发beforeReder事件后,会抛出一个days-check事件出去,并附带所有的当页时间对象。 $scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) { $timeout(function () { $scope.$broadcast(‘days-check‘, $dates); }); } var timeCheck = function(start,end) { if (start == null && end!=null) { art.dialog({ title: ‘提示‘, icon: ‘error‘, time: 6, content: "必须选择开始日期,请重试!", padding: 0 }); return; } if (start!=null && end == null) { art.dialog({ title: ‘提示‘, icon: ‘error‘, time: 6, content: "必须选择结束日期,请重试!", padding: 0 }); return; } if (start != null && end != null && start > end) { art.dialog({ title: ‘提示‘, icon: ‘error‘, time: 6, content: "开始时间不能大于结束时间,请重试!", padding: 0 }); return; } } var timeFmt = function(time) { if (time == null) time = ""; else time = time.toLocaleDateString(); return time; } }]);
以上是关于物联网平台设计心得:DateTimePicker实现选择联动的主要内容,如果未能解决你的问题,请参考以下文章