JBolt开发平台入门(21)-AutoSelect+select2+多选+隐藏域的高级用法

教程总目录

上一节:JBolt开发平台入门(20)-前端校验自动化使用教程

JBolt里的select组件除了AutoSelect自动加载数据源、Select2样式之外,还能动态处理多选后字符串对隐藏域或者其它元素赋值。
举例:
比如JBolt极速开发平台中,针对内部用户创建的时候,可以选择所属角色。
JBolt内的角色是树形的可以一级平级也可以N级树形结构。
配合JBolt中的AutoSelect可以显示这样的效果。


多选
多选树形

具体代码,也很简单,只要在AutoSelect基础上增加几个属性配置就行了。

配置代码

multiple="multiple" 配置为多选
data-handler="setValueToOther" change后调用内置方法处理setValueToOther 将值也赋值给另一个表单元素
data-setvalueto="userRoles" 设置最终value给哪个表单元素,这里是一个隐藏域。

这样就完成了。

选中值都设置给一个隐藏域了

这个东西就提交给后端model接收了。否则这个多选select的值是这样的。

不正确的样式

我们需要的是:


这样的是我们需要的

select本身数据不需要传递到后端 只是前端为了把最终数据准备好赋值给隐藏域而已,所以select的name属性去掉后,表单提交就跟他无关了。

下一节:JBolt开发平台入门(22)-JBolt平台提供的多种Form表单快速校验和提交方式