WTM+LayUI实现组件一对多的联动

一、需求描述

WTM LayUI的架构下，实现组件一对多的联动。当选中下拉框组件A的某一选项的时候，重新加载下拉框组件B和下拉框组件C的数据源。

举例说明：选中【公司】下拉框的某一项之后，重新加载【设备位置】、【网关】、【供应商】的数据源

 

二、解决思路

WTM可以实现组件的一对一联动，而无法实现组件一对多的联动。

• 创建了多个一模一样的公司（除了ID不一样），分别叫Compny1、Compny2、Compny3
• 将Company2和Company3设置为隐藏
• Compny1实现和设备位置的一对一联动、Company2实现和网关的一对一联动，Comapny3实现和供应商的一对一联动。
• 当点击Company1的时候，触发JS的方法，用JS代码实现自动选中Compnay2的组件选项，从而触发Comany2和网关的一对一联动；用JS代码实现自动选中Compnay3的组件选项，从而触发Comany3和供应商的一对一联动

这样可以就实现组件的一对多联动

三、代码实现

HTML代码

  <wt:tabcontents>
          <wt:tabcontent>
            <wt:row  items-per-row="ItemsPerRowEnum.Three" id="g9851827127">
              <wt:combobox field="Entity.CompanyId"  item-url="/BaseData/CMachList/GetSysCompanys" empty-text="@Localizer["Sys.PleaseSelect"]" id="g91535ad7c89c4995b4e8f09237a47dd5" multi-select="false" link-field="Entity.LocatorId" trigger-url="/BaseData/CMachLocator/GetCMachLocatorsByComoany"  change-func="CompanyLinkToGateWayVdendor"/>
              <wt:textbox field="Entity.Code"/>
              <wt:textbox field="Entity.ShowName" label-text="@Localizer["Page.显示名"]"/>
              <wt:combobox field="Entity.MachTypeId"  item-url="/BaseData/CMachList/GetCMachTypes" empty-text="@Localizer["Sys.PleaseSelect"]" id="g3fc9e1381f654fed9244b127dbceb64f" multi-select="false"/>
              <wt:textbox field="Entity.MachBrand"/>
              <wt:textbox field="Entity.MachModel"/>
              <wt:combobox field="BaseDataCMachListFTempSelected"  item-url="/BaseData/CNCSystemModel/GetCNCSystems" label-text="@Localizer["Page.数控系统"]" empty-text="@Localizer["Sys.PleaseSelect"]" id="g1518098528" link-id="g8d3932d5bbdc43dabaf3162f85f5cd55"  trigger-url="/BaseData/CNCSystemModel/Select_GetCNCSystemModelByCNCSystem" multi-select=false/>
              <wt:combobox field="Entity.NCSystemModelId"  label-text="@Localizer["Page.系统型号"]" empty-text="@Localizer["Sys.PleaseSelect"]" id="g8d3932d5bbdc43dabaf3162f85f5cd55" multi-select="false"/>
              <wt:tree field="Entity.LocatorId"  item-url="/BaseData/CMachLocator/GetCMachLocators?istree=true"/>
              <wt:textbox field="Entity.Desp" colspan="3" id="g2276946375"/>
            </wt:row>
          </wt:tabcontent>

          <wt:tabcontent>
            <wt:row  items-per-row="ItemsPerRowEnum.Two" id="g6387909711">
                <div hidden>
                <wt:combobox field="Entity.CompanyId"  item-url="/BaseData/CMachList/GetSysCompanys" empty-text="@Localizer["Sys.PleaseSelect"]" id="g91535ad7c89c4995b4e8f09237a47dd7" multi-select="false" link-id="g0ecf4ac57df149e8b3f340a6fbfad4dc" trigger-url="/BaseData/CGatewayMsg/Select_GetCGatewayMsgBySysCompany" hidden hide-label=true />  
                </div>
              <wt:switch field="Entity.IsInterconnect"/>
              <wt:combobox field="Entity.InterfaceType" empty-text="@Localizer["Sys.PleaseSelect"]" id="gd9fa5b3505c343429ef78bc2d800a248" multi-select="false"/>
              <wt:textbox field="Entity.IP"/>
              <wt:textbox field="Entity.Port" id="g9112264944" step="1"/>
              <wt:combobox field="Entity.GatewayId"   item-url="/BaseData/CMachList/GetCGatewayMsgs" empty-text="@Localizer["Sys.PleaseSelect"]" id="g0ecf4ac57df149e8b3f340a6fbfad4dc" multi-select="false"/>
            </wt:row>


          </wt:tabcontent>
          <wt:tabcontent>
            <wt:row  items-per-row="ItemsPerRowEnum.Two" id="g2220568013">
                 <div hidden>
                <wt:combobox field="Entity.CompanyId"  item-url="/BaseData/CMachList/GetSysCompanys" empty-text="@Localizer["Sys.PleaseSelect"]" id="g91535ad7c89c4995b4e8f09237a47dd8" multi-select="false" link-id="g1d485b88034f48b09b01d6671deceda0" trigger-url="/BaseData/CVendor/Select_GetCVendorBySysCompany"  />  
                </div>
              <wt:upload field="Entity.MachImgId"/>
              <wt:combobox field="Entity.MachState" empty-text="@Localizer["Sys.PleaseSelect"]" default-value="Enable" id="g4c5499d24b084eb882b1caae7fb92d7d" multi-select="false"/>
              <wt:textbox field="Entity.PropertyNo" id="g1928056881"/>
              <wt:combobox field="Entity.VendorId"  item-url="/BaseData/CMachList/GetCVendors" empty-text="@Localizer["Sys.PleaseSelect"]" id="g1d485b88034f48b09b01d6671deceda0" multi-select="false"/>
              <wt:textbox field="Entity.MachLegth" padding-text="@Localizer["Page.cm"]" id="g7607210501" step="1"/>
              <wt:textbox field="Entity.MachWidth" padding-text="@Localizer["Page.cm"]" id="g4075429494" step="1"/>
              <wt:textbox field="Entity.MachHight" padding-text="@Localizer["Page.cm"]" id="g4558476765" step="1"/>
            </wt:row>


          </wt:tabcontent>

JS代码：

<script>
   
    function CompanyLinkToGateWayVdendor(data)
    {   
        var companyID=data.arr[0].value;//获取companyID
        var select = 'div[value=' + companyID + ']'; //div的属性value等于CompanyID的值
        var selectGateWayID=$("#g91535ad7c89c4995b4e8f09237a47dd7").find(select); //找到网关下拉框下的div 
        var selectVendorID=$("#g91535ad7c89c4995b4e8f09237a47dd8").find(select); //找到供应商下拉矿下的div
        selectGateWayID.eq(0).click();//点击选中此div
       selectVendorID.eq(0).click();//点击选中此div

} </script>

四、思路拓展

思路1：组件A选择选项后，触发JS方法，在JS方法里面动态加载组件B和组件C的数据源。

由于WTM封装了Select组件，不知道怎么写来实现动态加载数据源。如果只是添加选项元素的话可以实现，但添加元素后无法触发选中、鼠标进入等方法，不知道怎么实现。

思路2：重写wt:Combobox 的TagHelper,实现多对多的组件联动