weui 日期插件 以及省市区三级联动
效果图：
个人资料
性别
日期
职业
区域
jQuery WeUI
个人资料
--------------------------
//citys-index.js
// jshint ignore: start
// jshint ignore: end
/* global $:true */
/* jshint unused:false*/
+ function ($) {
"use strict";
var defaults;
var raw = []
var that = this
$.ajaxSetup({
async: false
});
//向后台获取省市区信息
$.post("/common/RegionAPI/GetALLRegion", {},function (result) {
raw=result
});
//我这边的数据格式是这样的，js代码中需要根据数据格式做调整
var format = function (data) {
var result = [];
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (/^请选择|市辖区/.test(d.Name)) continue;
result.push(d);
}
if (result.length) return result;
return [];
};
var Sub = function (data) {
if (!data.Sub) return [{ Name: '', Id: data.Id }]; // 可能某些县级市没有区
return format(data.Sub);
};
var getCities = function (d) {
for (var i = 0; i < raw.length; i++) {
if (raw[i].Id === d || raw[i].Name === d) return Sub(raw[i]);
}
return [];
};
var getDistricts = function (p, c) {
for (var i = 0; i < raw.length; i++) {
if (raw[i].Id === p || raw[i].Name === p) {
for (var j = 0; j < raw[i].Sub.length; j++) {
if (raw[i].Sub[j].Id === c || raw[i].Sub[j].Name === c) {
return Sub(raw[i].Sub[j]);
}
}
}
}
};
var parseInitValue = function (val) {
var p, c, d;
var tokens = val.split(' ');
raw.map(function (t) {
if (t.Name === tokens[0]) {
p = t
};
});
p.Sub.map(function (t) {
if (t.Name === tokens[1]) c = t;
})
if (tokens[2]) {
c.Sub.map(function (t) {
if (t.Name === tokens[2]) d = t;
})
}
if (d) return [p.Id, c.Id, d.Id];
return [p.Id, c.Id];
}
$.fn.cityPicker = function (params) {
params = $.extend({}, defaults, params);
return this.each(function () {
var self = this;
var provincesName = raw.map(function (d) {
return d.Name;
});
var provincesCode = raw.map(function (d) {
return d.Id;
});
var initCities = Sub(raw[0]);
var initCitiesName = initCities.map(function (c) {
return c.Name;
});
var initCitiesCode = initCities.map(function (c) {
return c.Id;
});
var initDistricts = Sub(raw[0].Sub[0]);
var initDistrictsName = initDistricts.map(function (c) {
return c.Name;
});
var initDistrictsCode = initDistricts.map(function (c) {
return c.Id;
});
var currentProvince = provincesName[0];
var currentCity = initCitiesName[0];
var currentDistrict = initDistrictsName[0];
var cols = [
{
displayValues: provincesName,
values: provincesCode,
cssClass: "col-province"
},
{
displayValues: initCitiesName,
values: initCitiesCode,
cssClass: "col-city"
}
];
if (params.showDistrict) cols.push({
values: initDistrictsCode,
displayValues: initDistrictsName,
cssClass: "col-district"
});
var config = {
cssClass: "city-picker",
rotateEffect: false, //为了性能
formatValue: function (p, values, displayValues) {
return displayValues.join(' ');
},
onChange: function (picker, values, displayValues) {
var newProvince = picker.cols[0].displayValue;
var newCity;
if (newProvince !== currentProvince) {
var newCities = getCities(newProvince);
newCity = newCities[0].Name;
var newDistricts = getDistricts(newProvince, newCity);
picker.cols[1].replaceValues(newCities.map(function (c) {
return c.Id;
}), newCities.map(function (c) {
return c.Name;
}));
if (params.showDistrict) picker.cols[2].replaceValues(newDistricts.map(function (d) {
return d.Id;
}), newDistricts.map(function (d) {
return d.Name;
}));
currentProvince = newProvince;
currentCity = newCity;
picker.updateValue();
return false; // 因为数据未更新完，所以这里不进行后序的值的处理
} else {
if (params.showDistrict) {
newCity = picker.cols[1].displayValue;
if (newCity !== currentCity) {
var districts = getDistricts(newProvince, newCity);
picker.cols[2].replaceValues(districts.map(function (d) {
return d.Id;
}), districts.map(function (d) {
return d.Name;
}));
currentCity = newCity;
picker.updateValue();
return false; // 因为数据未更新完，所以这里不进行后序的值的处理
}
}
}
//如果最后一列是空的，那么取倒数第二列
var len = (values[values.length - 1] ? values.length - 1 : values.length - 2)
$(self).attr('data-Id', values[len]);
$(self).attr('data-codes', values.join(','));
if (params.onChange) {
params.onChange.call(self, picker, values, displayValues);
}
},
cols: cols
};
if (!this) return;
var p = $.extend({}, params, config);
//计算value
var val = $(this).val();
if (!val) val = '北京 北京市 东城区';
currentProvince = val.split(" ")[0];
currentCity = val.split(" ")[1];
currentDistrict = val.split(" ")[2];
if (val) {
p.value = parseInitValue(val);
if (p.value[0]) {
var cities = getCities(p.value[0]);
p.cols[1].values = cities.map(function (c) {
return c.Id;
});
p.cols[1].displayValues = cities.map(function (c) {
return c.Name;
});
}
if (p.value[1]) {
if (params.showDistrict) {
var dis = getDistricts(p.value[0], p.value[1]);
p.cols[2].values = dis.map(function (d) {
return d.Id;
});
p.cols[2].displayValues = dis.map(function (d) {
return d.Name;
});
}
} else {
if (params.showDistrict) {
var dis = getDistricts(p.value[0], p.cols[1].values[0]);
p.cols[2].values = dis.map(function (d) {
return d.Id;
});
p.cols[2].displayValues = dis.map(function (d) {
return d.Name;
});
}
}
}
$(this).picker(p);
});
};
defaults = $.fn.cityPicker.prototype.defaults = {
showDistrict: true //是否显示地区选择
};
}($);