layui如何实现全局排序切换

2025-10-19前端开发
292

layui默认提供有sort排序,但是仅针对当前页面中的数据,无法实现全局数据的排序,如果需要全局排序,需要后台程序支持才可以实现。

可以在layui触发排序事件上改进下。本功能必须配合后台程序否则无效。

实现方法

table格式这么写:
<table class="table" id="list" lay-filter="list"></table>
为了便于后续,id和lay-filter都设置成了list
//监听排序事件 
table.on('sort(list)',
function(obj) {
    table.reload('list', {
        initSort: obj, //记录初始排序,如果不设的话,将无法标记表头的排序状态。
        where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
            field: obj.field,//排序字段
            order: obj.type //排序方式
        }
    });
});
php代码这么写,需要进行修改:
$field = input('field');
$order = input('order');
if(empty($order)){
    $order = "id desc";//默认id倒序
}else{
    $order = "{$field} {$order}";//根据lay排序
}
The End
layui layui排序

相关推荐

layui如何实现全局排序切换
layui默认提供有sort排序,但是仅针对当前页面中的数据,无法实现全局数据的排序,如果需要全局排序,需要后台程序支持才可以实现。 可以在layui触发排序事件上改进下。 本功能必须配合后台程序否则无效。 实现方法 table格式这么写: table...
2025-10-19 前端开发
292

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112