laravel框架學(xué)習(xí)之路（二）pjax的使用

vvpale 發(fā)布于2019-08-02 10:31 / 2037人閱讀

摘要：繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺用戶認(rèn)證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時，菜單顯示刪除按鈕確定刪除此項確定取消

繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路（一）前后臺用戶認(rèn)證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續(xù)我的laravel框架學(xué)習(xí)之路。如需參考代碼請移步kaihongChan@github.com（ps:項目還在逐步完善中，還有許多不足，如遇bug，請在評論區(qū)告知筆者）

關(guān)于什么是pjax，請讀者自行百度。

準(zhǔn)備工作：
1、下載jquery.pjax.js文件點擊下載
2、下載NProgress
3、將所需文件放入項目中，并在布局文件中引用。（框架public目錄下）

開始：
這里筆者使用的是adminLTE后臺模板，具體使用可參考在Laravel5.* 中使用 AdminLTE

安裝pjax的composer包（laravel中間件）：

$ composer require spatie/laravel-pjax

在kernel.php文件中加入代碼:

// app/Http/Kernel.php

...

protected $middleware = [

...

SpatiePjaxMiddlewareFilterIfPjax::class,

];

配置pjax完成頁面交互：（ps：筆者整站使用pjax加載頁面，故在全局js文件中配置pjax，讀者可根據(jù)需要另行配置）

$.pjax.defaults.timeout = 5000;
$.pjax.defaults.maxCacheLength = 0;
//配置可點擊的標(biāo)簽使用pjax
$(document).pjax("a:not(a[target="_blank"])", {
    container: "#pjax-container"http://配置pjax刷新容器
});

NProgress.configure({parent: "#pjax-container"});
//超時執(zhí)行函數(shù)
$(document).on("pjax:timeout", function (event) {
    event.preventDefault();
});

至此，laravel結(jié)合pjax已完成。

附件：
筆者的布局（layout.blade.php）：





    
    
    AdminLTE
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    

    
    
    

    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    





    
    @include("admin::partials.header")

    
    @include("admin::partials.sidebar")

    
    

        
        

            @yield("content") 
            
        
        
    
    

    
    @include("admin::partials.control")
    

    
    @include("admin::partials.footer")

全局js文件（admin-base.js）：

toastr.options = {
    closeButton: true,
    progressBar: true,
    showMethod: "slideDown",
    positionClass: "toast-top-right",
    timeOut: 4000
};

$.pjax.defaults.timeout = 5000;
$.pjax.defaults.maxCacheLength = 0;
$(document).pjax("a:not(a[target="_blank"])", {
    container: "#pjax-container"
});

NProgress.configure({parent: "#pjax-container"});

$(document).on("pjax:timeout", function (event) {
    event.preventDefault();
});

$(document).on("submit", "form[pjax-container]", function (event) {
    $.pjax.submit(event, "#pjax-container")
});

$(document).on("pjax:popstate", function () {

    $(document).one("pjax:end", function (event) {
        $(event.target).find("script[data-exec-on-popstate]").each(function () {
            $.globalEval(this.text || this.textContent || this.innerHTML || "");
        });
    });
});

$(document).on("pjax:send", function (xhr) {
    if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === "form") {
        $submit_btn = $("form[pjax-container] :submit");
        if ($submit_btn) {
            $submit_btn.button("loading")
        }
    }
    NProgress.start();
});

$(document).on("pjax:complete", function (xhr) {
    if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === "form") {
        $submit_btn = $("form[pjax-container] :submit");
        if ($submit_btn) {
            $submit_btn.button("reset")
        }
    }
    NProgress.done();
});

$(function () {
    $(".sidebar-menu li:not(.treeview) > a").on("click", function () {
        var $parent = $(this).parent().addClass("active");
        $parent.siblings(".treeview.active").find("> a").trigger("click");
        $parent.siblings().removeClass("active").find("li").removeClass("active");
    });

    $("[data-toggle="popover"]").popover();

    //整頁刷新時，菜單顯示
    var selector = $(".sidebar-menu").find("a[href="/"+ selectedMenu +""]");
    selector.parent().addClass("active");
    selector.parents("ul.treeview-menu").css("display", "block");
    selector.parents("li.treeview").addClass("menu-open");

    //datatables刪除按鈕
    $("#pjax-container").on("click", ".row-delete", function () {
        var del_url = $(this).data("url");
        swal({
            title: "確定刪除此項？",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "確 定",
            closeOnConfirm: false,
            cancelButtonText: "取 消"
        }, function(){
            $.ajax({
                method: "post",
                url: del_url,
                data: {
                    _method:"delete",
                    _token:csrf_token,
                },
                success: function (data) {
                    if (typeof data === "object") {
                        if (data.status) {
                            swal(data.message, "", "success");
                            $.pjax.reload("#pjax-container");
                        } else {
                            swal(data.message, "", "error");
                        }
                    }
                }
            });
        });
    });
});