easyui-datagrid 加载数据 方法一( 数据绑定方式 )

 效果图

 html 部分

<div style='padding:0px 0px 7px 12px ;'> 
        <table class="my_table" > 
            <tr> 
                <td class='my_dt_label'>姓名:</td> 
                <td class='my_dt_field'><input type='text' id='select_name' class='my_input' size='30' /></td> 
                <td class='my_dt_label'>电话号码:</td> 
                <td class='my_dt_field'><input type='text' id='select_tel' class='my_input' size='30' /></td> 
                <td class='my_dt_label'>地址:</td> 
                <td class='my_dt_field'><input type='text' id='select_address' class='my_input' size='30' /></td> 
                <td class='my_dt_label'>部门:</td> 
                <td class='my_dt_field'><select id="select_department" class="easyui-combobox"  style="height:28px;width:200px;" editable=false ><{$select_option_department}></select></td>
                <td style="padding: 0px 0px 0px 5px;"> 
                    <a href='#' class='easyui-linkbutton'   iconCls='icon-select' style="height:29px;width:64px;" onclick='Select()'>查询</a> 
                </td>
            </tr> 
        </table> 
        <table> 
            <tr> 
                <td style="width:65px;">创建时间:</td><td><input id="switch_date_entered" class="easyui-switchbutton"  style="width:60px;height:26px" onText="部分" offText="全部"  /> </td> 
                <td style="padding: 0px 0px 0px 2px;"> <input id="start_date_entered" value="<{$start_date}>" placeholder="开始日期" class="my_input laydate-icon" style="height:29px;"  onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly ></input></td> 
                <td><span class="input-group-addon" style="height:28px;">至</span></td> 
                <td><input id="stop_date_entered" value="<{$stop_date}>" placeholder="结束日期" class="my_input laydate-icon" style="height:29px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"  readonly  ></input>    </td> 
                <td style="width:10px;"> </td>
                <td style="width:65px;">修改时间:</td><td><input id="switch_date_modified" class="easyui-switchbutton" style="width:60px;height:26px" onText="部分" offText="全部"  /></td> 
                <td  style="padding: 0px 0px 0px 2px;"> <input id="start_date_modified" value="<{$start_date}>" placeholder="开始日期" class="my_input laydate-icon" style="height:29px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly ></input></td> 
                <td ><span class="input-group-addon" style="height:28px;">至</span></td> 
                <td ><input id="stop_date_modified" value="<{$stop_date}>" placeholder="结束日期" class="my_input laydate-icon" style="height:29px;" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"  readonly ></input>    </td> 
                
            </tr>
        </table> 
    </div>
    <table id='grid' class='easyui-datagrid' style='width:100%;height:470px'  
            title='列表' iconCls='icon-table' pagination='true' rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' >  
        <thead>  
            <tr>  
                <!-- <th field='select' width='30' align='center'></th>-->  
                <th field='id' width='10' hidden='true'>编号</th>      
                <th field='name' width='20'align='center'>姓名</th>   
                <th field='office_tel' width='22'align='center'>电话号码</th>   
                <th field='mobile_tel' width='22'align='center'>移动电话</th>   
                <th field='other_tel' width='22'align='center'>其它电话</th>   
                <th field='sex' width='10'align='center'>性别</th>   
                <th field='department' width='40'align='center'>部门</th>  
                <th field='position' width='15'align='center'>职位</th> 
                <th field='description' width='20' align='center'   >区域</th>
                <th field='address' width='40' align='center'>地址</th>  
                <th field='date_entered' width='30' align='center'>创建时间</th>  
                <th field='created_user_name' width='20' align='center'>创建人</th> 
            </tr>  
        </thead>  
    </table> 
    <div id='toolbar' style='display: flex;align-items:Center; height:35px;' > <!--
        <a href='#' class='easyui-linkbutton' iconCls='icon-select-file' plain='true' onclick='Detail()' <{$Detail_disabled}> >详细</a>
        <a href='#' class='easyui-linkbutton' iconCls='icon-add' plain='true' onclick='Add()'   <{$Add_disabled}>  >新增</a>  
        <a href='#' class='easyui-linkbutton' iconCls='icon-edit' plain='true' onclick='Edit()' <{$Edit_disabled}>  >编辑</a>   
        <a href='#' class='easyui-linkbutton' iconCls='icon-remove' plain='true' onclick='Delete()' <{$Delete_disabled}> >删除</a>  
        <a href='#' class='easyui-linkbutton' iconCls='icon-excel' plain='true' onclick='ToExcel()' <{$ToExcel_disabled}> >导出</a> 
        <div class="btn-separator"></div>
        <a href='#' class='easyui-linkbutton' iconCls='icon-data-import' plain='true' onclick='SaveToXml()'  >一键生成通讯录</a> 
        <div class="btn-separator"></div>
        <a href='#' class='easyui-linkbutton' iconCls='icon-refresh' plain='true' onclick='Refresh()'>刷新</a> 
        <a href='#' class='easyui-linkbutton'  iconCls='icon-cancel' plain='true' onclick='parent.TabClose();'>关闭</a>
    </div> 

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;
    }
    //查询
    function Select(){   
        var query=SelectParameter(); //alert(query);//获取 查询 条件 参数 
        
        var url='Api-index.php?module=<{$module_name}>&action=Api_GridView_Select<{$get_current_user}>' ;   //alert(url);
        $('#grid').datagrid('options').url=url ; 
        $('#grid').datagrid('options').queryParams=query;   
        $('#grid').datagrid('reload');       
    }   

php部分

$table_name='address_book';  
    $arr_result = array(); //返回值  
    $where='';//查询条件  
    
    //启动 哪个日期条件    
    if($_POST['switch_date_entered']=='true'  ){ //WriteLog($_POST['switch_date_entered']
        $where=" and date_entered >='{$_POST['start_date_entered']}' and date_entered <='{$_POST['stop_date_entered']}' ";  
    }else if ($_POST['switch_date_modified']=='true'  ) {
        $where=" and date_modified >='{$_POST['start_date_modified']}' and date_modified <='{$_POST['stop_date_modified']}' ";  
    }
 
    //其它条件  
    if($_POST['name']!=''){   
        $where .=" and name like '%{$_POST['name']}%' ";  
    }  
    if($_POST['address']!=''){  
        $where .=" and address like '%{$_POST['address']}%' "; 
    }  
    if($_POST['tel']!=''){  //mobile_tel office_tel home_tel other_tel  
        $where .=" and ( mobile_tel ='{$_POST['tel']}' or office_tel = '{$_POST['tel']}' or home_tel = '{$_POST['tel']}' or other_tel = '{$_POST['tel']}' ) ";  
    }  
    if($_POST['created_user_name']!=''){  
        $where .=" and created_user_name = '{$_POST['created_user_name']}' "; 
    }  
    if($_POST['department']!='' && $_POST['department']!='0'){  
        $department=$_POST['department']; 
        $where .=" and department = '{$department}' ";  
    } 
    
    $where= " deleted=0 " . $where;
    $order_by=" order by department desc ";  //date_entered

    //导出 或 打印
    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);