如何使用DataGear制作省/市二级联动下拉框看板表单-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

这篇文章主要介绍了如何使用DataGear制作省/市二级联动下拉框看板表单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了寻甸免费建站欢迎大家使用!

通过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
...

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

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

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







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

//省级下拉框初始更新完数据后,联动市级下拉框
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();
    });
});




	DataGear 
http://www.datagear.tech
DataGear 看板示例

 

             
                                           提交     

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

效果图如下所示:

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

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用DataGear制作省/市二级联动下拉框看板表单”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章名称:如何使用DataGear制作省/市二级联动下拉框看板表单
URL链接:http://kswsj.cn/article/iieceg.html