Layui项目实战干货总结

写代码时遇到的知识点拿出来分享，我把上下文都列出来了。

 

1.layer弹出层显示在top顶层

// 监听工具条
        table.on('tool(tb-book)', function (obj) {
            var data = obj.data;
            // 修改
            if (obj.event === 'edit') {
                top.layer.open({
                    type: 2,
                    offset: '10px',
                    title: "修改图书",
                    area: ['800px', '660px'],
                    content: ['bookEdit/'+data.id]
                });
            }
        });

 

2.刷新同级iframe中table数据

//监听表单提交
        // 修改
        form.on('submit(saveBook)', function (data) {
            //layer.alert(JSON.stringify(data.field));
            data.field.categoryName=$("#categoryCode option:selected").text();
            data.field.languageName=$("#languageCode option:selected").text();
            data.field.locationName=$("#locationCode option:selected").text();
            data.field.publisherName=$("#publisherCode option:selected").text();
            $.ajax({
                url: '/api/book/save',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data.field),
                success: function (result) {
                    if (result.code == 200) {
                        // layer.msg("修改成功！", {icon: 6});
                        cleanForm("#saveBook");
                        if (data.field.id.length > 0) {
                            layer.closeAll();//关闭所有的弹出层
                        }
                        top.$("div").find("iframe")[0].contentWindow.userTable.reload();
                    } else {
                        layer.alert(result.message);
                    }
                }
            });

            return false;

        });

3.layui单选框radio的使用

 <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio"  id="male" name="sex" value="男" title="男">
                    <input type="radio"  id="female" name="sex" value="女" title="女">
                </div>
            </div>

form.on('radio',function (data) {
            $("input[name='sex']").prop("checked",false);
            $(data.elem).prop("checked",true);
        });

if(data.sex=='男'){
                    $("#male").prop("checked",true);
                    $("#female").prop("checked",false);
                }
                if(data.sex=='女'){
                    $("#male").prop("checked",false);
                    $("#female").prop("checked",true);
                }

                form.render(); //更新全部

4.使用日期控件

<div class="layui-inline">
                    <label class="layui-form-label">借出日期</label>
                    <div class="layui-inline">
                        <input type="text" name="borrowDate" id="borrowDate" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

laydate.render({
            elem: '#borrowDate',
            type: 'date',
            format:"yyyy-MM-dd",
            value: new Date()
        });

5.表格中格式化日期列

{field: 'borrowDate', title: '借阅日期', width: 120,templet:'<div>{{ layui.util.toDateString(d.borrowDate, "yyyy-MM-dd") }}</div>'}

6.日期选择后的事件函数

laydate.render({
            elem: '#borrowDate',
            type: 'date',
            format:"yyyy-MM-dd",
            value: borrowTime,
            done: function(value, date, endDate){
                returnTime=plusDays(new Date(value),30);
                alert(returnTime.Format("yyyy-MM-dd"));
                $("#returnDate").val(returnTime.Format("yyyy-MM-dd"));
            }
        });