LAYUI前端框架+PHP后端中Checkbox复选框的使用

1.现在common.php中封装一个获取合同外工时责任主体的方法

get_outside_contract_party

//获取合同外工时责任主体
function get_outside_contract_party($id=0)
{
    $shift_array = ['甲方','业主方','我方'];
    if($id==0){
        return $shift_array;
    }
    else{
        $news_array=[];
        foreach($shift_array as $key => $value){
            if($key>0){
                $news_array[]=array(
                    'id'=>$key,
                    'title'=>$value,
                );
            }
        }
        return $news_array;
    }
}

2.前端页面使用volist循环创建checkbox组件

    <tr class="extraComponent">
            <td class="layui-td-gray">合同外工时责任主体</td>
            <td>
                {if ($id == 0) }
                {volist name=":get_outside_contract_party()" id="vo"}
                {gt name="$key" value=""}
                <input type="checkbox" name="outside_contract_party" title="{$vo}" value="{$key}"  lay-skin="primary">
                {/gt}
                {/volist}
                {else}
                {volist name=":get_outside_contract_party()" id="vo"}
                {gt name="$key" value=""}
                <input type="checkbox" name="outside_contract_party" title="{$vo}" value="{$key}"  {in name="key" value="$detail.outside_contract_party"}checked{/in}  lay-skin="primary">
                {/gt}
                {/volist}
                {/if}
            </td>
        </tr>

当id为0时为新建不用赋值，id大于0时需通过与后端获取的数据进行匹配并赋值

以下代码为数组和单选的分别匹配方法，（这里用了多个复选框，通常是多选）

{volist name=":get_outside_contract_party()" id="vo" key="k"}
    {if !empty($key)}  {* 判断键不为空 *}
    <input type="checkbox" name="outside_contract_party[]" title="{$vo}" value="{$key}" 
        {if is_array($detail.outside_contract_party) }
            {in name="key" value="$detail.outside_contract_party"}checked{/in}
        {else /}
            {if $key == $detail.outside_contract_party}checked{/if}
        {/if}
        lay-skin="primary">
    {/if}
{/volist}

 3.后端获取的数据需要转换为数组

   $detail['outside_contract_party'] = explode(",", $detail['outside_contract_party']);

使用explode()函数将字符串按照指定的分隔符转换为数组。

 

4.保存的时候需要将每个选中的值转成带分割符号的字符串保存到数据库中

        //监听保存
        form.on('submit(webform1)', function(data){
            var arr_box = [];
            $('input[type=checkbox]:checked').each(function() {
                arr_box.push($(this).val());
            });
            data.field.outside_contract_party = arr_box.toString();
            tool.ask('确定要仅保存该工作汇报吗?', function(index){
                $.ajax({
                    url: "/oa/work/add",
                    type:'post',
                    data:data.field,
                    success:function(e){
                        layer.msg(e.msg);
                        if (e.code == 0) {                        
                            tool.sideClose(1000);
                        }
                    }
                })
                layer.close(index);
            });
            return false;
        });