首页layui列表查询时间选择

layui列表查询时间选择

时间: 2025-06-15 10:24:39 浏览: 7

layui是一个轻量级的前端UI库，它提供了一个简单易用的表格组件，可以方便地处理数据展示和查询操作，包括时间选择。在layui中，你可以通过结合`layDate`插件来进行时间选择。例如，在表格的列上添加一个搜索框，用户可以选择开始时间和结束时间进行日期范围查询。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="https://unpkg.com/layui/css/layui.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.9/layui.js"></script> </head> <body> <table id="demo" lay-filter="queryDemo" title="列表查询"> <thead> <tr> <th>创建时间</th> <th width="80">操作</th> </tr> </thead> <tbody>  </tbody> </table> <script> layui.use(['table', 'laydate'], function () { var table = layui.table, laydate = layui.laydate; // 初始化时间选择插件 laydate.render({ elem: '#datetimePicker', // 绑定元素ID format: 'yyyy-MM-dd HH:mm:ss' // 时间格式 }); // 查询函数，根据时间选择条件过滤表格数据 table.on('filter(queryDemo)', function (obj) { var start = obj.data.datetimePicker.start; var end = obj.data.datetimePicker.end; if (!start || !end) return; // 如果未选择时间，直接返回所有数据 // 这里假设你的后台API需要的时间格式一致，根据实际替换查询参数 table.reload('demo', { page: {} }, true); }); }); </script> </body> </html> ``` 在这个例子中，`datetimePicker`是id为`#datetimePicker`的 Laydate 搜索框，用户选择的时间会被传递到`filter(queryDemo)`事件中，进一步用于筛选表格数据。

阅读全文