1. 程式人生 > >關於MVC中使用JqGrid外掛分頁時無法顯示分頁按鈕(首頁、上一頁、下一頁、最後一頁)的原因

關於MVC中使用JqGrid外掛分頁時無法顯示分頁按鈕(首頁、上一頁、下一頁、最後一頁)的原因

遇到這樣問題的小夥伴,可以嘗試下如下方法(注意:在各種指令碼和樣式都引用正確的情況下可參考):

當你發現或覺得這中情況的出現讓你百思不得其解時,首先我們來對比一下我們雙方的指令碼和樣式引用:
CSS:

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Scripts/JqGrid/ui.jqgridffe4.css" rel="stylesheet" />

JS:
<script src="~/Scripts/jquery-1.11.0.min.js"></script>
    <script src="~/Scripts/BoootStrap/bootstrap.min.js"></script>
<script src="~/Scripts/JqGrid/grid.locale-cnffe4.js"></script>
    <script src="~/Scripts/JqGrid/jquery.jqGrid.minffe4.js"></script>

其次,我們發現,決定這些按鈕的顯示的,應該不僅僅是CSS的問題,還與jquery.jqGrid.minffe4.js有重大關係(是它決定了在載入時怎樣呼叫樣式類的)!開啟jquery.jqGrid.minffe4.js進去看一下:

我們發現,在決定StyleUI時有兩種選擇:1是jQueryUI,2是Bootstrap。很顯然,web優先使用了jQueryUI。由此,我們在使用JqGrid({})中就可以使用styleUI引數來選擇了。就如:
$("#grid").jqGrid({
                    url: '/Membership/GetUserList',
                    postData: { phone: phone, keyword: keyword },
                    datatype: "json",
                    height: height,
                    autowidth: true,
                    shrinkToFit: true,
                    forceFit: true,

                    styleUI:'Bootstrap',

                    loadtext: '資訊讀取中...',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    multiselect: true,。。。。。。。。這樣寫下去了。

PS:這種方法,並不能保證一定有效,再說這樣的問題也許只在使用MVC中在分佈頁中又定義了jquery指令碼(<script src="~/Scripts/jquery-1.11.0.min.js"></script>)才會出現的問題,若不然,應該不會出現這樣的問題的。
再PS:styleUI這個引數之前我也是使用過的,只是沒想到這次問題出現在了這裡。

以上。