這篇文章主要介紹了如何使用DataGear制作省/市二級聯(lián)動下拉框看板表單，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了尋甸免費(fèi)建站歡迎大家使用！

通過DataGear的自定義圖表功能，可以很方便地制作省/市二級聯(lián)動下拉框看板表單。

首先，新建兩個(gè)下拉框所需的數(shù)據(jù)集：

第一個(gè)是省級下拉框所需數(shù)據(jù)集，以如下的CSV數(shù)據(jù)集為例：

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

第二個(gè)是市級下拉框所需數(shù)據(jù)集，以如下SQL數(shù)據(jù)集為例：

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

這是一個(gè)參數(shù)化SQL數(shù)據(jù)集，參數(shù)為：

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

T_CITY表數(shù)據(jù)示例：

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

使用上述兩個(gè)數(shù)據(jù)集新建兩個(gè)自定義圖表：

圖表類型：自定義
數(shù)據(jù)集列標(biāo)記：無需標(biāo)記

圖表類型：自定義
數(shù)據(jù)集列標(biāo)記：無需標(biāo)記

然后，新建可視化看板，填寫如下看板模板內(nèi)容：

.select-province,
.select-city{
    display: inline-block;
    padding: 0.5rem 1rem;
}
select, button{
    padding: 0.5rem 2rem;
    width: 10em;
    font-size: 1.2rem;
}


//下拉框圖表渲染器
var selectChartRender =
{
    render: function(chart)
    {
        var element = chart.elementJquery();
        var options = chart.options();
        
        $("").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").attr("value", datas[i].value).html(datas[i].name)
                .appendTo(select);
        }
    }
};

//省級下拉框初始更新完數(shù)據(jù)后，聯(lián)動市級下拉框
var selectProvinceChartListener =
{
    update: function(chart, results)
    {
        $(".select-province select").change();
    }
};

$(document).ready(function()
{
    $(".select-province select").change(function()
    {
        var value = $(this).val();
        
        //設(shè)置市級下拉框圖表參數(shù)，然后刷新圖表
        var chart1 = dashboard.getChart("chart1");
        chart1.dataSetParamValue(0, 0, value);
        chart1.refreshData();
    });
});




	DataGear 

	http://www.datagear.tech