WTM LayUI框架 下拉框多参数的动态控件联动

一、需求描述

    WTM LayUI框架支持点击下拉框A联动获取下拉框B的数据源，主要使用到两个属性trigger-url、link-id。trigger-url为下拉框B获取数据源的url，link-id为联动的下拉框B组件的id。

    框架的默认实现，trigger-url会带上下拉框A的id传递到后台的接口，但只能传递一个参数即下拉框A的id。如果需要传递多个参数，则无法满足。

二、解决思路

     通过下拉框的change-func的方法，并参考框架本身的下拉框控件联动实现，来完成以上的功能。

三、代码实现 

 实际需求：

       组件id=ReportDesign_Search_Insert_XDataPropertyName（组件A）的Tree,点击需要联动组件id=ReportDesign_Search_Insert_XDateFilter（组件B）的Combobox,但需要带上除组件Aid以外的参数ChartModel。

 代码实现说明：

      change-func="ReportDesign_XDNfun" 点击组件A调用方法ReportDesign_XDNfun。获取参数chartModel,并将其拼接到Url中。设置组件A的wtm-linkto的属性，相当于在控件上设置了link-id，这一步不能少否则不知道联动哪个组件。ff.ChainChange为根据url请求后台的数据源并绑定到组件B上。

 <wt:tree field="Searcher.XDataPropertyName" id="ReportDesign_Search_Insert_XDataPropertyName" label-text="@Localizer["_Model._ReportDesign._XDataPropertyName"].Value" change-func="ReportDesign_XDNfun" />            
<wt:combobox field="Searcher.XDataFilter" id="ReportDesign_Search_Insert_XDateFilter" label-text="@Localizer["_Model._ReportDesign._XDataFilter"].Value" empty-text="@Localizer["Sys.All"]">   

 function ReportDesign_XDNfun(data)
    {
        //由于需要动态拼接ChartModel 所以自带的Trigger_url 没有使用 重写了
        let chartModel = ff.GetFormData('ReportDesign_Search_Insert_Panel')["Searcher.ChartModel"];
        var u = "/CustomReport/ReportDesign/GetSearcherFilter?chartModel=" + chartModel;
        if (u.indexOf("?") == -1) {
            u += "?t=" + new Date().getTime();
        }
        for (var i = 0; i < data.arr.length; i++) {
            u += "&id=" + data.arr[i].value;
        }
        $('#ReportDesign_Search_Insert_XDataPropertyName')[0].setAttribute('wtm-linkto', 'ReportDesign_Search_Insert_XDateFilter');//动态给标签link-to属性值  如果放在标签上 首次加载的时候将会为空
        ff.ChainChange(u, $('#ReportDesign_Search_Insert_XDataPropertyName')[0]);
    }

说明

本人专注机床的数据采集和程序传输，致力于机械加工行业的数字化系统开发

以下是自己开发的所支持的机床数据采集源代码类库(部分)，