最近开发需要用到开始时间到结束时间中间的时间范围搜索，加上姓名、电话多条件搜索，在网上找了一些参考，加上自己的修改最终完成，在这里记录一下，加深记忆方便以后直接用。
话不多说，上图片：
html代码：
<div class="mainCt">
<div class="mainWrap">
<form class="layui-form" action="/admin/task/index" id="sub">
<div class="layui-inline">
<label class="layui-form-label" style="width: 100px;">开始时间</label>
<div class="layui-input-inline">
<input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="请输入 开始时间" value="" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 100px;">结束时间</label>
<div class="layui-input-inline">
<input type="text" id="end_time" name="end_time" value="" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" id="name" name="name" value="" placeholder="姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">电话</label>
<div class="layui-input-inline">
<input type="text" id='telphone' name="telphone" value="" placeholder="电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体</label>
<div class="layui-input-inline">
<select name="media" id="media">
<option value="">全部</option>
{volist name="$media" id="v"}
<option value="{$v.mt_name}">{$v.mt_name}</option>
{/volist}
</select>
</div>
</div>
<div style="height:20px;"></div>
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="status" id="status">
<option value="">全部</option>
<option value="0">未处理</option>
<option value="1">已处理</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button class="layui-btn" id="searchBtn" lay-submit
lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
<i class="layui-icon layui-icon-search"></i> 查询
</button>
<a class="layui-btn layui-bg-red" href="{:url('xs_clue/index')}">
<i class="mdi mdi-broom"></i>
<span class="title">重置</span>
</a>
</div>
</div>
</form>
<div class="forwardTable farTable">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
</div>js代码：
<!--脚本-->
<script>
var tableIns; // 数据表格对象，用于重载
layui.use(['table','form','laydate'], function(){
var table = layui.table, form = layui.form;var laydate = layui.laydate;
// 数据表格字段
var data = '{$colsData|raw}';
var colsData = JSON.parse(data);
console.log(colsData);
// 通用表头生成器
function commonCols(language,colsData){
// 左侧勾选栏
var cols = [{type: 'checkbox', fixed: 'left'}];
var l = colsData.length;
// 遍历所有字段
for(var i = 0; i < l; i++){
if(colsData[i].Field !== 'delete_time'){
if(colsData[i].Field !== 'id'){
cols.push({field: colsData[i].Field ,title: colsData[i].Comment, sort:true, minWidth:120, totalRow:true});
}
}
}
// 右侧操作工具
cols.push({fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo', width: 200});
return [cols];
}
// 生成表格
tableIns = table.render({
elem: '#test'
,url:"{:url('xs_clue/index')}"
,where: {}
,toolbar: '#forwardBar'
,defaultToolbar: ['filter', 'exports', 'print']
,title: '客户线索表'
,cols : commonCols(language, colsData)
,page: true, limit:50, height:700
});
var endDate= laydate.render({
elem: '#end_time',//选择器结束时间
type: 'datetime',
min:"1970-1-1",//设置min默认最小值
done: function(value,date){
$('#end_time').change();
startDate.config.max={
year:date.year,
month:date.month-1,//关键
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
}
}
});
//日期范围
var startDate=laydate.render({
elem: '#start_time',
type: 'datetime',
max:"2099-12-31",//设置一个默认最大值
done: function(value, date){
$('#start_time').change();
endDate.config.min ={
year:date.year,
month:date.month-1, //关键
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
};
}
});
// 回车亦可以搜索
$(document).keyup(function (event) {
if (event.keyCode == 13) {
$("#search_btn").trigger("click");
}
});
//用body触发搜索条件可以避免搜索一次后，再点击搜索失效
$('body').on('click','#searchBtn',function(){
table.reload('test', {
method : 'post',
where : {
name : $('#name').val(),
telphone : $('#telphone').val(),
status:$('#status').val(),
media:$('#media').val(),
start_time:$('#start_time').val(),
end_time:$('#end_time').val(),
},
page : {
curr : 1
},
done:function () {
//执行一个laydate实例
laydate.render({
elem: 'start_time' //指定元素
});
}
});
return false;
});
//重置
$('#reset').on('click', function() {
table.reload('test', {
url: "{:url('xs_clue/index')}",
page: true
, limit:50
});
});
});
</script>搜索的话，时间使用的laydate插件：
姓名后台使用的是模糊查询，上后台代码：
// 显示列表 控制层
public function index(Request $request, $search_type = '', $name = '', $limit = 50)
{
// 数据库表字段集
$colsData = getAllField('ky_xs_clue');
$param = input('post.');
// 查询媒体信息
$media = Db::name('mt_media')->where('delete_time',0)->field(['id','mt_name'])->select();
// 非Ajax请求，直接返回视图
if (!$request->isAjax()) {
$this->assign(['colsData'=> json_encode($colsData),'media'=>$media]);
return $this->fetch();
}
// 调用模型获取列表
$list = XsClueModel::getList($search_type,$param,$limit);
// 返回数据
return json(generate_layui_table_data($list));
}
//模型层 对搜索字段处理，返回数据
public function getList($search_type,$param, $limit = 50)
{
$name = session('administrator')['name'];
$query = $this;
$where = [
'delete_time' => 0,
];
if(!empty($param)){
if($param['name']){
$query = $query->where('name', 'like', '%'.$param['name'].'%');
}
if($param['telphone']){
$query = $query->where('telphone', 'like', '%'.$param['telphone'].'%');
}
if($param['media']){
$query = $query->where('media', '=', $param['media']);
}
if($param['status']){
$query = $query->where('status', '=', $param['status']);
}
//时间范围搜索也可以用whereBetweenTime
if($param['start_time']){
$start_time = strtotime($param['start_time']);
$query = $query->where('create_time', '>', $start_time);
}
if($param['end_time']){
$end_time = strtotime($param['end_time']);
$query = $query->where('create_time', '<', $end_time);
}
}
// 返回分页对象
return $query->where($where)->order('id desc')->paginate($limit);
}
3736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
