效果图
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);
标签：name,easyui,绑定,modified,datagrid,var,switch,date,entered From： https://www.cnblogs.com/hailexuexi/p/17999539