欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-10 16:21:07
...

通过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 datas = chart.resultDatas(chart.resultFirst(results));
        
        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.getChart("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>

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

效果图如下所示:
DataGear 制作省/市二级联动下拉框看板表单
官网地址:http://www.datagear.tech

项目地址:https://gitee.com/datagear/datagear

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