jQuery之jqgrid分页技巧

前端 2019-01-11

内存分页

index.html

<html lang="cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- jqGrid组件基础样式包-必要 -->
        <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />

        <!-- jqGrid主题包-非必要 --> 
        <!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
        <link rel="stylesheet" href="jqgrid/css/css/flick/jquery-ui-1.8.16.custom.css" />

        <!-- jquery插件包-必要 -->
        <!-- 这个是所有jquery插件的基础，首先第一个引入 -->
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

        <!-- jqGrid插件包-必要 -->
        <script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>

        <!-- jqGrid插件的多语言包-非必要 -->
        <!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
        <script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
        <title>测试</title>

        <!-- 本页面初始化用到的js包，创建jqGrid的代码就在里面 -->
        <script type="text/javascript" src=".\js\index.js"></script>
    </head>
    <body>
        <table id="list2"></table> 
        <div id="pager2"></div>
        <br>

    </body>
</html>

index.js

$(function(){
    //页面加载完成之后执行
    pageInit();
});
function pageInit(){
    //创建jqGrid组件

    jQuery("#list2").jqGrid(
            {
                    datatype: 'local',
                       colModel:[
                        {name:"age",index:"age",label:'年龄',align:'center', width: '25%', sortable:false},
                        {name:"id",index:"id",label:'学号',align:'center', width: '25%', sortable:false},
                        {name:"name",index:"name",label:'姓名',align:'center', width: '50%', hidden:false}
                    ],
                    shrinkToFit : true,
                    rownumbers: true,
                    width :'600',
                    height: '100',
                    pager: 'pager2',
                    rowNum: 2
            });

    var rows = [{'age':'12','id':'1','name':'张三'},{'age':'22','id':'2','name':'李四'},
                {'age':'12','id':'3','name':'王五'},{'age':'22','id':'5','name':'马六'}];        
    var localData = {page: 1, total: 2, records: "2", rows: rows};
    localData.rows = rows;
    localData.records = rows.length;
    localData.total = (rows.length % 2 == 0) ? (rows.length / 2) : (Math.floor(rows.length / 2) + 1); 
    var reader = {  
                  root: function(obj) { return localData.rows; },  
                  page: function(obj) { return localData.page; },   
                  total: function(obj) {  return localData.total; },  
                  records: function(obj) { return localData.records; },  repeatitems : false};
    $("#list2").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid');     
    //调整高度
     jQuery("#list2").setGridHeight($(window).height() - 240);
     //加入toolbar
    $("#t_fa-dialog-gridTable").css("height", "38px").css("padding", "5px");
    var div = $('<div style="float:right;margin-right:20px;"></div>').appendTo("#t_fa-dialog-gridTable");
    var btn1 = $('<button type="button" title="导出报表" class="btn btn-default btn-xs" style="font-size:14px;"><i class="fa fa-download" aria-hidden="true"></i></button>').appendTo(div);
    btn1.on("click", function () {
        alert();
    });
}

常用属性

    shrinkToFit:false,
    autoScroll: false, //启动横向滚动条 
    sortname: 'SNGCMC',
    sortorder: 'desc',
    pager: 'pager2',  //分页
    rowNum: 27, 
    frozen: true,     //固定头部
    rownumbers: true, //启动行码
   toolbar: [true, "top"] //启动toolbar

中文API：http://blog.mn886.net/jqGrid/
github代码下载：https://github.com/zy20081/web.git

赏