在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是谁,就完了。
布局代码样例