• layui排序功能


    后台常用功能之排序!!!

    一次只能排一个序!!!

    基本样式

    <tr>
        <th>序号<span class="layui-table-sort layui-inline" id="id_sort"
                lay-sort="{$id_sort}"><i class="layui-edge layui-table-sort-asc"
                    title="升序"></i><i class="layui-edge layui-table-sort-desc"
                    title="降序"></i>
            </span>
        </th>
        <th>操作
        </th>
        <th>名称</th>
        <th>显示</th>
        <th>创建日期
            <span class="layui-table-sort layui-inline" id="create_time_sort"
                lay-sort="{$create_time_sort}"><i
                    class="layui-edge layui-table-sort-asc" title="升序"></i><i
                    class="layui-edge layui-table-sort-desc" title="降序"></i>
            </span>
        </th>
    </tr>
    

    点击事件

    // 排序
    $("#id_sort").on('click', function () {
        let sort = $(this).attr('lay-sort');
        sort = deal_sort_val(sort);
        // 清理其他的排序值
        $(".layui-table-sort").attr('lay-sort','');
        $(this).attr('lay-sort',sort);
    
        let search_str = get_search();
        window.location.href = '__URL__/index?page=' + 1 + search_str;
    });
    
    $("#create_time_sort").on('click', function () {
        let sort = $(this).attr('lay-sort');
        sort = deal_sort_val(sort);
        $(".layui-table-sort").attr('lay-sort','');
        $(this).attr('lay-sort',sort);
    
        let search_str = get_search();
        window.location.href = '__URL__/index?page=' + 1 + search_str;
    });
    

    处理排序的逻辑

    /**
     * 处理排序
     */
    function deal_sort_val(sort) {
        if (!sort) {
            sort = 'desc'; // 默认改为降序
        } else {
            if (sort == 'desc') {
                sort = 'asc';
            } else {
                sort = 'desc';
            }
        }
        return sort;
    }
    

    结合搜索的处理

    function get_search() {
        let start = $("#start").val();
        let end = $("#end").val();
        let search_str = '';
    
        if (start) search_str += '&start=' + start;
        if (end) search_str += '&end=' + end;
    
        // sort
        let id_sort = $('#id_sort').attr('lay-sort');
        let create_time_sort = $('#create_time_sort').attr('lay-sort');
        if (id_sort) search_str += '&id_sort=' + id_sort;
        if (create_time_sort) search_str += '&create_time_sort=' + create_time_sort;
    
        return search_str;
    }
    

    后端逻辑

    // search
    $where['deleted'] = 0;
    
    if ($_GET['start'] && $_GET['end']) {
        $where['create_time'] = ['between', [strtotime($_GET['start']), strtotime($_GET['end'].' 23:59')]];
        $this->assign('start', $_GET['start']);
        $this->assign('end', $_GET['end']);
    }
    
    if ($_GET['start'] && !$_GET['end']) {
        $where['create_time'] = ['gt', strtotime($_GET['start'])];
        $this->assign('start', $_GET['start']);
    }
    
    
    if (!$_GET['start'] && $_GET['end']) {
        $where['create_time'] = ['lt', strtotime($_GET['end'].' 23:59')];
        $this->assign('end', $_GET['end']);
    }
    
    // sort 
    $sort = 'id desc';
    if ($_GET['id_sort']) {
        $sort = 'id '.$_GET['id_sort'];
        $this->assign('id_sort', $_GET['id_sort']);
    }
    
    if ($_GET['create_time_sort']) {
        $sort = 'create_time '.$_GET['create_time_sort'];
        $this->assign('create_time_sort', $_GET['create_time_sort']);
    }
    
    $article_type = M('article_type');
    $result_list  = $article_type->where($where)->limit($start . ',' . $step)->order($sort)->select();
    

    后台常用功能有哪些呢?

    搜索,排序,导入,导出,新增,修改,删除,查看详情,以及直接修改,温馨提示等等。

  • 相关阅读:
    Java面试题集(七)--Spring常见面试问题【重要】
    Java面试题集(六)
    qt4.8.4安装以及64位程序编译方法
    页面跳转动画设置方法
    Lua环境配置 windows + VS
    Oracle触发器(trigger):view,schema,database
    java课程设计(计算器)
    数据结构 练习 19-活动选择问题的实现(动态规划 和 贪心)
    网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
    如何打开Nib文件
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12036071.html
Copyright © 2020-2023  润新知