jqgrid-01

  简单说说一下grid的分页。开启pager会给后台传递两个重要数据，page,rows。后台返回的数据格式为：

rows：查询的数据集合

total：总页数

records：总条数。

就这样，就可以完成jqgrid的分页。注意：一下可用

$(document).ready(function() {
            $.jgrid.defaults.styleUI = "Bootstrap";
            $("#table_list_2").jqGrid({
                url : "....",
                datatype : "json",
                mtype : "post",
                height : 450,
                autowidth : true,
                shrinkToFit : true,
                rowNum : 20,
                page : 1,
                rowList : [ 10, 20, 30 ],
                colNames : [ "序号", "角色名称", "角色描述", "创建时间", "最后操作时间", "操作者" ],
                colModel : [ {
                    name : "id",
                    index : "id",
                    width : 60,
                    sorttype : "int",
                    search : true,
                    align : "center",
                }, {
                    name : "name",
                    index : "name",
                    width : 90,
                    editable : true,
                }, {
                    name : "description",
                    index : "nadescriptionme",
                    editable : true,
                    width : 100
                }, {
                    name : "created",
                    index : "created",
                }, {
                    name : "lastModifyTime",
                    index : "lastModifyTime",
                    width : 80,
                }, {
                    name : "modifyUserName",
                    index : "modifyUserName",
                    align : "center",
                } ],
                pager : "#pager_list_2",
                viewrecords : true,
                caption : "角色列表",
                //add : true,
                //edit : true,
                //addtext : "Add",
                //edittext : "Edit",
                hidegrid : false
            });
            //$("#table_list_2").setSelection(4, true);
            $("#table_list_2").jqGrid("navGrid", "#pager_list_2", {
                edit : false,
                add : false,
                del : false,
                search : false,
            }, {
                height : 200,
                reloadAfterSubmit : true
            });
            $(window).bind("resize", function() {
                var width = $(".jqGrid_wrapper").width();
                $("#table_list_2").setGridWidth(width)
            })
        });

注意：datatype:为json,否则有可能不能传递数据

这里，我没有使用jqgrid自带的工具按钮，感觉使用起来不好。

自定义按钮来完善功能。

增加：在添加一个条目后，需要重新加载数据。使用jqgird的事件为：

$("#table_list_2").setGridParam({url:".."}).trigger("reloadGrid");

这里与上面的是同一个接口，会自动传递page和rows两个参数。