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();//關閉所有的彈出層
                        }
                        $(".layui-show").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"));
            }
        });

 

7.表格列不同值設置不同顏色

 

, {field: 'borrowStatus', title: '狀態', width: 80,templet:showStatus}

// 借閱狀態
    function showStatus(data) {
        var status = data.borrowStatus;
        var result;
        if (status == 0) {
            result = '<a class="" style="color:#FF5722">未還</a>';
        }
        if (status == 1) {
            result = '<a class="" style="color:#009688">已還</a>';
        }
        if (status == 2) {
            result = '<a class="" style="color:#FF5722">逾期</a>';
        }
        return result;
    }

 

8.控制上傳文件類型

這裏以控制職能上傳xls|xlsx文件爲例。

upload.render({
            elem: '#uploadExcel' //綁定元素
            ,url: 'api/student/upload' //上傳接口
            ,accept: 'file' //普通文件
            ,acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ,exts: 'xls|xlsx' //只允許上傳xls文件
            ,before:function (obj) {
                layer.load(); //上傳處理loading
            }
            ,done: function(res){
                // 上傳完畢回調
                layer.closeAll('loading'); //關閉loading
                if(res.code==200){
                    userTable.reload();
                    layer.msg("導入成功！");
                }else {
                    layer.msg(res.message);
                }
            }
            ,error: function(){
                //請求異常回調
                layer.closeAll('loading'); //關閉loading
                layer.msg("導入失敗！");
            }
        });