easyui-datagrid 中Json方式请求，手动控制分页

在项目中要求用 Json的方式请求，并在 easyui-datagrid中实现分页。

easyui-datagrid 绑定方式

$('#grid').datagrid('options').url=url ; 
$('#grid').datagrid('options').queryParams=query;   
$('#grid').datagrid('reload');

无法实现自定义的Json格式

经一下午的对各位大神博主的学习及实践。完成了项目需求。写出来一起分享。同时感谢 折腾数据折腾代码 和 vaanhq 的两位大神代码的启发。

完整的解决方案：

html

<table id='grid' class='easyui-datagrid' style='width:100%;height:450px' 
            title='列表' iconCls='icon-table' pagination='true' rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' striped='true'  >  
        <thead>  
            <tr>  
                <th field='id' width='10' hidden='true'>编号</th>      
                <th field='name' width='20'align='center'>姓名</th>   
                <th field='sex' width='10'align='center'>性别</th>   
                <th field='mobile_tel' width='20'align='center'>移动电话</th>     
                <th field='created_user_name' width='20' align='center'>创建人</th> 
                <th field='date_entered' width='40' align='center'>创建时间</th>  
                <th field='description' width='50' align='center'  hidden='true' >备注</th>  
            </tr>  
        </thead>  
</table>

html 查询按钮

<a href='#' class='easyui-linkbutton'   iconCls='icon-select' style="height:29px;width:64px;" onclick='Select(1,10)'>查询</a>

其中 Select(1,10) 为查询方法 1为当前页，10为每页显示10行，这为默认值

JavaScript

//获取 查询 条件 参数 非本例的重点可不看
function SelectParameter(){
        var switch_date_entered= $("#switch_date_entered").switchbutton("options").checked;//alert(status);  //是否启动 日期查询条件
        var switch_date_modified= $("#switch_date_modified").switchbutton("options").checked;  //alert(switch_install_date);
        var start_date_entered=$('#start_date_entered').val();   //创建时间        
        var stop_date_entered=$('#stop_date_entered').val(); 
        var start_date_modified=$('#start_date_modified').val(); //修改时间          
        var stop_date_modified=$('#stop_date_modified').val();

        var name=$('#select_name').val();     
        var tel=$('#select_tel').val();     
        var address=$('#select_address').val();     
        var created_user_name=$('#select_created_user_name').val();    

        var department=$('#select_department').combobox('getValue');//部门
         
        var query={ 'switch_date_entered':switch_date_entered,'start_date_entered':start_date_entered,'stop_date_entered':stop_date_entered 
                    ,'switch_date_modified':switch_date_modified,'start_date_modified':start_date_modified,'stop_date_modified':stop_date_modified 
                    ,'name':name,'tel':tel,'address':address,'created_user_name':created_user_name
                    ,'department':department  };    
                    
        return query;
}

//查询  page为当前显示的页，rows为每页显示的行数
function Select(page,rows){    
        var query=SelectParameter(); //alert(query);//获取 查询 条件 参数 
        var url='Api-index.php?module=<{$module_name}>&action=Api_GridView_Select<{$get_current_user}>';   
        //参数--------------------------------------
        var para = {};
        para['page'] = page;//para['page'] = "2";  //当前显示页
        para['rows'] = rows;//para['rows'] = "10"; //每页显示的行数
        para['condition'] = query; //查询条件

        var params = {};
        params['module'] = "AddressBook";
        params['action'] = "query";
        params['apiVersion'] = "1.0";
        params['userId'] = "";
        params['sessionId'] = "";
        params['token'] = "";
        params['time'] = "";
        params['para'] = para ;
         
        //请求------------------------------
        $.ajax({
            type: "POST",
            url: url, //后台php文件的地址
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(params), //查询参数
            dataType: "json",
            success:function (data) {
                //alert("提交成功"+JSON.stringify(data));
                $("#grid").datagrid("loadData", data.rows);  //动态取数据
                 
                if (data.rows != null) {   //console.log('data.length '+data.rows.length); 
                    $( '#grid' ).datagrid();//重新定义 grid 这句必须有 不然下句则取不到分页控件对象
                    var pager = $('#grid').datagrid("getPager");//获取分页控件对象
                    $(pager).pagination({
                         pageNumber: page, //初始化的页码编号,默认1
                         pageSize: rows, //每页的数据条数，默认10
                         pageList:[10],//pageList: [10, 20, 50, 100, 150, 200], //页面数据条数选择清单
                         total: data.total, //**总行数***
                         onSelectPage: function (pageNo, pageSize) {  
                                console.log("onSelectPage "+pageNo+" "+pageSize );
                                Select(pageNo,pageSize); //pageNo当前的页码，pageSize每页多少行
                          }
                    });
                 }
                //-----------------------------------------------------
            },
            error:function (data) {
                alert("提交失败"+JSON.stringify(data));
            }
        }); 

 }

php

<?php   
    
    $table_name="address_book";  
    $arr_result = array(); //返回值  
    $where='';//查询条件  

    //获得post的json数据,
    $postJson = json_decode($GLOBALS['HTTP_RAW_POST_DATA']);    
    WriteLog($GLOBALS['HTTP_RAW_POST_DATA']); //输出日志
    WriteLog($postJson->para->condition->start_date_entered);    
    
    //分页
    $_POST['page']=$postJson->para->page;
    $_POST['rows']=$postJson->para->rows;
    
    //启动 哪个日期条件    
    if($postJson->para->condition->switch_date_entered=='true'  ){ //WriteLog($_POST['switch_date_entered']
        $where=" and date_entered >='{$postJson->para->condition->start_date_entered}' and date_entered <='{$postJson->para->condition->stop_date_entered}' ";  
    }else if ($postJson->para->condition->switch_date_modified =='true'  ) {
        $where=" and date_modified >='{$postJson->para->condition->start_date_modified}' and date_modified <='{$postJson->para->condition->stop_date_modified}' ";  
    }
 
    $where= " deleted=0 " . $where;
    $order_by=" order by date_entered desc ";

    //导出 或 打印  非本例重点 可略
    if($_GET['target']=="ToExcel" || $_GET['target']=="Print" ){
        $arr_result['where'] = $where;      //将条件 传出
        $arr_result['order_by'] = $order_by;      //将条件 传出
        //WriteLog($where);  
        //WriteLog($order_by);  
        echo json_encode($arr_result);
        exit(0);
    }

    //分页  重点
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;   
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;   
    $offset = ($page-1)* $rows;   
    
    $sql ="SELECT COUNT(id) AS total FROM {$table_name} where " . $where ;   
    //WriteLog($sql);  
    $arr_result['total'] =$db->query_count($sql);//行数  
    //WriteLog($result['total'].'-----' );  
    
    //结果集      
    $items = array();  
    $sql = "select * from {$table_name} where ".$where . $order_by ." limit $offset,$rows ";   
    WriteLog($sql);  
     
    $result_rows=$db->query($sql);  
    while($row=$db->fetch_array($result_rows))  
    {  
        //$select_title='选择';//iconv('GB2312','UTF-8','选择');  
        //$row['select']="<a href='#'  style='text-decoration:none;' onclick='javascript:Show_Contact(\'". $row['id'] . "\');> " . $select_title . ' </a>';  
        array_push($items, $row);   
    }  

    $arr_result['rows'] = $items;       

    WriteLog(json_encode($arr_result));  
    echo json_encode($arr_result);   

?>