DataGear 制作省/市二级联动下拉框看板表单

DataGear

已于 2022-04-24 09:45:29 修改

阅读量802

点赞数

文章标签：数据可视化可视化大数据数据分析 echarts

于 2020-10-18 14:26:21 首次发布

本文链接：https://blog.csdn.net/datagear/article/details/109144639

版权

通过DataGear的自定义图表功能，可以很方便地制作省/市二级联动下拉框看板表单。

首先，新建两个下拉框所需的数据集：
第一个是省级下拉框所需数据集，以如下的CSV数据集为例：

name, value
北京, bj
河北, hb
山东, sd
江苏, js

第二个是市级下拉框所需数据集，以如下SQL数据集为例：

SELECT
	NAME,
	VALUE
FROM
	T_CITY
WHERE
	PARENT = '${province}'

这是一个参数化SQL数据集，参数为：

名称        类型     必填
省份        字符串   是

T_CITY表数据示例：

NAME,   VALUE,   PARENT
东城区, dc,      bj
海淀区, hd,      bj
石家庄, sjz,     hb
廊坊,   lf,      hb
济南,   jn,      sd
德州,   dz,      sd
南京,   nj,      js
苏州,   sz,      js
...

使用上述两个数据集新建两个自定义图表：

图表类型：自定义
数据集列标记：无需标记

图表类型：自定义
数据集列标记：无需标记

然后，新建可视化看板，填写如下看板模板内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.select-province,
.select-city{
    display: inline-block;
    padding: 0.5rem 1rem;
}
select, button{
    padding: 0.5rem 2rem;
    width: 10em;
    font-size: 1.2rem;
}
</style>
<script type='text/javascript'>
//下拉框图表渲染器
var selectChartRender =
{
    render: function(chart)
    {
        var element = chart.elementJquery();
        var options = chart.options();
        
        $("<select />").attr("name", options.name).appendTo(element);
    },
    update: function(chart, results)
    {
        var chartDataSet = chart.chartDataSetMain();
        var datas = chart.resultDatasOf(results, chartDataSet);
        
        var select = $("select", chart.elementJquery());
        select.empty();
        
        for(var i=0; i<datas.length; i++)
        {
            $("<option />").attr("value", datas[i].value).html(datas[i].name)
                .appendTo(select);
        }
    }
};

//省级下拉框初始更新完数据后，联动市级下拉框
var selectProvinceChartListener =
{
    update: function(chart, results)
    {
        $(".select-province select").change();
    }
};

$(document).ready(function()
{
    $(".select-province select").change(function()
    {
        var value = $(this).val();
        
        //设置市级下拉框图表参数，然后刷新图表
        var chart1 = dashboard.chartOf("chart1");
        chart1.dataSetParamValue(0, 0, value);
        chart1.refreshData();
    });
});
</script>
</head>
<body class="dg-dashboard">
<div style="position: absolute;left:1;top:1;font-size:12px;">
	DataGear <br>
	http://www.datagear.tech
</div>
<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div>
<p> </p>
<div style="text-align:center;">
    <form action="" method="POST">
        <div id="chart0" class="select-province" dg-chart-renderer="selectChartRender"
            dg-chart-options="{name:'province'}" dg-chart-listener="selectProvinceChartListener"
            dg-chart-widget="[第一个图表ID]"><!--省份下拉框--></div>
            
        <div id="chart1" class="select-city" dg-chart-renderer="selectChartRender"
            dg-chart-options="{name:'city'}" dg-chart-disable-setting="true"
            dg-chart-widget="[第二个图表ID]"><!--城市下拉框--></div>
            
        <button type="submit">提交</button>
    </form>
</div>
</body>
</html>

点击[保存并展示]按钮，打开看板展示页面，完成！！！

效果图如下所示：
在这里插入图片描述
官网地址：http://www.datagear.tech

源码地址：https://gitee.com/datagear/datagear

大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate

DataGear

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DataGear 制作省/市二级联动下拉框看板表单

通过DataGear的自定义图表功能，可以很方便地制作省/市二级联动下拉框看板表单。首先，新建两个下拉框所需的数据集：第一个是省级下拉框所需数据集，以如下的CSV数据集为例：name, value北京, bj河北, hb山东, sd江苏, js第二个是市级下拉框所需数据集，以如下SQL数据集为例：SELECT NAME, VALUEFROM T_CITYWHERE PARENT = '${province}'这是一个参数化SQL数据集，参数为：名称类型
复制链接

扫一扫