# 复选框组件

# 概述

复选框大家一定在项目开发中经常见过,常常一个值的属性往往是多选,这时候在数据量不大的前提下,复选框就是一个很好的形式,举个大家耳熟能详的例子,系统用户角色的设置,往往一个用户会身兼多职,拥有多个角色身份,这在我们设计系统的时候就得多考虑一下,使用多选的形式去实现角色参数的选择维护,系统中能使用到复选框的地方有很多,尤其是在一些大型系统中,更是数不胜数,那么下面我们重点来介绍下复选框组件的使用及原理;

# 组件原理

组件UI部分我们借助Layui开源的控件元素来实现的,Layui中的复选框组件的形式如下:

<div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏">
    </div>
  </div>
1
2
3
4
5
6
7
8

实际效果如下图所示:

mixureSecure

代码部分也算不上很多,但是总是角色还不够精简,不够方便,尤其是在数据表单提交时还得去处理选择中值,然后逗号拼接之后进行网络请求,更重要的是只要使用到复选框的地方还都得一次次去这样去处理,过程非常繁琐,而且很多时候还不一定一次性写对,鉴于传统的这种开发模式,觉得不够方便和灵活,我们的框架立项之初的要求就要是组件化、灵活化、可维护性,要能够从根本上降低开发成本的同时提交开发效率,所以我们对复选框这一控件进行了封装。

# 指定数据源

  • 组件:{checkbox:select param="role_ids|name|id" data="$roleList" value="isset($info['role_ids']) ? $info['role_ids'] : ''"}/>

  • 参数name:role_ids|name|id

`role_ids`:组件名称`role_ids`,此字段对应实体对象中的字段role_ids(对应到数据表中字段即为`role_ids`);
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到);
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到);
1
2
3
  • 参数data:绑定到组件上的数据源;

  • 参数value:绑定到组件上的值,多个值使用英文逗号","分隔;

  • 组件使用

那么我们如何在表单中使用复选框组件呢,如下:

<form class="layui-form model-form" action="">
    <div class="layui-form-item style="width:625px;">
        <label class="layui-form-label">用户角色:</label>
        <div class="layui-input-block">
            {checkbox:select param="role_ids|name|id" data="$roleList" value="isset($info['role_ids']) ? $info['role_ids'] : ''"}/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 读取SQL获取

  • 组件:{checkbox:select param="role_ids|name|id" sql="SELECT id,nameFROM sys_role WHERE mark=1 ORDER BY sort ASC;" value="isset($info['role_ids']) ? $info['role_ids'] : ''"}/>

  • 参数name:role_ids|name|id

`role_ids`:组件名称`role_ids`,此字段对应实体对象中的字段role_ids(对应到数据表中字段即为`role_ids`);
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到);
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到);
1
2
3
  • 参数sql: SELECT id,nameFROM sys_role WHERE mark=1 ORDER BY sort ASC; 这里是动态获取数据库数据的形式来进行数据渲染的,所查询出来的数据包括nameid字段信息,跟name="role_ids|name|id"中的name,id要保持一致,不然获取不到参数值。

  • 参数value:绑定到组件上的值,多个值使用英文逗号","分隔;

  • 组件使用

那么我们如何在表单中使用复选框组件呢,如下:

<form class="layui-form model-form" action="">
    <div class="layui-form-item layui-form-text" style="width:625px;">
        <label class="layui-form-label">用户角色:</label>
        <div class="layui-input-block">
            {checkbox:select param="role_ids|name|id" sql="SELECT id,`name` FROM sys_role WHERE mark=1 ORDER BY sort ASC;" value="isset($info['role_ids']) ? $info['role_ids'] : ''"}/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure