<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui11</title>
<meta name="renderer" content="webkit">
<!-- 初始缩放比例设置为1.0-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="refresh" content="0;url=#">-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 引入 layui.css -->
<link href="../resource/layui-v2.9.0/layui-v2.9.0/layui/css/layui.css" rel="stylesheet">
<link href="../css/step.css" rel="stylesheet">
</head>
<body>
<div>
<span class="span-14" style=" margin-top: 0%;">
<span style="color: red; font-size: 20px;">﹡</span>
<span style="margin-left: -0.5%; margin-top: 0.6%;">选择地区</span>
</span>
<div style="margin-left: 10px; width: 52%;height:58px">
<input class="input-5-noWidth" type="text" placeholder="请输入"
name="expressDeliveryAreaInput"
id="expressDeliveryAreaInput" style="" lay-filter="areaChange">
<br/>
</div>
</div>
<script src="../resource/layui-v2.9.0/layui-v2.9.0/layui/layui.js"></script>
<script>
//选择地区的选项框
layui.config({
base: './ext/'
}).extend({
cascader: 'cascader/cascader'
}).use(['form', 'jquery', 'cascader'], function () {
var $ = layui.jquery, cascader = layui.cascader, form = layui.form;
// 发起Ajax请求获取地区数据
$.ajax({
url: '/pipePermit/district',
type: 'GET',
dataType: 'json',
success: function (data) {
// 请求成功的回调函数
console.log(data); // 可以根据需要进行处理，这里只是简单打印返回的数据
// 将地区数据进行处理，转换为级联选择器需要的格式
var processedData = processData(data);
// 在这里进行级联选择器的渲染操作
cascader.render({
elem: $('input[name=expressDeliveryAreaInput]')[0],
multiple: false,
showAllLevels: true,
separator: "/",
valueSeparator: ",",
groupSeparator: "|",
props: {
label: 'district',
value: 'districtId',
children: 'children'
},
options: processedData,
position: "bottom" // 将弹出面板的位置设置为底部
});
},
error: function (xhr, status, error) {
// 请求失败的回调函数
console.error(error); // 可以根据需要进行错误处理
}
});
// 将地区数据进行处理，转换为级联选择器需要的格式的函数
function processData(areaData) {
var processedData = [];
var districtMap = {};
// 第一次遍历，创建地区对象的映射关系
for (var i = 0; i < areaData.length; i++) {
var district = areaData[i];
districtMap[district.districtId] = district;
district.children = [];
}
// 第二次遍历，构建地区树状结构
for (var i = 0; i < areaData.length; i++) {
var district = areaData[i];
var parent = districtMap[district.pid];
if (parent) {
parent.children.push(district);
} else {
processedData.push(district);
}
}
return processedData;
}
});
</script>
</body>
</html>
