再更進階一點，還有subgrid、grouping....等等，用過後，我之後任何後台系統的CRUD都改用jqGrid來呈現

除非新增、修改畫面太複雜(例如：ckeditor網頁編輯器、檔案上傳...等等)才另外做畫面

但是，這麼好用的套件有一個遺憾，就是預設不支援響應式網頁

如果瀏覽器視窗被用戶拉大縮小，jqGrid的寬度會仍舊維持不變，有時候還造成破版

好在網路上已經出現各種解法解決此問題，以下記錄本人讓jqGrid變得可支援響應式網頁使用的Code

第一步要先把jqGrid的autowidh:true此項拿掉，autowidth:true原本用意要讓jqGrid的呈現為滿版寬度(父元素的寬度)，但不知道它詳細計算邏輯如何

有時候呈現出來的寬度會破版或無法滿版(例如放在bootstrap的tab panel裡)，所以必須拿掉或改成autowidth:false(預設值)

第二步呼叫jqGrid的setGridWidth方法，填入jqGrid所在的父容器寬度，共有三處需要添加：loadComplete事件、jqGrid初始化繪製完畢、當瀏覽器視窗大小改變時。

jqGrid('setGridWidth', jqGrid父容器的width,是否縮齊column width);

以下是範例程式碼

<!--引用jqGrid樣式表--> <link rel="stylesheet" href="~/Content/css/ui.jqgrid.min.css" /> </head> <div class="row"> <div class="col-xs-12"> <table id="grid-table"></table> </div><!-- /.col --> </div><!-- /.row --> <!--引用jQuery函式庫--> <script src="~/Content/js/jquery-2.1.4.min.js"></script> <!--引用jqGrid.js--> <script src="~/Content/js/jqGrid/jquery.jqGrid.min.js"></script> <!--載入jqGrid中文語系--> <script src="~/Content/js/jqGrid/grid.locale-tw.js"></script> <script type="text/javascript"> $(function(){ const grid_selector = "#grid-table"; const pager_selector = grid_selector + "_toppager"; const $grid = jQuery(grid_selector); function reSizejqGridWidth() //重新抓jqGrid容器的新width let newWidth = $grid.closest(".ui-jqgrid").parent().width(); //是否縮齊column(相當於shrinkToFit) let shrinkToFit = true; $grid.jqGrid("setGridWidth", newWidth, shrinkToFit); //初始化jqGrid，我只挑幾個重點參數Demo $grid.jqGrid({ datatype: "local",//小技巧，初始化jqGrid時，datatype設為local可以避免網頁一載入jqGrid就馬上對後端發出ajax request toppager: true, pager: pager_selector, loadComplete: function () { //Load完資料也要重新改變寬度才保險 reSizejqGridWidth(); height: "auto",//個人習慣把height設為auto或100%，資料多少筆高度就多少，如果height設為固定高度的話 //資料一多，jqGrid會出現直的捲軸 //autowidth: true,//autowidth有時候會造成破版或放在tab pane裡不會滿版，廢code得拿掉，由以下的parent_dom.width()取代 //setTimeout is for webkit only to give time for DOM changes and then redraw!!! //本範例先執行jqGrid初始化，所以可不用setTimeout，否則有時候setTimeout還是必須的 //setTimeout(function () { reSizejqGridWidth(); //}, 20);//end setTimeout //當使用者改變瀏覽器視窗大小時 //resize to fit page size $(window).on("resize", reSizejqGridWidth); </script> </body> </html>

※↑此解法當網頁寬度過窄時，jqGrid並不會出現水平捲軸，如果真的column數量太多的話，可以考慮下面解法

修改兩個地方

1.View的部份加入CSS

<style type="text/css"> /*預設已是overflow:auto，寫在網頁裡再次確保會出現scroller*/ .ui-jqgrid .ui-jqgrid-bdiv { overflow:auto; </style>

2.setGridWidth的最後參數設為false

$grid.jqGrid("setGridWidth", newWidth, false);

範例程式碼↓

<!--引用jqGrid樣式表--> <link rel="stylesheet" href="~/Content/css/ui.jqgrid.min.css" /> <style type="text/css"> /*確保會出現scroller*/ .ui-jqgrid .ui-jqgrid-bdiv { overflow:auto; </style> </head> <div class="row"> <div class="col-xs-12"> <table id="grid-table"></table> </div><!-- /.col --> </div><!-- /.row --> <!--引用jQuery函式庫--> <script src="~/Content/js/jquery-2.1.4.min.js"></script> <!--引用jqGrid.js--> <script src="~/Content/js/jqGrid/jquery.jqGrid.min.js"></script> <!--載入jqGrid中文語系--> <script src="~/Content/js/jqGrid/grid.locale-tw.js"></script> <script type="text/javascript"> $(function(){ const grid_selector = "#grid-table"; const pager_selector = grid_selector + "_toppager"; const $grid = jQuery(grid_selector); function reSizejqGridWidth() //重新抓jqGrid容器的新width let newWidth = $grid.closest(".ui-jqgrid").parent().width(); //是否縮齊column(相當於shrinkToFit) let shrinkToFit = false; $grid.jqGrid("setGridWidth", newWidth, shrinkToFit); //初始化jqGrid，我只挑幾個重點參數Demo $grid.jqGrid({ datatype: "local",//小技巧，初始化jqGrid時，datatype設為local可以避免網頁一載入jqGrid就馬上對後端發出ajax request toppager: true, pager: pager_selector, loadComplete: function () { //Load完資料也要重新改變寬度才保險 reSizejqGridWidth(); height: "auto",//個人習慣把height設為auto或100%，資料多少筆高度就多少，如果height設為固定高度的話 //資料一多，jqGrid會出現直的捲軸 //autowidth: true,//autowidth有時候會造成破版或放在tab pane裡不會滿版，廢code得拿掉，由以下的parent_dom.width()取代 //setTimeout is for webkit only to give time for DOM changes and then redraw!!! //本範例先執行jqGrid初始化，所以可不用setTimeout，否則有時候setTimeout還是必須的 //setTimeout(function () { reSizejqGridWidth(); //}, 20);//end setTimeout //當使用者改變瀏覽器視窗大小時 //resize to fit page size $(window).on("resize", reSizejqGridWidth); </script> </body> </html>

執行結果↓

上述為凍結pager解法，隨著捲軸移動，pager仍會固定住，只捲動header和資料列，不過整體仍然支援響應式網頁

讓水平捲軸出現還有另一種解法，就是在<table id="grid-table"></table>外面包覆一層<div>容器，然後設定它的樣式overflow:auto和固定寬度

<div style="width:800px;overflow:auto;"> <table id="grid-table"></table>

不過由於此種解法捲軸一往右捲動的話，整個pager、header、資料列都會跟著被捲動，不符合個人需求，就不深入介紹了↓

Way to make jqGrid responsive on web browsers (stackoverflow 各種解法)

How to show horizontal scroll bar in jqgrid (stackoverflow)

另一款和jqGrid同樣強大的前端表格plugin還有 jsGrid

兩者功能大同小異，不過jsGrid在響應式網頁的支援比jqGrid較好

jsGrid相關文章： Use ajax to return data and itemCount in loadData function

如何更改jqGrid Theme Change style of jqGrid(stackoverflow)

jqgrid change pointer to hand(stackoverflow)

Disable row select in jqGrid on right click (stackoverflow)