JqGrid 简单使用

JqGrid 简单使用，老司机简单上手！不掉头，向前走！

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。
JqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。
换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。
对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。

下载

在 Download Builder 官方页面下载JqGrid，可以选择自己需要的组件下载，获得一个定制的版本。

使用

1. 下载 解压到文件根目录或者直接引用

2. 在HTML页面引入css和js

    <link rel="stylesheet" href="jQueryUI/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
    
    <script src="jqGrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

3. 添加列表

<div>
    <!-- 列表展示 -->
  <table  id="data_list"></table>
    <!-- 分页展示 -->
  <div  id="pager"></div>
</div>

4. 分页列表信息

<script type="text/javascript">

    //页面加载 
    $(function(){
    var url="https://blog.youkuaiyun.com/YBaog"; //返回json数据
    runGird(url);
  });
  
  // 点击查询
  $('#sumbit_btn').click(function() {
    gridReload();
  });

 //初始化表格函数
 function runGird(url) {
    $("#data_list").jqGrid({
      url: url,
      datatype: "json",
        colNames:["日期","应用名称","国家","用户"],
        colModel:[
          {name:'date',index:'date', width:90},
          {name:'app_name',index:'app_name', width:100},
          {name:'country',index:'country', width:90},
          {name:'user',index:'user', width:90,searchtype:"number"},
      
        ],
//        altRows:true, //设置交替
        rowNum:30,
        rowList:[10, 30, 50, 100],  //下拉框显示页面数据量
        pager: '#pager',
        width : "auto",
        height : "auto",
        viewrecords: true,   //显示记录条数
        footerrow : true,   //增加一行
        sortname: 'date',     //排序列
        sortorder: "desc",   //排序
        paging:true,        //翻页
        pgbuttons:true,     //按钮
        loadonce: true     //开启分页
        filtering:true,    //自动查找
        userDataOnFooter : true,   //userData 底部数据

    });

    jQuery("#data_list").jqGrid('navGrid','#pager',{edit:false, add:false, del:false, search:false},
      {},
      {},
      {},
      {multipleSearch:true, showQuery: true}
    );
  }

// 重载函数
  function gridReload() {
    var app_name = $("#app_name ").val() || "";
    var country= $("#country").val() || "";
    var start_date = $("#start_date").val() || "";
    var end_date = $("#end_date").val() || "";
    var url = "https://blog.youkuaiyun.com/YBaog"; 

    $("#data_list").jqGrid('setGridParam', {
      url : url+"?_user_search=true&country=" + country+ "&start_date=" + start_date + "&end_date=" + end_date+"&app_name="+app_name,
      page : 1,
      datatype:'json'
    }).trigger("reloadGrid");   //重载表格数据
  }
  
</script>

5. PHP 后台

 header("Content-type: text/xml; charset=utf-8");
        
        /*
         * 根据自己的需求来写逻辑
         */

        //连接数据库
        $pdo = new \PDO("mysql:host=127.0.0.1;dbname=test;port=3306;charset=utf8","root","root");
        $pdo->query("set names utf8");

        //获取数据
        $sqls="SELECT * FROM  `tableName` ORDER BY id ;";
        $resPDO=$pdo->query($sqls);
        $data=$resPDO->fetchAll();

        //列表数据（根据前面分页列的顺序）
        $list['rows'] = $data;

        //底部数据（根据前面分页列的顺序）
        $list['userdata']=array(
            'date'=>'总计',
            'app_name'=>count($data['app_name']),
            'country'=>count($data['country']),
            'user'=>count($data['user']),
        );

        $list=json_encode($list,true);
        return $list;

小小总结，希望对你有所帮助！
如若有错，望君指出！