fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit 069033c884ffab507fd9168bca1ec70767aa1097 2 parents f1aa671f 4ea47546

merge

Inline Side-by-side
Showing 3 changed files with 242 additions and 49 deletions
... ... @@ -100,16 +100,6 @@
<p class="title">9. 分页组件</p>
<div style="border: 1px solid #000; height: 200px; padding: 5px;">
<pre>
全局安装json-server
npm i -g json-server
启动
json-server --watch mock/address.json
</pre>
{{{ pagination paginationOpts }}}
</div>
... ... @@ -161,6 +151,7 @@
<p style="margin-top: 20px;">14. 区域/选择地址组件</p>
<div style="padding: 5px; height: 300px;">
<p>使用手册详见yohoblk/public/js/plugins/README.md</p>
<div id="address"></div>
</div>
... ...
### 组件使用手册
1. 地址选择组件
全局安装json-server模拟服务端返回数据
npm i -g json-server
启动
json-server --watch mock/address.json
API使用:
var address = cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
});
获取选择地址文本:
address.getAreaLabels()
获取选择地址areaId:
address.getAreaIds()
设置地址:
address.setAddress({
province: '32', // 省
city: '3201', // 市
dist: '320102' // 区县
});
开发者: 董金虎
... ...
... ... @@ -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,85 @@ 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
});
});
}).fail(function() {
// 如果出错，将下级所有都重置
var from = level;
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/>');
if (distElement.hasClass('checked')) {
// TODO
// distElement.removeClass('checked');
// 设置目标区域check状态
if (item.value === areaId) {
label = item.text;
distVal = item.value;
$('<span class="check-icon iconfont" style="display: inline;">&#xe60b;</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">&#xe60b;</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 +272,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 +362,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);
};
... ...