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