weui.js中的picker自定义实现移动端三级联动、多级联动（省市区联动）
法烨烨
weui中的picker默认组件只有两个，一个默认的picker，只有一级可选项，一个datePicker可以实现年月日联动，但是好多自定义场景需要自定义多级联动。
如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。
此处以省市区三级联动为例。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>\
<link rel="stylesheet" href="js/weui/weui.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/weui/weui.js"></script>
<script>
$(function() {
function setCities() {
//此处手写几个层级关联关系数据源，具体的数据源根据开发环境指定
var provinces = [{
INDEXS: "010",
NAME: "北京",
PARENTID: "CN"
}, {
INDEXS: "120",
NAME: "山东",
PARENTID: "CN"
}];
var cities = [{
INDEXS: "120183",
NAME: "东营市",
PARENTID: "120"
}, {
INDEXS: "120179",
NAME: "济南市",
PARENTID: "120"
},
{
INDEXS: "01043",
NAME: "北京市",
PARENTID: "010"
}
];
var districts = [{
INDEXS: "010415",
NAME: "朝阳区",
PARENTID: "01043"
}, {
INDEXS: "010423",
NAME: "昌平区",
PARENTID: "01043"
},
{
INDEXS: "1201657",
NAME: "东营区东城",
PARENTID: "120183"
}, {
INDEXS: "1000380",
NAME: "东营区西城",
PARENTID: "120183"
},
{
INDEXS: "1201625",
NAME: "槐荫区",
PARENTID: "120179"
}, {
INDEXS: "1201627",
NAME: "历城区",
PARENTID: "120179"
}
];
//根据数据源进行数据关联绑定
city_selects = [];
$.each(provinces, function(i) {
var level1 = {
label: provinces[i].NAME,
value: provinces[i].INDEXS,
children: []
};
$.each(cities, function(j) {
if(provinces[i].INDEXS == cities[j].PARENTID) {
var level2 = {
label: cities[j].NAME,
value: cities[j].INDEXS,
children: []
};
$.each(districts, function(x) {
if(cities[j].INDEXS == districts[x].PARENTID) {
var level3 = {
label: districts[x].NAME,
value: districts[x].INDEXS
};
level2.children.push(level3);
}
});
level1.children.push(level2);
}
});
city_selects.push(level1);
});
return city_selects;
}
$('#test').on('click', function() {
weui.picker(setCities(), {
//此处编写各种属性和事件
onConfirm: function(result) {
console.log(result);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="test"/>
</body>
</html>picker的数据源的结构大概就是有子选项时为{label:"显示值",value:"编号或索引之类",children:[此处为数组，内含子对象，数据格式跟本格式一致，无子选项时children可不存在]}；
如果需要更灵活的自定义方式，可以参考weui.js中的datepicker方法，观察官方是如何进行封装的：
function datePicker(options) {
var defaults = _util2.default.extend({
id: 'datePicker',
onChange: _util2.default.noop,
onConfirm: _util2.default.noop,
start: 2000,
end: 2030,
cron: '* * *'
}, options);
// 兼容原来的 start、end 传 Number 的用法
if (typeof defaults.start === 'number') {
defaults.start = new Date(defaults.start + '/01/01');
} else if (typeof defaults.start === 'string') {
defaults.start = new Date(defaults.start.replace(/-/g, '/'));
}
if (typeof defaults.end === 'number') {
defaults.end = new Date(defaults.end + '/12/31');
} else if (typeof defaults.end === 'string') {
defaults.end = new Date(defaults.end.replace(/-/g, '/'));
}
var findBy = function findBy(array, key, value) {
for (var i = 0, len = array.length; i < len; i++) {
var _obj = array[i];
if (_obj[key] == value) {
return _obj;
}
}
};
var date = [];
var interval = _cron2.default.parse(defaults.cron, defaults.start, defaults.end);
var obj = void 0;
do {
obj = interval.next();
var year = obj.value.getFullYear();
var month = obj.value.getMonth() + 1;
var day = obj.value.getDate();
var Y = findBy(date, 'value', year);
if (!Y) {
Y = {
label: year + '年',
value: year,
children: []
};
date.push(Y);
}
var M = findBy(Y.children, 'value', month);
if (!M) {
M = {
label: month + '月',
value: month,
children: []
};
Y.children.push(M);
}
M.children.push({
label: day + '日',
value: day
});
} while (!obj.done);
return picker(date, defaults);
}
类似资料：