java生成三级级联的数据,微信小程序三级级联，自定义json数据源
先上效果图
{{province}} {{city}} {{county}}
选择城市
取消
确定
{{sheng.name}}
{{item.name}}
{{item.name}}
/**index.wxss**/
page{
background-color: rgba(255, 255, 255, 1);
}
.infoText{
margin-top: 20rpx;
text-align: center;
width: 100%;
justify-content: center;
}
picker-view{
background-color: white;
padding: 0;
width: 100%;
height: 380rpx;
bottom: 0;
position: fixed;
}
picker-view-column view{
vertical-align:middle;
font-size: 28rpx;
line-height: 28rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ----------------------------------------- */
.animation-element-wrapper {
display: flex;
position: fixed;
left: 0;
top:0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.animation-element {
display: flex;
position: fixed;
width: 100%;
height: 470rpx;
bottom: 0;
background-color: rgba(255, 255, 255, 1);
}
.animation-button {
margin-top: 20rpx;
top:20rpx;
width: 400rpx;
height: 100rpx;
line-height: 100rpx;
align-items:center;
}
text{
color: #999999;
display: inline-flex;
position: fixed;
margin-top: 20rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
font-size: 34rpx;
font-family: Arial, Helvetica, sans-serif;
}
.left-bt{
left: 30rpx;
}
.right-bt {
right: 30rpx;
}
.line{
display: block;
position: fixed;
height: 1rpx;
width: 100%;
margin-top: 89rpx;
background-color: #eeeeee;
}
function getAreaInfo(callBack){
var str = [{"level":1,"name":"浙江省","pId":0,"id":1},{"level":2,"name":"杭州市","pId":1,"id":2},{"level":3,"name":"西湖区","pId":2,"id":4},{"level":4,"name":"翠苑街道","pId":4,"id":5},{"level":4,"name":"三墩镇","pId":4,"id":7},{"level":3,"name":"江干区","pId":2,"id":8},{"level":3,"name":"拱墅区","pId":2,"id":9},{"level":4,"name":"凯旋街道","pId":8,"id":10},{"level":4,"name":"下沙街道","pId":8,"id":11},{"level":4,"name":"西溪街道","pId":4,"id":12},{"level":4,"name":"古荡街道","pId":4,"id":13},{"level":4,"name":"小河街道","pId":9,"id":14},{"level":4,"name":"湖墅街道","pId":9,"id":15},{"level":4,"name":"上塘街道","pId":9,"id":16}];
callBack(str);
}
module.exports.getAreaInfo = getAreaInfo;
//index.js
//获取应用实例
// var app = getApp()
// var util = require('../../utils/util.js')
var area = require('../../utils/area.js')
var areaInfo = [];//所有省市区县数据
var provinces = [];//省
var citys = [];//城市
var countys = [];//区县
var index = [0, 0, 0];
var cellId;
var t = 0;
var show = false;
var moveY = 200;
Page({
data: {
show: show,
provinces: provinces,
citys: citys,
countys: countys,
value: [0, 0, 0]
},
//滑动事件
bindChange: function (e) {
var val = e.detail.value
// console.log(e)
//判断滑动的是第几个column
//若省份column做了滑动则定位到地级市和区县第一位
if (index[0] != val[0]) {
val[1] = 0;
val[2] = 0;
getCityArr(val[0], this);//获取地级市数据
getCountyInfo(val[0], val[1], this);//获取区县数据
} else { //若省份column未做滑动，地级市做了滑动则定位区县第一位
if (index[1] != val[1]) {
val[2] = 0;
getCountyInfo(val[0], val[1], this);//获取区县数据
}
}
index = val;
console.log(index + " => " + val);
//更新数据
this.setData({
value: [val[0], val[1], val[2]],
province: provinces[val[0]].name,
city: citys[val[1]].name,
county: countys[val[2]].name
})
},
onLoad: function (options) {
cellId = options.cellId;
var that = this;
var date = new Date()
console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");
//获取省市区县数据
area.getAreaInfo(function (arr) {
console.log("arr"+arr)
areaInfo = arr;
//获取省份数据
getProvinceData(that);
});
},
// ------------------- 分割线 --------------------
onReady: function () {
this.animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 0,
timingFunction: "ease",
delay: 0
}
)
this.animation.translateY(200 + 'vh').step();
this.setData({
animation: this.animation.export(),
show: show
})
},
//移动按钮点击事件
translate: function (e) {
if (t == 0) {
moveY = 0;
show = false;
t = 1;
} else {
moveY = 200;
show = true;
t = 0;
}
// this.animation.translate(arr[0], arr[1]).step();
animationEvents(this,moveY, show);
},
//隐藏弹窗浮层
hiddenFloatView(e){
console.log(e);
moveY = 200;
show = true;
t = 0;
animationEvents(this,moveY, show);
},
//页面滑至底部事件
onReachBottom: function () {
// Do something when page reach bottom.
},
})
//动画事件
function animationEvents(that,moveY,show){
console.log("moveY:" + moveY + "\nshow:" + show);
that.animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 400,
timingFunction: "ease",
delay: 0
}
)
that.animation.translateY(moveY + 'vh').step()
that.setData({
animation: that.animation.export(),
show: show
})
}
// ---------------- 分割线 ----------------
//获取省份数据
function getProvinceData(that) {
var s;
provinces = [];
var num = 0;
for (var i = 0; i < areaInfo.length; i++) {
s = areaInfo[i];
if (s.level == "2") {
provinces[num] = s;
num++;
}
}
that.setData({
provinces: provinces
})
//初始化调一次
getCityArr(0, that);
getCountyInfo(0, 0, that);
// that.setData({
// province: "杭州市",
// city: "西湖区",
// county: "翠苑街道",
// })
}
// 获取地级市数据
function getCityArr(count, that) {
var c;
citys = [];
var num = 0;
for (var i = 0; i < areaInfo.length; i++) {
c = areaInfo[i];
if (c.level == "3" && c.pId == provinces[count].id ) {
citys[num] = c;
num++;
}
}
if (citys.length == 0) {
citys[0] = { name: '' };
}
that.setData({
// city: "",
citys: citys,
value: [count, 0, 0]
})
}
// 获取区县数据
function getCountyInfo(column0, column1, that) {
var c;
countys = [];
var num = 0;
for (var i = 0; i < areaInfo.length; i++) {
c = areaInfo[i];
if (c.level == "4" && c.pId == citys[column1].id) {
countys[num] = c;
num++;
}
}
if(countys.length == 0){
countys[0] = {name:''};
}
that.setData({
// county: "",
countys: countys,
value: [column0, column1, 0]
})
}
JSONArray jar = new JSONArray();
List areas = areaMapper.findAllArea();
for (int i = 0; i < areas.size(); i++) {
JSONObject json = new JSONObject();
Area m = areas.get(i);
json.put("id", m.getAreaId());
json.put("pId", m.getParentId());
json.put("name", m.getAreaName());
json.put("level", m.getLevel());
jar.add(json);
}
鉴于微信小程序没有三级级联，所以自己做了一个三级。有些无用代码没有清掉，数据格式是从后来传过来的。
欢迎指正
总结
以上是生活随笔为你收集整理的java生成三级级联的数据,微信小程序三级级联，自定义json数据源的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： emacs php,如何在Emacs中关
- 下一篇： java面向对象之封装,java面向对象