wuyebaoxiuapi/views/group/add.html

<div class="layui-layout layui-layout-admin" style="padding-left: 40px;margin-top: 20px;">
<link rel="stylesheet" href="/static/editor.md/css/editormd.min.css" />

<div style="margin: 10px 0px">
        <blockquote class="layui-elem-quote">
            说明:仅仅支持一级分组
        </blockquote>
    </div>
<form class="layui-form" action="" method="post" >
    <div class="layui-form-item">
        <label class="layui-form-label">分组名称</label>
        <div class="layui-input-inline">
            <input type="text" name="group_name" id="group_name" lay-verify="required" autocomplete="off" placeholder="分组名称" class="layui-input" value="">
        </div>
        <div class="layui-form-mid layui-word-aux">*</div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-inline" style="width: 600px;">
          <!--   <textarea name="detail" id="detail"  placeholder="请输入内容" class="layui-textarea"></textarea> -->
            <textarea id="detail" name="detail" style="display: none;"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">环境配置</label>
        <div class="layui-input-block">
            {{range $k, $v := .envlists}}
                <input type="checkbox" name="env_ids[]" lay-filter="env_ids" title="{{$v.EnvName}}" value="{{$v.Id}}">
            {{end}}
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态码</label>
        <div class="layui-input-block">
            {{range $k, $v := .codelists}}
                <input type="checkbox" name="code_ids[]" lay-filter="code_ids" title="{{$v.Code}}" value="{{$v.Id}}">
            {{end}}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公共文档</label>
        <div class="layui-input-block">
            {{range $k, $v := .apiPublicLists}}
                <input type="checkbox" name="api_public_ids[]" lay-filter="api_public_ids" title="{{$v.ApiPublicName}}" value="{{$v.Id}}">
            {{end}}
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>

<script>

    layui.use(['form','element','layer','jquery','layedit'],function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        var $ = layui.jquery;
        var layedit = layui.layedit;

        var index = layedit.build('detail' , {
            tool: [ 
              'strong' //加粗
              ,'italic' //斜体
              ,'underline' //下划线
              ,'del' //删除线
              
              ,'|' //分割线
              
              ,'left' //左对齐
              ,'center' //居中对齐
              ,'right' //右对齐
              ,'link' //超链接
              ,'unlink' //清除链接
              ,'face' //表情
              ,'image' //插入图片
              ],
            height: 180
        }); //建立编辑器

        var env_ids,api_public_ids,code_ids;
        var envids=[],apipublicids=[],codeids=[];

        form.on('checkbox(env_ids)', function(data){
            if(data.elem.checked==true){
                envids.push(data.value)
            }else{
                $.each(envids,function(index,item){  
                    // index是索引值（即下标）   item是每次遍历得到的值；
                    if(item==data.value){
                        envids.splice(index,1);
                    }
                });
            }
            envids.sort();
            env_ids = envids.join(",");
        }); 

        form.on('checkbox(api_public_ids)', function(data){
            if(data.elem.checked==true){
                apipublicids.push(data.value)
            }else{
                $.each(apipublicids,function(index,item){  
                    // index是索引值（即下标）   item是每次遍历得到的值；
                    if(item==data.value){
                        apipublicids.splice(index,1);
                    }
                });
            }
            apipublicids.sort();
            api_public_ids = apipublicids.join(",");
        }); 

        form.on('checkbox(code_ids)', function(data){
            if(data.elem.checked==true){
                codeids.push(data.value)
            }else{
                $.each(codeids,function(index,item){  
                    // index是索引值（即下标）   item是每次遍历得到的值；
                    if(item==data.value){
                        codeids.splice(index,1);
                    }
                });
            }
            codeids.sort();
            code_ids = codeids.join(",");
        }); 

        form.on('checkbox(env_ids)', function(data){
            if(data.elem.checked==true){
                envids.push(data.value)
            }else{
                $.each(envids,function(index,item){  
                    // index是索引值（即下标）   item是每次遍历得到的值；
                    if(item==data.value){
                        envids.splice(index,1);
                    }
                });
            }
            envids.sort();
            env_ids = envids.join(",");
        }); 

        form.on('submit(sub)', function(data){
            var form_data = data.field;
            form_data.env_ids = env_ids;
            form_data.api_public_ids = api_public_ids;
            form_data.code_ids = code_ids;
            form_data.detail = layedit.getContent(index);

            if (!env_ids || !api_public_ids || !code_ids) {
              layer.msg("请选择环境、状态码、公共文档");
              return false;
            }
            $.post('{{urlfor "GroupController.AjaxSave"}}', form_data, function (out) {
                if (out.status == 0) {
                    layer.msg("操作成功",{icon: 1},function () {
                        window.location.href='{{urlfor "GroupController.List"}}'
                    })
                } else {
                    layer.msg(out.message)
                }
            }, "json");
            return false;
        });
      
      //但是，如果你的HTML是动态生成的，自动渲染就会失效
      //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
      form.render();
}); 
</script>