JBolt开发平台入门(2)-组件自动化-AutoSelect

教程总目录

上一节:JBolt开发平台二次开发入门(1)

本教程我们来看一下JBolt开发平台的基础数据和全局数据配置管理。

这里为什么把配置分为基础和全局配置两个模块区管理呢,解释一下:

一、基础数据管理

基础配置就是传统的字典管理,有字典分类,每个分类下有自己的字典项目,而且JBolt平台里的字典数据现在我设计的是可以单层使用也可以多级使用。
1、单层数据:就是一个分类下有几个项目,例如 做博客有博客文章分类 做活动管理有 活动分类
2、多级数据:是分类下的项目还有父子层级关系,举个数据猫里的例子:
针对一个项目所属的学科维度这几个字典分类下,还有K12学科辅导这个父项目,之下还有全科、语文、数学之类的子项目 构成了多级字典数据。

学科维度

多级字典

在JBolt中的字典管理可以通过创建字典分类的层级模式属性来控制具体层级:

控制层级

目前遇到最多的也是两级,三级的还没遇到,所以暂时支持的是两级,多级和无限级其实支持也是小改一下的事情;

这个基础数据不管几个级别,我知道怎么定义设置了 具体开发的时候怎么用?

字典定义很多时候我们的使用场景和使用的组件就是Select radio checkbox这种单选和多选的组件。下面我们来看在JBolt中如何在前端网页里快速使用自动化的基础数据组件:

组件1、自动加载数据源的Select+自动设置选中元素的Select组件

我们就拿基础数据里的文件分类做例子:


文件分类

下面我们看看实际加载文件分类的效果:


组件效果

下图展示了select组件加载的数据
自动加载了数据源

下图在点击表单提交的时候会做校验,这个select上配置了校验规则,和提示信息,都可以正常校验。


自动校验

当我选择了一个值,提交后,Demo跳转回来:自动选中了刚才选择的项目
这个经常用在一些列表查询条件上,你选择条件点击查询后,回来需要保持你刚才选择的条件不变。


自动选中

上面四个功能,你不需要写任何js代码,只需要写html代码和属性就行了,不信看下图:


完整介绍

这里面的数据源地址是一个具体的Controller中的action,返回的值也是JBolt开发平台里内定的,字典表的service早就提供封装好了 一句话搞定:

代码早就封装好了service

这个是我在demo里用的,其实在Dictionary自身的Controller里也有,方便后端的页面随时调用,如果是有小程序端或者H5里需要读取这些数据,可能就需要你具体的针对小程序的API接口里提供这样的接口,总之还是调用我封装好的DictionaryService.


dictionryAdminController中提供的调用

组件上指定这个data-url地址就好了:

组件的URL

--对了 我们的字典里还有两级的怎么用?这个demo是一层的啊,如果加载两层的怎么设置?

告诉你,非常简单,不用你做任何特殊修改,和上面的一模一样,设置好数据源地址就OK,自动处理。


这是两级的

这个分类的TypeKey是group,我们换一下就可以:


修改了key

再看看二级的加载效果:是不是超级简单


二级加载效果

相关原理在这里就不赘述了,全部使用JS封装,使用就复制demo改改url和几个中文信息就完了,so easy;

未完待续,后面组件更精彩,二级联动,多级联动,都是一个属性搞定,无需js

其他的checkbox和radio也都做了js的封装,自动选中单选多选,自动加载初始选中值,等等

好项目,值得你拥有!

下一节:JBolt开发平台二次开发入门(3)

JBolt VIP