miniui 级联选择区划
时间: 2023-07-02 19:04:28 浏览: 124
在 miniui 中实现级联选择区划,可以按照以下步骤进行:
1. 在 HTML 中添加两个 miniui 的下拉框控件,一个用于选择省份,一个用于选择城市,如下所示:
```
<div>
<input id="province" class="mini-combobox" data="{url:'/getProvinceList'}" textField="name" valueField="code" onvaluechanged="onProvinceChanged" />
</div>
<div>
<input id="city" class="mini-combobox" textField="name" valueField="code" />
</div>
```
其中,`data` 属性指定了省份列表的数据来源,`textField` 属性指定了显示省份名称的字段,`valueField` 属性指定了省份编码的字段,`onvaluechanged` 属性指定了省份下拉框值改变时的回调函数。
2. 在 JavaScript 中定义 `onProvinceChanged` 函数,用于获取所选省份的编码,并根据该编码获取该省份下的城市列表,并将城市列表绑定到城市下拉框中,如下所示:
```
function onProvinceChanged(e) {
var provinceCode = e.value;
var cityComboBox = mini.get("city");
cityComboBox.load("/getCityList?provinceCode=" + provinceCode);
}
```
其中,`e.value` 表示当前所选省份的编码,`mini.get("city")` 表示获取城市下拉框控件对象,`cityComboBox.load()` 表示加载城市列表数据,`provinceCode` 作为参数传递给后台接口,以获取该省份下的城市列表。
3. 后端需要提供两个接口,一个用于获取省份列表,一个用于获取城市列表。这里只提供伪代码示例:
```
// 获取省份列表
router.get('/getProvinceList', async (ctx, next) => {
const provinces = await Province.findAll({
attributes: ['code', 'name'],
order: [['code', 'ASC']]
});
ctx.body = provinces;
});
// 获取城市列表
router.get('/getCityList', async (ctx, next) => {
const provinceCode = ctx.query.provinceCode;
const cities = await City.findAll({
where: { province_code: provinceCode },
attributes: ['code', 'name'],
order: [['code', 'ASC']]
});
ctx.body = cities;
});
```
其中,`Province` 和 `City` 是 Sequelize 模型,用于映射对应的数据库表。`/getProvinceList` 接口返回省份列表,`/getCityList` 接口根据省份编码查询该省份下的城市列表,并返回城市列表。
阅读全文