layui动态生成复选框及向后端传递选中复选框的值

layui动态生成复选框及向后端传递选中复选框的值

一、动态生成复选框

问题：将数据库的标签在前端以复选框的形式展示出来，如下图所示

解决：

<div class="layui-form-item">
            <label class="layui-form-label">兼职标签</label>
            <div class="layui-input-block" id="jobTypeDiv"></div>
            <div class="layui-form-mid" style="color: red;margin-left: 115px;">*备注:可多选,前三个标签需且仅需选择一个</div>
        </div>

<script type="text/javascript">

success: function () {
                    var div = $("#jobTypeDiv");
                    $("#dataFrm")[0].reset();//清空表单
                    div.html("");
                    //进入/labelType/loadAllLabelType的方法，返回的objs是一个list集合，集合中的每个元素均为Label实体类(包含id和label两个属性)
                    $.get("/labelType/loadAllLabelType", function (objs) { 
                        var labelTypes = objs.data;
                        $.each(labelTypes, function (index, item) {
                            if (index === 0) { //默认第一个是被选中的，设置为checked="checked"
                                div.append('<input type="checkbox" checked="checked" name="labelType"  value="' + item.id + '" title="' + item.label + '">');
                            } else {
                                div.append('<input type="checkbox" name="labelType" value="' + item.id + '" title="' + item.label + '">');
                            }
                        });
                        form.render("checkbox");
                    });
                }
</script>

其中每个复选框选项的 value 值为 Label.id，title 为 Label.label

二、向后端传递选中复选框的值

问题：将选中复选框的值传递到后端，如下图所示

解决：

//监控提交事件
        form.on("submit(doSubmit)", function (data) {
            
            var labelArray = $('input[name="labelType"]');
            //获取input[name="labelType"]的值
            var labels = [];
            for (k in labelArray) {
                if (labelArray[k].checked) {
                //获取所有选中的复选框，并将其值放入数组中
                    labels.push(labelArray[k].value);
                }
            }
            //替换 data.field.labels的数据
            data.field.labels=labels;

            $.post("/partTime/addAndUpdatePartTime", data.field, function (res) {
                if (res.code === 200) {
                   layer.msg(res.msg);
                } else {
                    layer.msg(res.msg, {icon: 2}, {time: 2000})
                }
                tableIns.reload();
            });
            return false;
        });

在写实体类的时候没有考虑到 labels 这个属性，是后来才加上的

 /**
  * 方便前端传输复选框的数据
  */
    private String labels;

在后端就可以获取这个属性的值，再进行字符串的剪切等操作

//以","切割前端传递的复选框数据(以JSON字符串类型传递过来的)
String[] split = partTimeDetailsVo.getLabels().split(",");
System.out.print("split = ");
for (String s : split) {
   System.out.print(s);
}
//输出结果为“split = 34578”

以上是个人在学习过程中的一些理解和记录，如有错误，欢迎指正批评~~~

参考博客：https://blog.csdn.net/weixin_39106990/article/details/106103755