组件自定义联动

简介 #

SmartChart 内置的单选筛选器可通过配置实现，但对于多选、复选框、自定义 HTML 控件等个性化需求，需要手动编写少量 JS 代码来完成联动。本章介绍如何自定义任意复杂的筛选联动效果。

自定义联动开发规律 #

步骤 操作 代码
1 生成 HTML 控件 dom__name__.innerHTML = ...
2 绑定事件 $('#id_按钮').unbind('click').click(...)
3 获取控件值 $('#input_id').val()
4 设置参数 ds_setParam('参数名', 值)
5 刷新数据集 ds_refresh(序号)

应用场景 #

  • Smartchart对于单项筛选有通用的组件， 可以直接配置即可
  • 但对于个性化的筛选，需要你进行一些简单的定制化，
  • 以下就针对多项筛选联动的需求来介绍如何定制化你的筛选联动效果
  • 通过此例,你可以了解如何自定义任意的联动效果 输入图片说明

样列参考 #

以我们内置的仪表盘为例：

  • 新建一个图形组件
  • 在新的数据集中编写查询
select distinct H1 as heroname  from smartdemo2 limit 10
  • 编辑此数据集的图形，可复制以下代码
//生成html组件
let dataset=__dataset__;
let table = '';
for (let i=1;i<dataset.length;i++){
    table = `${table}<label><input name="select__name__" type="checkbox" value="${dataset[i][0]}" />${dataset[i][0]}</label> `;
}
table = table + "<button id='id_select__name__'>提交</button>";
dom__name__.innerHTML=table;

//button 的点击响应
$('#id_select__name__').click(()=>{
    let res = [];
    //获取所有选项并放入res列表中
    $("input[name='select__name__']:checked").each(function(i){
        res.push("'" + $(this).val() + "'");
    });
    let H1 = res.toString(); //拼接成参数
    ds_setParam('H1',H1);  //参数赋值
    ds_refresh(1);  //刷新1号图
 }
)
  • 在你要联动刷新的目标数据集中增加代码
select H1 as heroname, sum(qty) as 出场数 from smartdemo2
where 1=1
/* and H1 in ($H1) */
group by H1
order by sum(qty) desc

这样就完成了，任何其他需求，都可以采用类似方法自定义

TIPS

如果这个点击的图形有可能被其它图形点击联动或存在定时刷新,需要加入如下unbind否则会触发多次刷新 $(’#id_select__name__’).unbind(‘click’).click(…..

如需取消联动,恢复到初始效果, 你需要删除参数, 如: delete filter_param[‘H1’]

自定义联动开发规律总结 # 

// 1. 在 HTML 组件中生成交互控件
dom__name__.innerHTML = /* 你的 HTML 控件 */;

// 2. 绑定事件（注意使用 unbind 防止重复绑定）
$('#id_按钮').unbind('click').click(() => {
    // 3. 读取控件值
    let value = $('#input_id').val();
    
    // 4. 设置参数
    ds_setParam('参数名', value);
    
    // 5. 刷新目标数据集
    ds_refresh(目标序号);
});
Edit Edit this page