...
|
...
|
@@ -78,6 +78,14 @@ function toggleDistItem() { |
|
|
}
|
|
|
}
|
|
|
|
|
|
// 设置请求URL
|
|
|
function setRequestUrl(config, areaId) {
|
|
|
var urlArr = config.url.split(config.resources + '/');
|
|
|
|
|
|
urlArr[1] = areaId;
|
|
|
return urlArr.join(config.resources + '/');
|
|
|
}
|
|
|
|
|
|
// 重置下一级文本显示和值
|
|
|
function resetNextLevel(level, config) {
|
|
|
$('#level_' + level + '_panel').empty()
|
...
|
...
|
@@ -88,23 +96,57 @@ function resetNextLevel(level, config) { |
|
|
.next().val('');
|
|
|
}
|
|
|
|
|
|
// 选择特定省份,城市,或区县
|
|
|
function selectDistItem(options) {
|
|
|
var level = options.level, // 当前级别
|
|
|
distElement = options.target, // 选择特定项
|
|
|
currAreaId = distElement.attr('id').split('_')[1], // 当前选择areaId
|
|
|
distItem = $('#level_' + level + '_panel').prev(), // 请选择...
|
|
|
currPanel = options.panel, // 当前区域列表项
|
|
|
distItemAreaId = options.distItemAreaId, // 当前选中areaId
|
|
|
config = options.config;
|
|
|
|
|
|
if (distElement.hasClass('checked')) {
|
|
|
// TODO
|
|
|
// distElement.removeClass('checked');
|
|
|
} else {
|
|
|
currPanel.find('span.checked').removeClass('checked').prev().hide();
|
|
|
distElement.addClass('checked').prev().show();
|
|
|
distItem.find('.indicator-name')
|
|
|
.html(distElement.text())
|
|
|
.next()
|
|
|
.val(currAreaId);
|
|
|
|
|
|
// 填充下一级
|
|
|
if (level < 0) {
|
|
|
level = distElement.parents('.items-panel').attr('id').split('_')[1];
|
|
|
}
|
|
|
|
|
|
config.url = setRequestUrl(config, currAreaId);
|
|
|
|
|
|
// 选择之后关闭当前panel
|
|
|
// distItem.trigger('click');
|
|
|
|
|
|
// 当前点击的和已选择的不同,再渲染下一级目录
|
|
|
if (level && distItemAreaId !== currAreaId) {
|
|
|
resetNextLevel(level - 1, config);
|
|
|
$(config.el).trigger('ca.afterInit', [config, level - 1]);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 获取初始化数据
|
|
|
function fetchInitialData(evt, config, level) {
|
|
|
var distItem, // 请选择...
|
|
|
distItemAreaId = $('.items-indicator .open input').val(),
|
|
|
var distItemAreaId = $('.items-indicator .open input').val(),
|
|
|
ajaxSettings = $.extend({}, config.ajaxSettings, {
|
|
|
url: config.url
|
|
|
});
|
|
|
|
|
|
var ulElement = $('<ul/>'),
|
|
|
liElement,
|
|
|
distElement;
|
|
|
liElement;
|
|
|
|
|
|
var urlArr;
|
|
|
|
|
|
// 当前选中区域id
|
|
|
var currAreaId,
|
|
|
currPanel;
|
|
|
// 当前选中区域列表
|
|
|
var currPanel;
|
|
|
|
|
|
$.ajax(ajaxSettings).done(function(res) {
|
|
|
// 渲染后台区域信息列表
|
...
|
...
|
@@ -130,40 +172,117 @@ function fetchInitialData(evt, config, level) { |
|
|
|
|
|
// 选择区域
|
|
|
currPanel.off('click', '.dist-name').on('click', '.dist-name', function() {
|
|
|
distElement = $(this);
|
|
|
currAreaId = distElement.attr('id').split('_')[1];
|
|
|
distItem = $('#level_' + level + '_panel').prev();
|
|
|
selectDistItem({
|
|
|
level: level,
|
|
|
target: $(this),
|
|
|
panel: currPanel,
|
|
|
distItemAreaId: distItemAreaId,
|
|
|
config: config
|
|
|
});
|
|
|
|
|
|
// distElement = $(this);
|
|
|
// currAreaId = distElement.attr('id').split('_')[1];
|
|
|
// distItem = $('#level_' + level + '_panel').prev();
|
|
|
|
|
|
// if (distElement.hasClass('checked')) {
|
|
|
// // TODO
|
|
|
// // distElement.removeClass('checked');
|
|
|
// } else {
|
|
|
// currPanel.find('span.checked').removeClass('checked').prev().hide();
|
|
|
// distElement.addClass('checked').prev().show();
|
|
|
// distItem.find('.indicator-name')
|
|
|
// .html(distElement.text())
|
|
|
// .next()
|
|
|
// .val(currAreaId);
|
|
|
|
|
|
// // 填充下一级
|
|
|
// if (level < 0) {
|
|
|
// level = distElement.parents('.items-panel').attr('id').split('_')[1];
|
|
|
// }
|
|
|
|
|
|
// config.url = setRequestUrl(config, currAreaId);
|
|
|
|
|
|
// // 选择之后关闭当前panel
|
|
|
// // distItem.trigger('click');
|
|
|
|
|
|
// // 当前点击的和已选择的不同,再渲染下一级目录
|
|
|
// if (level && distItemAreaId !== currAreaId) {
|
|
|
// resetNextLevel(level - 1, config);
|
|
|
// $(config.el).trigger('ca.afterInit', [config, level - 1]);
|
|
|
// }
|
|
|
// }
|
|
|
});
|
|
|
}).fail(function() {
|
|
|
// 如果出错,将下级所有都重置
|
|
|
var from = level;
|
|
|
|
|
|
if (distElement.hasClass('checked')) {
|
|
|
// TODO
|
|
|
// distElement.removeClass('checked');
|
|
|
while (from >= 0) {
|
|
|
resetNextLevel(from, config);
|
|
|
from--;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 设置地址
|
|
|
function setAddress(evt, config, level, areaId) {
|
|
|
var ajaxSettings = $.extend({}, config.ajaxSettings, {
|
|
|
url: config.url
|
|
|
}),
|
|
|
liElement,
|
|
|
ulElement = $('<ul/>'),
|
|
|
currPanel,
|
|
|
label,
|
|
|
distVal,
|
|
|
distItemAreaId = $('.items-indicator .open input').val();
|
|
|
|
|
|
|
|
|
$.ajax(ajaxSettings).done(function(res) {
|
|
|
$(res.data).each(function(index, item) {
|
|
|
liElement = $('<li/>');
|
|
|
|
|
|
// 设置目标区域check状态
|
|
|
if (item.value === areaId) {
|
|
|
label = item.text;
|
|
|
distVal = item.value;
|
|
|
|
|
|
$('<span class="check-icon iconfont" style="display: inline;"></span>').appendTo(liElement);
|
|
|
$('<span/>', {
|
|
|
class: 'dist-name checked',
|
|
|
title: label,
|
|
|
text: label,
|
|
|
id: 'area_' + item.value
|
|
|
}).appendTo(liElement);
|
|
|
} else {
|
|
|
currPanel.find('span.checked').removeClass('checked').prev().hide();
|
|
|
distElement.addClass('checked').prev().show();
|
|
|
distItem.find('.indicator-name')
|
|
|
.html(distElement.text())
|
|
|
.next()
|
|
|
.val(currAreaId);
|
|
|
|
|
|
// 填充下一级
|
|
|
if (level < 0) {
|
|
|
level = distElement.parents('.items-panel').attr('id').split('_')[1];
|
|
|
}
|
|
|
|
|
|
urlArr = config.url.split(config.resources + '/');
|
|
|
urlArr[1] = currAreaId;
|
|
|
config.url = urlArr.join(config.resources + '/');
|
|
|
|
|
|
// 选择之后关闭当前panel
|
|
|
// distItem.trigger('click');
|
|
|
|
|
|
// 当前点击的和已选择的不同,再渲染下一级目录
|
|
|
if (level && distItemAreaId !== currAreaId) {
|
|
|
resetNextLevel(level - 1, config);
|
|
|
$(config.el).trigger('ca.afterInit', [config, level - 1]);
|
|
|
}
|
|
|
$('<span class="check-icon iconfont"></span>').appendTo(liElement);
|
|
|
$('<span/>', {
|
|
|
class: 'dist-name',
|
|
|
title: item.text,
|
|
|
text: item.text,
|
|
|
id: 'area_' + item.value
|
|
|
}).appendTo(liElement);
|
|
|
}
|
|
|
|
|
|
liElement.appendTo(ulElement);
|
|
|
|
|
|
ulElement.appendTo($(config.el).find('#level_' + level + '_panel').empty().removeClass('empty'));
|
|
|
});
|
|
|
|
|
|
// 设置label文本 和 设置areaId
|
|
|
currPanel = $('#level_' + level + '_panel');
|
|
|
currPanel.prev().find('.indicator-name').text(label)
|
|
|
.next().val(distVal);
|
|
|
|
|
|
// 侦听选择
|
|
|
currPanel.off('click', '.dist-name').on('click', '.dist-name', function() {
|
|
|
selectDistItem({
|
|
|
level: level,
|
|
|
target: $(this),
|
|
|
panel: currPanel,
|
|
|
distItemAreaId: distItemAreaId,
|
|
|
config: config
|
|
|
});
|
|
|
});
|
|
|
|
|
|
}).fail(function() {
|
|
|
// 如果出错,将下级所有都重置
|
|
|
var from = level;
|
...
|
...
|
@@ -185,6 +304,7 @@ function CascadingAddress(options) { |
|
|
|
|
|
element.on('ca.afterInit', fetchInitialData);
|
|
|
element.on('click', '.dist-item', toggleDistItem);
|
|
|
element.on('ca.setAddr', setAddress);
|
|
|
|
|
|
// 绑定自定义事件处理
|
|
|
$.each(widget.config, function(key, value) {
|
...
|
...
|
@@ -274,6 +394,83 @@ CascadingAddress.prototype.init = function() { |
|
|
el.trigger('ca.onCreated');
|
|
|
};
|
|
|
|
|
|
// 获取地址文本
|
|
|
CascadingAddress.prototype.getAreaLabels = function() {
|
|
|
var el = $(this.config.el),
|
|
|
result = [];
|
|
|
|
|
|
el.find('.indicator-name').each(function() {
|
|
|
if ($(this).next().val() !== '') {
|
|
|
result.push($(this).text());
|
|
|
}
|
|
|
});
|
|
|
|
|
|
return result.join(',');
|
|
|
};
|
|
|
|
|
|
// 获取地址ID
|
|
|
CascadingAddress.prototype.getAreaIds = function() {
|
|
|
var el = $(this.config.el),
|
|
|
result = [],
|
|
|
target;
|
|
|
|
|
|
el.find('input').each(function() {
|
|
|
target = $(this);
|
|
|
if (target.val() !== '') {
|
|
|
result.push($(this).val());
|
|
|
}
|
|
|
});
|
|
|
|
|
|
if (result.length) {
|
|
|
return result.join(',');
|
|
|
} else {
|
|
|
return '';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 设置区域
|
|
|
// {
|
|
|
// "province": "32",
|
|
|
// "city": "3201",
|
|
|
// "dist": "320102"
|
|
|
// }
|
|
|
CascadingAddress.prototype.setAddress = function(targetAddr) {
|
|
|
var key,
|
|
|
distIds = ['0'], // 省份请求areaId=0
|
|
|
distLen,
|
|
|
cursor, // 游标
|
|
|
currentLevels = $('.items-indicator>li').length, // 目前存在几级
|
|
|
areaId, // 请求areaId
|
|
|
defaultId, // 设置areaId
|
|
|
config = this.config,
|
|
|
$el = $(config.el);
|
|
|
|
|
|
if (typeof targetAddr === 'object') {
|
|
|
for (key in targetAddr) {
|
|
|
if(targetAddr.hasOwnProperty(key)) {
|
|
|
distIds.push(targetAddr[key]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 标识需要渲染几级
|
|
|
distLen = distIds.sort().length;
|
|
|
cursor = distLen;
|
|
|
|
|
|
// 最后一个level是0
|
|
|
while (distLen > 1) {
|
|
|
// 请求从array[0], 判断值从array[1]
|
|
|
areaId = distIds[cursor - distLen];
|
|
|
defaultId = distIds[cursor - distLen + 1];
|
|
|
config.url = setRequestUrl(config, areaId);
|
|
|
$el.trigger('ca.setAddr', [config, currentLevels - 1, defaultId]);
|
|
|
distLen--;
|
|
|
currentLevels--;
|
|
|
}
|
|
|
} else {
|
|
|
console.error('target address must be a json object');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
module.exports = function(options) {
|
|
|
return new CascadingAddress(options);
|
|
|
}; |
...
|
...
|
|