layui使用爬坑

html

<form class="layui-form" id="addForm">
<div class="layui-form-item">
    <label class="layui-form-label"><span>*</span>商品封面</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <input id="upload" name="goodsImg" type="hidden" lay-verify="required">
            <button type="button" class="layui-btn layui-bg-red" id="test1">上传图片<span style="font-size: 12px; color: rgba(255,255,255,0.9);">(图片大小2M以内)</span></button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" style=" 100px; height: 100px;">
            </div>
            <div style=" 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

        <a name="list-progress"> </a>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label"><span>*</span>行业分类</label>
    <div class="layui-input-block">
        <select name="diyi" lay-filter="diyi" lay-verify="required">
            <option value="0">-请选择-</option>
            {volist name="goodstype" id="ty"}
            <option value="{$ty['catId']}">{$ty['catName']}</option>
            {/volist}
        </select>
        &nbsp;
        <select name="erji" id="erji" lay-filter="erji"></select>
        &nbsp;
        <select name="sanjiji" id="sanjiji"></select>
    </div>
</div>

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label"><span>*</span>商品描述</label>
    <div class="layui-input-block">
        <textarea placeholder="请输入内容" lay-verify="content" class="layui-textarea" name="goodsDesc" id="goodsDesc" lay-verify="required"></textarea>
    </div>
</div>

</form>

 

 

1、layui图片上传

 

 layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:Url('users/uploadPic')}" //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                this.data={dir: 'goods', isWatermark: 1, isThumb: 1}//携带参数
                obj.preview(function(index, file, result){
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
　　　　　　// 图片上传完毕后的回调函数
            ,done: function(res){
                //如果上传失败
                console.log('res',res);
                if(res.status  !== 1){
                    $('#demo1').attr('src', ""); //图片链接（base64）
                    return layer.msg(res.msg);
                }else{
                    console.log('上传成功');
                    let _imgUrl =  res.savePath + res.name; // 图片路径
                    $("#demo1").attr("src","__ROOT__/" + _imgUrl);
                    $("#upload").val("__ROOT__" + _imgUrl);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

2、三级联动（选择一级后根据一级选中的渲染二级下拉选项内容，再根据二级选择的内容渲染对应三级的下拉内容，好用到没朋友，强烈推荐）

   layui.use('form', function() {
        let form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
        /*三级行业分类联动*/
        form.on('select(diyi)', function(data){
            let parentId = Number(data.value); // 一级选中的值
            $.ajax({
                url: "{:url('users/getZType')}",
                method: "POST",
                data: {
                    id: parentId
                },
                success: function (res) {
                    if (res.status ===1) {
                        $("#erji").empty();
                        $("#sanjiji").empty();
                        $("#erji").append(new Option("-请选择-", ""));
                        $.each(res.data, function(index, item) {
                            $('#erji').append(new Option(item.catName, item.catId));
                        });
                    } else {
                        $("#erji").append(new Option("暂无数据", ""));
                    }
                    form.render("select");
                }
            });
        });

        form.on('select(erji)', function(data){
            let parentId = Number(data.value); // 一级选中的值
            $.ajax({
                url: "{:url('users/getZType')}",
                method: "POST",
                data: {
                    id: parentId
                },
                success: function (res) {
                    if (res.status ===1) {
                        $("#sanjiji").empty();
                        $("#sanjiji").append(new Option("-请选择-", ""));
                        $.each(res.data, function(index, item) {
                            $('#sanjiji').append(new Option(item.catName, item.catId));
                        });
                    } else {
                        $("#sanjiji").append(new Option("暂无数据", ""));
                    }
                    form.render("select");

                }
            });
        });

       /*类型选择*/
        $(".dealInfo").slideUp();
        form.on('radio(goodsType)', function(data){
            $(".dealInfo").slideToggle();
        });

        /*报价方式选择*/
        $(".layui-form-item.unitPrice").slideUp();
        form.on('radio(goodsPrice)', function(data){
            $(".layui-form-item.unitPrice").slideToggle();
        });
　　　　　　/* 表单提交*/
        form.on("submit(addForm)", function (data) {
            console.log('提交',data);
            $.ajax({
                url:"{:url('users/launchPro')}",
                data: data.field,
                method:"POST",
                success:function (res) {
                    if(res.status === 1){
                        layer.msg(res.msg,{
                            time:2000
                        },function () {
                            window.location.href= "{:url('users/goods_list')}";
                        });
                    }else{
                        layer.msg(res.msg)
                    }
                },
                beforeSend:function () {
                    layer.msg("数据提交中...",{
                        icon:16
                    });
                }
            });
            return false;
        })
    });

3、富文本编辑器（表单提交则无需同步富文本内容到textarea,ajax提交表单则需要同步内容到textarea）

 /*富文本*/
    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit;
        let form = layui.form;
        var editor = layedit.build('goodsDesc',{
            tool: [
                'strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线
                ,'|' //分割线
                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                ,'link' //超链接
                ,'unlink' //清除链接
                // ,'image' //插入图片
                ,'help' //帮助
            ]
        }); //建立编辑器

        /*富文本内容同步*/
        form.verify({
            content: function () {
                return layedit.sync(editor);
            }
        });
    });