後臺管理頁面，jqGrid框架使用

之前做後臺管理頁面是用的 jquery+LayUI，樣式什麼的，分頁表格啊，表單之類的全是LayUI搞定。

不過現在覺得 LayUI還是有點混亂。

然後最近在做一個新的後臺管理頁面，是用的 jquery + jqGrid + bootstrap + fa。

我感覺jqGrid還是用起來很舒服，雖然它僅僅是針對 分頁表格。

但是一開始用的時候，因爲很多方法和屬性不知道，所以覺得用起來不是那麼方便，到後來慢慢了解了，覺得用起來很清晰很方便。

這裏記錄 jqGrid 的一些用法。

首先寫一個<table> 表格和一個div分頁

<div class="box-body">
                        <table id="gridTable2" class="table table-bordered table-hover"></table>
                        <div id="gridPager2"></div>
</div>

然後js，得到數據並顯示

            jqGrid("#gridTable2", {
                url: apiBaseUrl + "layout/getallmodule"+"?layoutId="+layoutId,
                mtype: "GET",
                datatype: "json",
                styleUI: 'Bootstrap',
                autowidth: true,
                height: "100%",
                multiselect: true,
                colNames: ['自定義Id', '名稱', '介紹', '路由連接', '排序值', '埋點頁面', 'api版本', '操作'],
                colModel: [
                    { name: 'moduleId', index: 'moduleId', width: 150, sortable: false},
                    { name: 'name', index: 'name', width: 150, hidden: true },
                    { name: 'intro', index: 'intro', width: 150, hidden: true },
                    { name: 'url', index: 'url', width: 100, sortable: false},
                    { name: 'sequence', index: 'sequence', width: 50 },
                    { name: 'page', index: 'page', width: 100, sortable: false},
                    { name: 'apiVersion', index: 'apiVersion', width: 100, sortable: false},
                    {
                        name: 'operation', index: 'operation', width: 150, sortable: false, formatter: function (cellvalue, options, row) {
                            var mid = "'" + row.moduleId + "'";
                            return '<a href="javascript:btnEdit(' + mid + ')" class="btn btn-primary" style="width:100px" ><i class="fa fa-pencil-square-o"></i>編輯</a>'
                        }
                    }
                ],
                rowNum: 10,
                rowList: [10, 30, 50, 100],
                pager: '#gridPager2',
                sortname: 'id',
                sortorder: "desc",
            });

表格刷新用：

$("#gridTable2").trigger('reloadGrid');

如果開啓多選，如何得到選中的數據，比如這裏我想拿到每條數據的在數據庫中的主鍵值，用於批量刪除等。

var rowId = $("#gridTable2").jqGrid('getGridParam', 'selarrrow'); //得到選中的標記行id(jqGrid的東西)
var row = [];
for (var i = 0; i < rowId.length; i++) {
                            var one = $("#gridTable2").jqGrid('getRowData', rowId[i]); //得到某個標記行的數據
                            row.push("'"+one.moduleId+"'"); //取得某列數據，可爲隱藏列
}
var moduleids = row.join(',');

當刪除時碰到特殊情況，比如第二頁只有一條數據，刪除之後，刷新表格要顯示到第一頁，不然默認是第二頁會造成顯示錯誤。

                                var curcount = $('#gridTable2').jqGrid("getRowData").length; //當前頁幾條數據
                                    var curpage = $("#gridTable2").jqGrid("getGridParam", "page"); //當前爲第幾頁
                                    if (curpage > 1 && curcount == 1) {
                                        $("#gridTable2").jqGrid('setGridParam', {
                                            page: curpage-1
                                        }).trigger('reloadGrid');
                                    } else {
                                        $("#gridTable2").trigger('reloadGrid');
                                    }

 

以下記錄一些鏈接，方便查詢搜索：

jqGrid用法：  https://blog.mn886.net/jqGrid/

fa圖標庫：  http://www.fontawesome.com.cn/faicons/

bootstrap用法：  https://v3.bootcss.com/css/#tables