X5平台simpleSelect、gridSelect、treeSelect应用实例

本文档详细解析了一个具体的业务数据集配置文件,包括数据读写规则、验证规则及界面元素配置等内容。通过分析,读者可以了解到如何定义业务数据集、设置数据交互逻辑以及实现界面元素与数据的绑定。

   <!-- 业务数据集Data --> 

<data auto-load="false" auto-new="true" component="/UI/system/components/data.xbl.xml#bizData"
      concept="MKT_CounselingEnrol" id="dataMaster" limit="20" offset="0" store-type="simple"
      update-mode="whereVersion">
      <reader action="/MIS/Business/logic/action/queryMKT_CounselingEnrolAction"
        id="default8"/> 
      <writer action="/MIS/Business/logic/action/saveMKT_CounselingEnrolAction"
        id="default9"/> 
      <creator action="/MIS/Business/logic/action/createMKT_CounselingEnrolAction"
        id="default10"/> 
      <rule id="dataBizRule2" relation="fTelPhone" alert="'请填写正确的联系方式'" constraint="eval(&quot;test()&quot;)"/> 
      <rule id="dataBizRule3" relation="fCredential" constraint="eval(&quot;CheckID()&quot;)"
        alert="&quot;身份证号码不合法请重新填写&quot;"/> 
      <rule id="dataBizRule4" relation="fLoanMainbodyDesc" readonly="eval(&quot;CheckFLoanMainbody()&quot;)"/> 
      <rule id="dataBizRule1" relation="fIdea" readonly="eval(&quot;canReadOpinion()&quot;)"/> 
      <rule id="dataBizRule5" relation="fViewer" readonly="eval(&quot;canReadOpinion()&quot;)"/> 
      <rule id="dataBizRule6" relation="fViewTime" readonly="eval(&quot;canReadOpinion()&quot;)"/>
    </data> 

 <!-- 信息来源Data --> 
    <data component="/UI/system/components/data.xbl.xml#bizData" update-mode="whereVersion"
      auto-load="true" id="dInfoSource" concept="DictionaryInfo">
      <reader id="default6" action="/MIS/Common/logic/action/queryDictionaryInfoAction"/> 
      <filter name="filter0"><![CDATA[DictionaryInfo.fParentNode = '3FB573B5-E123-42FD-A567-497C99CA209F' AND DictionaryInfo.fIsUsed=1]]></filter>
    </data> 
    <!-- 所属区域Data --> 
    <data component="/UI/system/components/data.xbl.xml#bizData" update-mode="whereVersion"
      auto-load="true" id="dDistrict" concept="DictionaryInfo" is-tree="true" limit="-1">
      <reader id="default17" action="/MIS/Common/logic/action/queryDictionaryInfoAction"/> 
      <tree-option id="default18" parent-relation="fParentNode" node-kind-relation="fNodeKind"
        node-level-relation="fLevel" root-filter="DictionaryInfo.fParentNode='9079302F-913B-4FDD-A9D4-AF29A71F4DAF'"/> 
      <filter name="filter1" id="filter5"><![CDATA[DictionaryInfo.fIsUsed=1]]></filter>
    </data> 

  <!-- simpleSelect --> 

<xhtml:div component="/UI/system/components/select.xbl.xml#simpleSelect" multi-select="false"
        id="iptFSex" ref="data('dataMaster')/fSex" auto-size="true">
        <option value="1">男</option> 
        <option value="2">女</option>
      </xhtml:div>

<!-- gridSelect    信息来源 -->  
      <xhtml:div component="/UI/system/components/select.xbl.xml#gridSelect" id="iptFInfoSourceName"
        ref="data('dataMaster')/fInfoSource" label-ref="data('dataMaster')/fInfoSourceName"
        auto-size="true">
        <xforms:label ref="fName"/> 
        <xforms:value ref="rowid"/> 
        <xforms:itemset auto-load-data="true" data="dInfoSource">
          <xforms:column ref="fName" id="default7"/> 
          <xforms:column ref="rowid" visible="false" id="default11"/>
        </xforms:itemset>
      </xhtml:div>

<!-- treeSelect    所属区域-->  
      <xhtml:div component="/UI/system/components/select.xbl.xml#treeSelect" ref="data('dataMaster')/fDistrict"
        label-ref="data('dataMaster')/fDistirctFullName" id="iptFDistirctFullName"
        auto-size="true" delay="true" cascade="false" appearance="tree">
        <xforms:label id="xuiLabel1" ref="fName"/> 
        <xforms:value id="default20" ref="rowid"/> 
        <xforms:itemset id="default21" data="dDistrict" auto-load-data="true">
          <xforms:column ref="rowid" id="default22"/> 
          <xforms:column ref="fName" id="default25"/>
        </xforms:itemset>
      </xhtml:div> 

`el-select` 和 `treeselect` 都是前端组件库提供的选择器控件,用于让用户从预设的选项中挑选出所需内容。它们广泛应用于各种表单场景中。 ### El-Select El-Select 属于 Element UI 组件库的一部分。Element UI 是一套基于 Vue.js 的桌面端组件库,它致力于提供精美的、开箱即用的基础组件,并让开发者快速搭建高效美观的应用界面。 **特点:** - **简单的下拉列表形式**: 用户点击输入框后会弹出一个包含所有可选项目的面板; - **支持搜索功能**: 如果数据量较大或需要更快地定位到特定项目,则可以开启此特性方便查找目标项; - **远程加载能力**: 对于非常大的数据集而言,在本地存储显然不是最优解法;此时可通过异步请求获取远端服务器上的最新信息并展示给用户; - **自定义模板渲染**: 允许对每一个菜单项按照需求调整其样式及布局结构,满足更复杂业务下的视觉呈现要求。 ### Treeselect Treeselect 则是一个专门针对层级化树形结构而设计的选择插件,适用于有父子级关联的数据源如地区划分(省市区)等场合。 **特色之处在于:** - 它能够很好地处理含有层次关系的信息集合; - 支持半选状态 - 当某个节点下面既有已被勾选了的孩子也有未被标记的部分时,该父元素旁边会出现特殊的图标表示这一情况存在; - 拥有过滤机制以便快速过滤掉不符合条件的结果; - 易于集成至现有的Vue应用当中去,同时官方文档也给出了详细的API说明以及使用示例帮助理解和上手操作。 两者都各有侧重,具体选用哪一种取决于实际应用场景和个人偏好等因素影响。如果仅仅是普通的单项或多选任务,那么直接采用el-select就足够了;但要是涉及到较为复杂的嵌套式菜单体系的话,则建议优先考虑treeselect这样的专业型工具来解决问题更为合适不过啦!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值