后台管理页面，jqGrid框架使用

最新推荐文章于 2024-04-30 19:40:07 发布

*八步赶蝉*

最新推荐文章于 2024-04-30 19:40:07 发布

阅读量711

点赞数

本文链接：https://blog.csdn.net/qq_38261174/article/details/99297152

版权

之前做后台管理页面是用的 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');
                                    }