JBolt开发平台中定义的四种常见Layout布局的使用

在JBolt开发平台中,定义了四种常见的Layout布局,分别是:

1、Pjax加载的列表查询管理类
2、Pjax加载的Form表单单页
3、一个页面内弹出的Dialog中的表单
4、一个页面内弹出的Dialog中的列表查询

一、Pjax加载的列表查询管理类

列表查询与管理

这个布局在JBolt中使用的是__admin_layout.html这个布局


__admin_layout.html


使用方式:


使用方式代码演示

这样就可以轻松做出此类布局。

二、Pjax加载的Form表单单页

表单单页版布局


就是一个界面pjax加载过来的,就是一个表单。
再来看另一个例子:


其他JBolt开发的项目中的单页表单


单页表单例子


可以好几个步骤切换的表单

这个布局在JBolt中使用的是__admin_layout.html这个布局和表单提交自动化的封装_formjs.html

无需写任何JS 完成表单的校验和提交

__admin_form_layout.html和_formjs.html


代码演示

三、一个页面内弹出的Dialog中的表单

常见的管理列表界面里都有增删改查操作,其中增加新数据和修改数据都用到了表单,可能使用进入单页的表单,也可以使用Dialog里的表单去处理
JBolt中普通的管理列表中的增加和编辑都是用的dialog表单实现的。

Dialog表单


这里点击新增和修改按钮,会弹出一个Dialog,加载一个表单页面,点击确定按钮后这个表单会提交。
这里用到好几个组件,首先这些点击触发dialog弹出的按钮,无需JS,只要绑定data-dialogbtn的属性 配置几个url地址title之类的就可以了。
其次就是加载表单页面的布局了。


Dialog中的表单


这样,即使你是在Dialog中使用表单,也是使用跟第二个里面的布局一样的,同样需要引入封装的_formjs.html


form.html的代码


只要dialog的确定按钮点击,就会按照_formjs.html里的封装去处理数据的自动校验和提交的,很省事儿的。

再举一个例子:JBolt中的角色上分配权限

角色分配权限表单


这个也是使用的这种dialog里的form提交数据

具体拿到JBolt代码的可以看这个代码


分配权限表单

还有一个就是弹出的Dialog中放富文本的例子:都是一样的布局

dialog表单-富文本

四、一个页面内弹出的Dialog中的列表查询

经常会有一些子表数据和关联数据会通过dialog列表查询方式显示。


关联子数据的列表查询和管理布局


代码位置可以在这里找到

代码位置


使用的是


dialog中的列表管理查询


有的需要分页 有的不需要的就不用

分页也是封装到了起来,只要你页面里加入两行引用就搞定了,无需自己写任何其他js

分页

这里的几个参数,无非就是定义分页组件box的ID 分页组件点了提交哪个Form,指定一下formID是谁,就完了。

布局代码样例

总之,JBolt中做了很多自动化的封装加速你的前端页面的开发,希望开发者加入JBolt种子用户,教你极速开发JFinal项目。

点击链接进入JBolt开发平台官网



JBolt开发平台教程总目录

上一节:JBolt平台开发入门(5)-组件自动化-富文本编辑器


评论区