<script>
var areaData = []
var areaData = new Array();
var districtData = []
var districtData = new Array();
var cityId = ''
var organizationData = []
var organizationData = new Array();
var organizationRepeat = []
var organizationRepeat = new Array();
var organizationID = []
var organizationID = new Array();
//省、直辖市
function areaRender() {
var CaseDom = $('.area');
let current = 1//数据总条数
let pageSize = 100000 //每页显示的条数
var url = `/api/v1/divisionInfo?q=page&pageNo=${current}&pageSize=${pageSize}`
$.ajax({
type: 'Get',
url:url ,
// data: pageParam,
dataType: "json",
success: function (response) {
// 将数据渲染到页面
// Dom.html('');
areaData = response.result.data;
}
})
}
areaRender()
//省下的市、直辖市下的区
function districtRender() {
var url = `/api/v1/divisionInfo?q=list`
$.ajax({
type: 'Get',
url:url ,
// data: pageParam,
dataType: "json",
success: function (response) {
// 将数据渲染到页面
// Dom.html('');
districtData = response.result.data;
drawingRender()
}
})
}
districtRender()
/* 遍历展示省级 */
function drawingRender() {
var Dom = $('.area')
Dom.empty()
$.each(areaData, function(areaIndex, areaValue) {
if (areaValue.parent_id === '') {
//第一个默认展开
if (areaIndex === 0){
cityId = areaValue.record_id
//默认展示北京的机构,右侧数据
drawingOrganization()
var TitleHtml = `
<div>
<div class="kstl" οnclick="clickNav(this)" id=${areaValue.record_id}>
<a>${areaValue.chn_name}</a>
</div>
<div class="ksbd cur" id=${areaValue.record_id}>
<ul class="area${areaValue.record_id}">
</ul>
</div>
</div>
`
} else {
var TitleHtml = `
<div>
<div class="kstl" οnclick="clickNav(this)" id=${areaValue.record_id}>
<a>${areaValue.chn_name}</a>
</div>
<div class="ksbd navItem" id=${areaValue.record_id}>
<ul class="area${areaValue.record_id}">
</ul>
</div>
</div>
`
}
Dom.append(TitleHtml);
drawingDistrictRender(areaIndex,areaValue.record_id)
}
})
}
/* 省下的市,直辖市下的区 */
function drawingDistrictRender (areaIndex,parentId) {
$.each(districtData, function(districtIndex, districtValue) {
//判断归属于那个市
if (districtValue.parent_id === parentId) {
var districtHtml = `
<li class="district" id="${districtValue.record_id}" οnclick="clickDistrict(this)"><a>${districtValue.chn_name}</a></li>
`
}
$( `.area${parentId}`).append(districtHtml);
})
}
/* 点击事件,完成手风琴样式 */
function clickNav(obj){
$(".ksbd").addClass('navItem')
var showEle = $(obj).next()
/* 省、直辖市ID */
cityId = showEle.attr('id')
showEle.removeClass('navItem')
showEle.addClass('cur')
organizationRepeat = []
drawingOrganization()
}
/* 点击省下面的市,直辖市的区 */
function clickDistrict (obj) {
var showEle = $(obj)
cityId = showEle.attr('id')
organizationRepeat = []
drawingOrganization()
}
//右侧部分,机构
function drawingOrganization() {
var Dom = $('.allOrganization')
Dom.empty()
let current = 1//数据总条数
let pageSize = 100000 //每页显示的条数
var url = `/api/v1/organization?q=page&pageNo=${current}&pageSize=${pageSize}&division_info_id=${cityId}`
$.ajax({
type: 'Get',
url:url ,
// data: pageParam,
dataType: "json",
success: function (response) {
// 将数据渲染到页面
// Dom.html('');
organizationData = response.result.data;
var a = []; // 用于接收去除重复元素后的数组
var organizationDispose = []
for(var i = 0; i < organizationData.length; i++){ // 循环遍历数组
if(jQuery.inArray(organizationData[i].division_info_id,a) < 0){ // 判断arr数组中的元素是否存在于a数组种
a.push(organizationData[i].division_info_id); // 不存在则将该元素存放于a数组中
//不重复的数据
organizationDispose.push(organizationData[i])
} else {
//重复的数据
organizationRepeat.push(organizationData[i])
}
}
$.each(organizationDispose, function(organizationIndex, organizationValue) {
var DOMHtml = `
<div class="m_title_green">${organizationValue.division_info.substring(3,organizationValue.division_info.length)}</div>
<div class="m_ctt_green">
<ul class="org${organizationValue.division_info_id}">
<li>
<a target="_blank" href="/organization/${organizationValue.record_id}">${organizationValue.chn_name}</a>
<span>
(三甲, 特色:综合)
</span>
</li>
</ul>
<div class="cls"></div>
</div>
`
Dom.append(DOMHtml);
drawingRepeatRender(organizationValue.division_info_id)
})
}
})
}
//因为右侧机构数据为下图所示,可能会有重复的区,将重复区下的数据放在一个中
function drawingRepeatRender (divisionId) {
$.each(organizationRepeat, function(repeatIndex, repeatValue) {
if (divisionId == repeatValue.division_info_id) {
var repaetHtml = `
<li>
<a target="_blank" href="/organization/${repeatValue.record_id}">${repeatValue.chn_name}</a>
<span>
(三甲, 特色:综合)
</span>
</li>
`
$( `.org${repeatValue.division_info_id}`).append(repaetHtml);
}
})
}
</script>
areaRender(数据
districtRender()数据