物联网平台设计心得：五级联动及记忆恢复
在设计物联网平台的时候，涉及到一个五级联动的问题，操做顺序以下：依次选择 所属省份，所属市县，所属地区，所属公司，设备名称。在使用Jquery时代，作好这个其实很容易，可是稍显繁琐，而且得很好的处理上一级下拉列表选中，而后触发下一级下拉列表加载数据的问题。相比使用Angularjs而言，代码量大并且繁琐，而且还得处理好顺序加载的问题。本节咱们就看看Angularjs能给咱们带来怎么样的体验吧。本文成文仓促，讲解不免会有谬误，还请见谅。html
五级联动的设计angularjs
因为省份，市县，地区，公司四张表，在数据库中的设计基本一致，咱们就专门为这四种下拉列表设计一个公共的模板出来。数据库
app.directive('sectorPart', [function() {
return {
restrict: 'AE',
replace: true,
scope: { options: "=" },
template: '<select class="form-control" ng-options="item as item.name for item in options" name="state" style="width:220px;height:33px;">'
+ '<option value="">请选择</option>'
+ '</select>'
};
}]);
因为设备表中的数据字段类型不太一致，因此这里咱们专门为设备设计一种下拉列表模板：浏览器
app.directive('sectorMachine', [function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=" },
template: '<select class="form-control" ng-options="item as item.machine_name for item in options" name="state" style="width:220px;height:33px;">'
+ '<option value="">请选择</option>'
+ '</select>'
};
}]);
好了，模板都设计完毕了，咱们接下来将模板(Directive)应用到页面中：cookie
<div class="searchcontainer">
<div class="row">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">所属省份：</span>
<sector-part options="ProvinceData" ng-model="selectedProvince" ng-change="GetCityList()"></sector-part>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">所属市县：</span>
<sector-part options="CityData" ng-model="selectedCity" ng-change="GetDistrictList()"></sector-part>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">所属地区：</span>
<sector-part options="DistrictData" ng-model="selectedDistrict" ng-change="GetCompanyList()"></sector-part>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">所属公司：</span>
<sector-part options="CompanyData" ng-model="selectedCompany" ng-change="GetMachineList()"></sector-part>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">设备名称：</span>
<sector-machine options="MachineData" ng-model="selectedMachine" ng-change="RefreshPage()"></sector-machine>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<button class="btn btn-success" ng-click="LoadControllerList()" style="height:33px;line-height:16px;width:315px;">点击加载</button>
</div>
</div>
</div>
</div>
从HTML模板中，咱们能够看到如下几个关键点：options是我传入到下拉列表的数据，下拉列表会根据options的值来加载列表并显示；ng-model是我选中的项，一旦有列表被选中，就会将数据传递到这个model中；ng-change是下拉列表被选中的时候触发的事件。app
最后让咱们来看看Controller中的写法吧：less
app.controller('collectorController', ['$scope', '$cookies', '$timeout','$compile', 'baseService', 'collectorService', 'uiGridConstants', function ($scope, $cookies,$timeout,$compile, baseService, collectorService, uiGridConstants) {
var self = this;
$scope.selectedProvince = null;
$scope.selectedCity = null;
$scope.selectedDistrict = null;
$scope.selectedCompany = null;
$scope.selectedMachine = null;
//省份绑定
collectorService.GetProvinceData().then(function (data) {
var flag = data.data.success;
if (flag) {
$scope.ProvinceData = data.data.data;
}
}, 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;
}
}, 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;
}
}, null);
}
$scope.GetCompanyList = function () {
var selectedDistrictId;
if ($scope.selectedDistrict != undefined)
else
return;
//公司绑定
collectorService.GetCompanyData(selectedDistrictId).then(function (data) {
var flag = data.data.success;
if (flag) {
$scope.CompanyData = data.data.data;
}
}, 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;
}
}, null);
}
}]);
看上去是否是挺简洁的。反正这些方法的触发都是根据ng-change来进行的。而后ng-model因为是mvvm模式，因此一旦选中项改变，会自动被传到controller中来。至于collectorService就是一个简单的获取数据的service而已，这里不是主要的，我简单的贴一下：mvvm
app.service('collectorService', ['$http', function ($http) {
var provinceData = function () {
return $http({
method: 'POST',
url: '/Process/GetLocationList?provinceid=-1&cityid=-1'
});
}
var cityData = function (provinceId) {
return $http({
method: 'POST',
url: '/Process/GetLocationList?provinceid=' + provinceId + '&cityid=-1'
});
}
var districtData = function (cityId) {
return $http({
method: 'POST',
url: '/Process/GetLocationList?provinceid=-1&cityid=' + cityId
});
}
var companyData = function (districtId) {
return $http({
method: 'POST',
url: '/BaseData/GetSchoolByDistrictId?districtId=' + districtId
});
}
var machineList = function (companyId) {
return $http({
method: 'POST',
url: '/Machine/GetMachineBy?companyId=' + companyId + '&isController=0'
});
}
return {
GetProvinceData: provinceData,
GetCityData: cityData,
GetDistrictData: districtData,
GetCompanyData: companyData,
GetMachineList: machineList
};
}]);
好了，以上就是五级联动了。咱们能够一级一级的点下去了。是否是很方便呢？操做图展现：ui
五级联动记忆恢复this
在实际使用的时候，有的用户反映，五级联动选择很麻烦，须要一个一个的点，若是能记忆上次的选择项就行了。这样就能够不用费力的每次都点击了。基于此种用户需求，我决定利用cookie来记忆用户上次的选择内容，而后在下次浏览的时候，来载入以前的浏览记录。下面咱们来分析一下如何可以作到自动的根据已有记录逐级加载下来列表并选中。
首先，咱们须要将数据保存到cookie中。
其次，咱们须要监视列表选项的变化，这里咱们能够用$watchcollection方法。
最后，列表选项变化后，咱们就须要依据选中内容，加载下级列表，因此这里咱们须要多selectedProvice,selectedCity等变量赋值。
明白了这些步骤，下面咱们进行改造：
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.$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();
});
//省份绑定
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 () {
//将级联列表项放到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 });
}
}]);
能够看出，咱们在点击最后的加载按钮的时候，把cookie存储到了浏览器中。而后在页面进入的时候，咱们先加载了省份列表，省份列表加载成功后，咱们立刻从cookie中拿出上次选中的省份，而后给selectedProvice赋值，这个赋值动做会立刻触发$watchcollection中的动做，而后进行市县的绑定。一级一级的触发，直到最后。
有人会问，那个baseService是干什么的。因为我将$scope.selectedProvince,$scope.selectedCity等对象直接保存到了cookie中，在取出来的时候，我发现这些entity已经变了，entity内部会自动多出来一个_hashcode的属性，致使和原来的entity有差异，这就会致使angularjs没法经过验证，我必须经过baseService的方法，来还原出原来的selectedProvice等对象才行。
app.service('baseService', ['$cookies', function ($cookies) {
//获取比对数据并赋值
//type: province,city,district,company,machine
var selectionMapper = function (sourceData, type) {
//从cookie获取值
var collectorSelectionFromCookie = $cookies.get('frontselection');
if (collectorSelectionFromCookie != undefined) {
//若是cookie存在，则进行解析
collectorSelectionFromCookie = JSON.parse($cookies.get('frontselection'));
for (var i = 0; i < sourceData.length; i++) {
var current = sourceData[i];
if (type == "province") {
if (current.id == collectorSelectionFromCookie.province.id) {
return current;
}
}
if (type == "city") {
if (current.id == collectorSelectionFromCookie.city.id) {
return current;
}
}
if (type == "district") {
if (current.id == collectorSelectionFromCookie.district.id) {
return current;
}
}
if (type == "company") {
if (current.id == collectorSelectionFromCookie.company.id) {
return current;
}
}
if (type == "machine") {
if (current.machine_id == collectorSelectionFromCookie.machine.machine_id) {
return current;
}
}
if (type == "monitor") {
if (current.id == collectorSelectionFromCookie.monitor.id) {
return current;
}
}
}
}
return null;
}
return {
getSelectedDataMapper: selectionMapper
};
}]);
最后咱们打开页面，看看加载的结果吧：
相关文章
- 1. 物联网平台设计心得：DateTimePicker实现选择联动
- 2. 物联网平台设计心得：图表数据可视化
- 3. 物联网平台架构设计
- 4. 物联网云平台系统设计
- 5. 物联网平台_物联网
- 6. 物联网平台
- 7. 物联网平台设计心得：你所不知道的CRC校验
- 8. 工业物联网云平台|物联网设备终端
- 9. 浅谈企业级物联网平台
- 10. 物联网通用支撑平台之接入平台设计
- 更多相关文章...
- • MyBatis级联查询 - MyBatis教程
- • Hibernate的级联与反转 - Hibernate教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 物联网平台设计心得：DateTimePicker实现选择联动
- 2. 物联网平台设计心得：图表数据可视化
- 3. 物联网平台架构设计
- 4. 物联网云平台系统设计
- 5. 物联网平台_物联网
- 6. 物联网平台
- 7. 物联网平台设计心得：你所不知道的CRC校验
- 8. 工业物联网云平台|物联网设备终端
- 9. 浅谈企业级物联网平台
- 10. 物联网通用支撑平台之接入平台设计