<!DOCTYPE html>
|
<html lang="en" class="full-height">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>百度地图</title>
|
<link rel="stylesheet" href="../css/basic.css">
|
<link rel="stylesheet" href="../src/css/layui.css">
|
<link rel="stylesheet" href="../app/css/common.css">
|
<link rel="stylesheet" href="../app/css/map.css">
|
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
|
</head>
|
<body class="full-height">
|
<div class="rel-full">
|
<div class="page-header bg-gay3">
|
<div class="layui-row h40">
|
<div class="layui-col-xs12 layui-col-md12 full-height line-height40">
|
<div class="layui-form mrt4 mrr8" action="">
|
<div class="layui-form-item">
|
<div class="back-his" id="closeIframe">
|
<i class="fa fa-angle-left"></i>
|
</div>
|
<div class="layui-input-block">
|
<input type="text" name="title" id="searchInput" autocomplete="off" placeholder="请输入机房的名称" class="layui-input">
|
</div>
|
<div class="location-his" id="searchBtn">
|
<i class="fa fa-map-marker"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content abs abs-top40">
|
<div class="rel-full">
|
<div id="homeList" class="home-list mrt8 mrr8"></div>
|
</div>
|
|
</div>
|
</div>
|
<script src="../js/jquery-1.8.3.js"></script>
|
<script src="../src/layui.js"></script>
|
<script src="../app/js/common.js"></script>
|
<script>
|
// layui模块
|
layui.use(['layer', 'laytpl', 'form'], function() {
|
var layer = layui.layer; // 获取layer模块
|
var laytpl = layui.laytpl; // 获取laytpl模块
|
var form = layui.form; // 获取form模块
|
var upload = layui.upload; // 获取upload模块
|
|
// 关闭form
|
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
$('#closeIframe').click(function() { // 设置点击按钮关闭当前iframe
|
parent.layer.close(index);
|
});
|
|
// 获取所有机房的列表
|
var homeSource = [
|
{label: '湖北-武汉-东西湖区-测试机房1'}
|
,{label: '湖北-武汉-东西湖区-测试机房5'}
|
,{label: '湖北-武汉-东西湖区-测试机房6'}
|
,{label: '湖北-武汉-东西湖区-测试机房7'}
|
,{label: '湖北-武汉-东西湖区-测试机房8'}
|
,{label: '湖北-武汉-东西湖区-测试机房9'}
|
,{label: '湖北-武汉-东西湖区-测试机房10'}
|
,{label: '广西-百色-呵呵区-测试机房1'}
|
,{label: '广西-百色-呵呵区-测试机房2'}
|
,{label: '广西-百色-呵呵区-测试机房3'}
|
,{label: '广西-百色-呵呵区-测试机房4'}
|
];
|
|
createHomeList($('#homeList'), homeSource);
|
|
var checkHomeData = new CheckData();
|
checkHomeData.setSource(homeSource);
|
|
// 更改文本框的值获取
|
$('#searchInput').on('input propertychange', function() {
|
var _val = $(this).val();
|
$(this).data('homeInfo', '');
|
// console.log($(this).data('homeInfo'));
|
var data = checkHomeData.getData(_val);
|
createHomeList($('#homeList'), data);
|
});
|
|
// 点击查询获取homeInfo的值
|
$('#searchBtn').on('click', function() {
|
var homeInfo = $('#searchInput').data('homeInfo');
|
if(homeInfo) {
|
console.log(homeInfo);
|
}else {
|
layer.msg('请选择下方的机房');
|
}
|
});
|
|
// 点击机房列表触发
|
$('#homeList').on('click', '.home-item', function() {
|
var homeInfo = $(this).data('homeInfo');
|
// 激活选中的行
|
$('#homeList .home-item').removeClass('ac-this');
|
$(this).addClass('ac-this');
|
// 获取机房信息定位机房
|
if(homeInfo.label.length!=0) {
|
$('#searchInput').val(homeInfo.label);
|
$('#searchInput').data('homeInfo', homeInfo);
|
}else {
|
$('#searchInput').data('homeInfo', '');
|
}
|
});
|
|
// 根据数据生成列表
|
function createHomeList(ele, data) {
|
// 清空列表
|
ele.text('');
|
|
// 设置默认的data值
|
var defaultData = [
|
{label: ''}
|
,{label: ''}
|
,{label: ''}
|
,{label: ''}
|
,{label: ''}
|
,{label: ''}
|
];
|
if(data.length == 0) {
|
data = defaultData;
|
}
|
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var homeItem = $('<div class="home-item"></div>');
|
var homeIcon = $('<span class="home-item-icon fa fa-home"></span>');
|
var homeTxt = $('<span class="home-item-txt">'+_data.label+'</span>');
|
if(_data.label.length != 0) {
|
homeItem.append(homeIcon);
|
}
|
|
homeItem.append(homeTxt);
|
homeItem.data('homeInfo', _data);
|
|
ele.append(homeItem);
|
ele.append('<hr class="layui-bg-gray">')
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
