首页 > 其他分享> 文章详细

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

2022-05-25 23:35:11 阅读：131 来源： 互联网

标签：实现 LayUI JS 联动组件下拉框 div WTM

一、需求描述

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,实现多对多的组件联动

标签：实现,LayUI,JS,联动,组件,下拉框,div,WTM
来源： https://www.cnblogs.com/cherish836138981/p/16311398.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

一、需求描述

二、解决思路

三、代码实现

四、思路拓展