layerui 时间段搜索+后台处理

   要实现效果如下:

前台代码基于Layui    

<div class="layui-form">
                <div class="layui-form-item fl">
                    <label class="layui-form-label" style="padding: 9px 0; text-align: center;width: auto;">搜索操作者:</label>
                    <div class="layui-input-inline mar-right20" style="width: auto;">
                        <input class="layui-input form-input-w200 disL" type="text" name="searchWord" id="searchWord"  placeholder="搜索关键词..." autocomplete="off"/>
                    </div>
                </div>
                  <div class="layui-form-inline">
            <label class="layui-form-label">操作时间:</label>
            <div class="layui-input-inline">
                <input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="请输入开始时间" class="layui-input">
            </div> -
            <div class="layui-input-inline">
                <input type="text" id="end_time" name="end_time" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
            </div>
            <button class="layui-btn" style="position: relative;top: 1px;left: -3px;border-radius: unset;" onclick="searchData()">搜索</button>
    </div>
            </div>

Js部分:

 layui.use(['laydate'], function () {
        var $ = layui.$;  
        var laydate = layui.laydate;  
        var nowTime = new Date().valueOf();  
        var max = null;  
      
        var start = laydate.render({  
            elem: '#start_time',  
            type: 'datetime',  
            format:'yyyy-MM-dd HH:mm:ss',  
            max: nowTime,  
            done: function(value, date,endDate){  
                endMax = end.config.max;  
                end.config.min = date; //最大时间为结束时间的开始值  
                end.config.min.month = date.month -1;  
                $("#start_time").val(value);
                searchData();
            }
        });  
          
        var end = laydate.render({  
            elem: '#end_time',  
            type: 'datetime',  
            max:  4073558400000,  
            format:'yyyy-MM-dd HH:mm:ss',  
            min:nowTime,  
            done: function(value, date){  
                if($.trim(value) == ''){  
                    var curDate = new Date();  
                    date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};  
                }  
                start.config.max = date;//最小时间为开始时间的最大值  
                start.config.max.month = date.month -1;  
                $("#end_time").val(value);
                searchData();
            }  
        })  

});
 

后台处理SpringMVC,处理可能不是很好,有好想法的欢迎留言:   
    public PageBean<OperateLog> findPageList(PageBean<OperateLog> page, String[] likeNames,
            Object[] likeParams, String[] names, Object[] params,String startTime,String endTime) throws DaoException {
        // TODO Auto-generated method stub
        try {
            StringBuffer hqlBuffer = new StringBuffer("from OperateLog where 1=1");
            if(StringUtils.isNotBlank(startTime)) {
                hqlBuffer.append(" and createDate >='"+startTime+"' " );
            }
            if(StringUtils.isNotBlank(endTime)) {
                hqlBuffer.append(" and createDate <='"+endTime+"' " );
            }
            String orderName[] = new String[] {"createDate"};
            String order[] = new String[] {"desc"};

            //仅仅只是个分页插件而已
            return super.findPageList(page, hqlBuffer, likeNames, likeParams, likeNames, params, orderName, order);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            log.error("分页查找操作日志列表发生错误!", e);
            throw new DaoException("分页查找操作日志列表发生错误!", e);
        }
    }

 

  

猜你喜欢

转载自blog.csdn.net/gzkahjl/article/details/81409097
今日推荐