DataGear 製做省/市二級聯動下拉框看板表單

經過DataGear的自定義圖表功能，能夠很方便地製做省/市二級聯動下拉框看板表單。javascript

首先，新建兩個下拉框所需的數據集：css

第一個是省級下拉框所需數據集，以以下的CSV數據集爲例：html

name, value
北京, bj
河北, hb
山東, sd
江蘇, js

第二個是市級下拉框所需數據集，以以下SQL數據集爲例：java

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

這是一個參數化SQL數據集，參數爲：git

名稱    類型     必填
省份    字符串   是

T_CITY表數據示例：sql

NAME,   VALUE,   PARENT
東城區, dc,      bj
海淀區, hd,      bj
石家莊, sjz,     hb
廊坊,   lf,      hb
濟南,   jn,      sd
德州,   dz,      sd
南京,   nj,      js
蘇州,   sz,      js
...

使用上述兩個數據集新建兩個自定義圖表：app

圖表類型：自定義
數據集列標記：無需標記

圖表類型：自定義
數據集列標記：無需標記

而後，新建可視化看板，填寫以下看板模板內容：this

<!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>

點擊[保存並展現]按鈕，打開看板展現頁面，完成！！！spa

效果圖以下所示：code

官網地址：http://www.datagear.tech

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

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