如何使用DataGear制作省/市二級聯(lián)動下拉框看板表單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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);
        }
    }
};

//省級下拉框初始更新完數(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ù)，然后刷新圖表
        var chart1 = dashboard.getChart("chart1");
        chart1.dataSetParamValue(0, 0, value);
        chart1.refreshData();
    });
});
</script>
</head>
<body class="dg-dashboard">
<div >
	DataGear <br>
	http://www.datagear.tech
</div>
<div >DataGear 看板示例</div>
<p> </p>
<div >
    <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制作省/市二級聯(lián)動下拉框看板表單

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用DataGear制作省/市二級聯(lián)動下拉框看板表單”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

新聞名稱：如何使用DataGear制作省/市二級聯(lián)動下拉框看板表單
本文鏈接：http://jinyejixie.com/article46/iieceg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、軟件開發(fā)、網(wǎng)站導航、標簽優(yōu)化、面包屑導航、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用DataGear制作省/市二級聯(lián)動下拉框看板表單