前端交互

介绍

SoloAdmin前端交互，及其简单，逻辑清晰。采用左右结构，二级菜单，菜单点击后内容被填充到内容区，在内容区域点击以弹出层的方式交互，不会有深层级页面，最简化页面交互逻辑。简化交互，于是定义了如下几种交互组件，这些代码都封装到soloadmin.kit.js中，通过soloadmin.js进行初始化。

msg 交互

对button，a标签进行了绑定click事件请求后端action，得到返回值后执行kit.msg(...) 显示操作结果。

button 组件示例：
<button msg="{offset:'139px'}" url="/xx/xxx" >
     查看今日订单数
</button>

  以上button组件示例中展示的规则：
  1.url用于指定后端操作的action路由
  2.msg用于指定打开弹出层的 options 配置
  3.该交互模式常用于button 、a两种标签，可通过修改 jquery选择器绑定到其他组件上

<button msg url="/admin/func/passData" data="{k1:123, k2:'abc'}" >
    data属性传参
</button>

通过data属性传参，支持 json 格式与 key=value 格式。例如：data="{k1:123, k2:'abc'}" data="k1=a&k2=1"。必须要有msg标记，才会绑定上对应的click操作。

kit.msg(ret, options); 在系统中很多请求需要消息提示，直接调用此方法即可，ret 为com.jfinal.kit.Ret 对象对应的 json，options为弹出层参数，可选。

switch 交互

绑定 click 事件到 checkbox 实现的 switch 开关组件，实现交互功能。

input 组件示例：
 <input confirm="确定操作？" #(x.state == 1 ? 'checked':'') 
url='/admin/article/publish?id=#(x.id)' 
type="checkbox" class="custom-control-input" id="id-#(x.id)">

 * 以上input 组件示例中展示的规则：
 1：url 用指向后端操作的 action 路由
 2：代码 #(x.state == 1 ? 'checked':'') 用于输出 input 标签的 checked 属性
 3：confirm 用于显示确认对话框，不配置时不弹出确认对话框 
 4：注意 id="id-#(x.id)" 仅仅遵循了 bootstrap 4 样式要求，该值与紧邻的 label 标签
  中的 id 值保持一致即可，仅用于实现 switch 按钮的基本 UI 交互，不参与后端交互

遵守以上规则，在使用的时候前端只需调用 admin.initSwitch() 即可使用，后端只需要
 创建相应的 action 获取 id、checked 这两个参数实现相应业务即可

confirm 交互

绑定 click 事件执行 kit.confirm(...) 操作注意：选择器要避开 input[confirm]，因为 switch 组件满足选择器 input[confirm]

超链接约定规则如下：

 *   1：提供 confirm 属性用于弹出确认对话框显示内容
 *   2：提供 url 属性指向服务端 action
 *   3：去除 href 属性，避免在程序开发阶段未确认就执行了某些操作，例如删除操作

例子：

<a confirm="确定删除 #escape(x.title) ？"
 url="/admin/blog/delete?id=#(x.id)">删除</a>

支持data属性带参数，支持 json 格式与 key=value 格式。例如：data="{k1:123, k2:'abc'}" data="k1=a&k2=1"

open 交互

绑定 click 事件执行 kit.open(...) 操作

button 组件示例：
<button open="{area:'500px', offset:'139px'}" url="/admin/account/add" >
  <i class="fa fa-plus mr-1"></i>创建
</button>

以上 button 组件示例中展示的规则：
1：url 用指向后端操作的 action 路由
2：open 用于指定打开弹出层时的 options 配置
3：该交互模式常用于 button、a 两种标签，可通过修改 jquery 选择器绑定到其它组件上

遵守以上规则，在使用的时候前端只需调用 admin.initOpen() 即可使用，
后端只需要创建相应的 action 获取 render(...) 响应需要在弹出层显示的
html 片段即可，返回的 html 中可以包含 js、css、html
从而实现 UI 交互、功能的模块化

支持data属性，支持 json 格式与 key=value 格式。例如：data="{k1:123, k2:'abc'}" data="k1=a&k2=1"

fill 交互

绑定 click 事件执行 kit.fill(...) 操作注意：被绑定元素需要有 href 属性值，该值被用于获取填充数据常用于点击a标签后填充内容区域的数据例如：

<a href="/xx/x" fill="container" >操作</a>

示例中，fill表示 href返回的数据，需要填充到哪里。
同时支持url属性和data属性。

tab 交互

点击绑定了 tab 的超链接时触发 tab 功能一般用于使用 tab 功能从 A 模块跳转到 B 模块，避免 tab 标签对不上的问题如果是同一模块内的跳转使用 fill 功能即可。示例：

<a tab="标签的标题" href="/admin/article">文章管理</a>
*注意：属性名 tab 必须存在，但属性值可以省略，省略时默认使用 innerText 值，上例中为 "文章管理"

前端组件