您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
# 如何使用DataGear制作省/市二级联动下拉框看板表单
## 一、前言
在数据可视化领域，联动交互是提升用户体验的重要手段。省/市二级联动下拉框是典型的级联选择组件，广泛应用于各类数据填报和分析场景。DataGear作为一款开源的数据可视化分析平台，提供了强大的表单设计功能，能够轻松实现此类交互效果。
本文将详细介绍如何使用DataGear 4.5.0版本（当前最新稳定版）制作包含省/市二级联动下拉框的看板表单，涵盖从数据准备到最终实现的完整流程。
## 二、准备工作
### 2.1 环境准备
- 安装JDK 1.8+
- 下载DataGear 4.5.0（官网：https://www.datagear.tech）
- 准备MySQL 5.7+数据库（或其他DataGear支持的数据库）
### 2.2 数据准备
我们需要创建两张表存储省市数据：
```sql
-- 省份表
CREATE TABLE `t_region_province` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
);
-- 城市表
CREATE TABLE `t_region_city` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`province_id` int(11) NOT NULL,
PRIMARY KEY (`id`),
KEY `idx_province` (`province_id`)
);
-- 插入示例数据
INSERT INTO `t_region_province` VALUES
(1,'北京市'),(2,'上海市'),(3,'江苏省'),(4,'浙江省');
INSERT INTO `t_region_city` VALUES
(1,'东城区',1),(2,'西城区',1),(3,'朝阳区',1),
(4,'黄浦区',2),(5,'徐汇区',2),(6,'静安区',2),
(7,'南京市',3),(8,'苏州市',3),(9,'无锡市',3),
(10,'杭州市',4),(11,'宁波市',4),(12,'温州市',4);
SELECT id, name FROM t_region_province ORDER BY id
SELECT id, name FROM t_region_city
WHERE province_id = ${provinceId}
ORDER BY id
provinceId，设置默认值为1（北京市）在HTML编辑器中插入以下代码：
<div class="dg-dashboard-form">
<div class="form-item">
<label>省份：</label>
<select id="provinceSelect"
data-dg-widget="select"
data-dg-dataset="省份数据"
data-option-value="id"
data-option-text="name">
</select>
</div>
<div class="form-item">
<label>城市：</label>
<select id="citySelect"
data-dg-widget="select"
data-dg-dataset="城市数据（按省份）"
data-option-value="id"
data-option-text="name"
data-dg-param-provinceId="">
</select>
</div>
</div>
在【看板资源】中添加JavaScript文件（如linkage.js）：
dashboard.onRender(function(options){
// 获取省份下拉框元素
const provinceSelect = dashboard.widgetOf("provinceSelect");
// 监听省份变化事件
provinceSelect.on("change", function(event){
const provinceId = event.value;
// 更新城市下拉框的参数值
const citySelect = dashboard.widgetOf("citySelect");
citySelect.param("provinceId", provinceId);
// 刷新城市数据
citySelect.refreshData();
});
// 初始加载时触发一次省份变化
provinceSelect.trigger("change");
});
修改省份select元素，添加data-value属性：
<select id="provinceSelect"
data-dg-widget="select"
data-dg-dataset="省份数据"
data-option-value="id"
data-option-text="name"
data-value="3">
</select>
添加CSS文件（如style.css）：
.dg-dashboard-form {
padding: 20px;
background: #f5f5f5;
border-radius: 4px;
}
.form-item {
margin-bottom: 15px;
}
.form-item label {
display: inline-block;
width: 80px;
font-weight: bold;
}
.form-item select {
min-width: 200px;
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
在表单下方添加一个图表，显示选中城市的相关数据：
<div id="cityChart"
data-dg-widget="chart"
data-dg-chart-type="bar"
data-dg-dataset="城市数据（按省份）"
data-dg-param-provinceId=""
data-dg-chart-options="{
'xAxis': {'dataProperty': 'name'},
'yAxis': {},
'series': [{'name': '指标值', 'valueProperty': 'id'}]
}">
</div>
更新JavaScript实现图表联动：
dashboard.onRender(function(options){
const provinceSelect = dashboard.widgetOf("provinceSelect");
const citySelect = dashboard.widgetOf("citySelect");
const cityChart = dashboard.widgetOf("cityChart");
provinceSelect.on("change", function(event){
const provinceId = event.value;
citySelect.param("provinceId", provinceId).refreshData();
cityChart.param("provinceId", provinceId).refreshData();
});
// 城市选择变化时更新图表
citySelect.on("change", function(event){
// 可以添加特定城市的数据筛选逻辑
});
provinceSelect.trigger("change");
});
下拉框不显示数据：
联动不生效：
性能优化：
添加媒体查询使表单适配移动端：
@media (max-width: 768px) {
.form-item label {
display: block;
width: auto;
margin-bottom: 5px;
}
.form-item select {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dg-dashboard-form">
<div class="form-item">
<label>省份：</label>
<select id="provinceSelect"
data-dg-widget="select"
data-dg-dataset="省份数据"
data-option-value="id"
data-option-text="name"
data-value="3">
</select>
</div>
<div class="form-item">
<label>城市：</label>
<select id="citySelect"
data-dg-widget="select"
data-dg-dataset="城市数据（按省份）"
data-option-value="id"
data-option-text="name"
data-dg-param-provinceId="">
</select>
</div>
</div>
<div id="cityChart"
data-dg-widget="chart"
data-dg-chart-type="bar"
data-dg-dataset="城市数据（按省份）"
data-dg-param-provinceId=""
data-dg-chart-options="{
'xAxis': {'dataProperty': 'name'},
'yAxis': {},
'series': [{'name': '指标值', 'valueProperty': 'id'}]
}">
</div>
<script src="linkage.js"></script>
</body>
</html>
dashboard.onRender(function(options){
// 获取所有需要联动的组件
const provinceSelect = dashboard.widgetOf("provinceSelect");
const citySelect = dashboard.widgetOf("citySelect");
const cityChart = dashboard.widgetOf("cityChart");
// 设置城市下拉框加载状态
citySelect.loadingText("加载中...");
// 省份变化处理函数
const handleProvinceChange = function(provinceId){
// 更新城市下拉框参数并刷新
citySelect.param("provinceId", provinceId)
.refreshData()
.loading(true);
// 更新图表参数并刷新
cityChart.param("provinceId", provinceId)
.refreshData();
};
// 监听省份变化
provinceSelect.on("change", function(event){
handleProvinceChange(event.value);
});
// 城市变化处理
citySelect.on("change", function(event){
console.log("当前选择城市ID:", event.value);
});
// 初始加载
handleProvinceChange(provinceSelect.value());
});
通过本文的步骤，我们完成了以下工作： 1. 准备了省市层级数据 2. 配置了参数化数据集 3. 设计了包含联动下拉框的表单 4. 实现了JavaScript交互逻辑 5. 添加了图表联动展示 6. 进行了响应式优化
这种二级联动模式可以扩展应用到更多场景： - 产品分类与子分类联动 - 部门与员工联动选择 - 时间范围分级选择等
DataGear的灵活性和扩展性使得这类交互式看板的开发变得非常简单高效。读者可以根据实际需求，进一步探索更复杂的多级联动和业务逻辑集成。
”`
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。