这两天在用layui+tp开发一个后台，在写文章编辑功能的时候，因为打开编辑页面时需要将文章内容先读取到模板中，之前一直都是在控制器里直接读取然后通过 assign 分配到模板中，然后在模板中将数据展现出来，后来看了下layui的示例，原来layui有表单赋值的功能，这样就不需要每个组件都分别赋值了，直接通过form.val()赋值就可以了非常简单，但是通过测试后发现2个问题，百度编辑器并不能通过form.val()赋值，还有复选框的数据处理，下面我就来说下解决方法：

1，百度编辑器赋值问题

                    <div class="layui-form-item layui-form-text">
                      <label class="layui-form-label">文章内容</label>
                      <div class="layui-input-block">
                      	<script type="text/plain" id="body" name="body"></script>
                      </div>
                    </div>
                    
                    <script>                    	
                      UE.getEditor('body', {
                        initialFrameHeight: 500,
                        autoFloatEnabled: true,
                        autoHeightEnabled: false,
                      });
                    </script>

这是百度编辑器的代码

    // 这里通过get方式获取json数据
    $.get('{:url('Archives/getThisArc',['aid' => $aid])}', function (data,status) {				
    
        // 处理百度编辑器赋值问题
        // 这里更好判断下内容字段是否有值    
        if (data.body) {
	    UE.getEditor('body').setContent(data.body)
	    // 这个data里面有文章的所有数据 百度编辑器要通过 setContent 赋值
	}            
        // layui的图片 上传组件 也是不能直接赋值的需要下面这样操作
        if (data.thumb) {
            $("#thumbShow").attr('src',data.thumb)
        }
	form.val('arcEdit', data); 
	// 其他单行文本，单选，下拉， 多行文本都可以通过form.val() 赋值
	
    })

2，处理复选框提交数据组合成字符串

以前默认的多选默认提交上来的是个数组例如

hobby => [
    [0] => '篮球'
    [1] => '足球'
    [2] => '羽毛球'
]

这种数组当我们存到数据库时要把他转换成字符串，在研究layui时发现 layui的表单可以获取表单中的所有数据然后通过ajax的方式发送出去这样还可以使用layer好看的提示（这样就不用看到那个丑丑的笑脸了。呵呵！），但是测试的时候发现layui 提交时将 多选的数据处理成了这个样子

[hobby[篮球]] => on
[hobby[足球]] => on
[hobby[羽毛球]] => on

这种奇葩的格式，这个一看就头大，后来经过百度不断的搜索，加上自己的测试，可以用下面的方式处理：

//这是html
<div class="layui-form-item">
    <label class="layui-form-label>爱好</label>
    <div class="layui-input-block" id="hobby">
        <input type="checkbox" name="hobby[篮球]" lay-skin="primary" title="篮球">
        <input type="checkbox" name="hobby[足球]" lay-skin="primary" title="足球">
        <input type="checkbox" name="hobby[羽毛球]" lay-skin="primary" title="羽毛球}">
    </div>
</div>

//这里是js

const hobby = [] //新建一个数组
// 因为他的name不是同名所以只能在父元素加一个id 来定位这个复选框
$("#hobby  input[type='checkbox']:checked").each(function (i) {
    const item = $(this).attr('name') //获取name值
    var r = /^.+?\[(.+?)\]/; //匹配正则
    var m = r.exec(item); // 匹配到的数据放到 m 中
    $hobby[i] = m[1] //将得到的数据放到 hobby 数组中
});
data.field.hobby  = hobby .join(",")//将数组合并成字符串，并放进表单所有数据中

赋值只需要在控制器中将数据库中的字符串转换成 [hobby[足球]] => true  格式即可 就能将以后选的数据勾选上。

好了，大概就和大家分享这么多，感谢阅读！