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

cherishiot

已于 2022-05-25 23:20:01 修改

阅读量1k

点赞数 1

分类专栏： WTM 文章标签： layui 前端 javascript

于 2022-05-25 23:14:40 首次发布

本文链接：https://blog.csdn.net/lu836138981/article/details/124975937

版权

WTM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、需求描述
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>