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();

后台常用功能有哪些呢？

搜索，排序，導入，導出，新增，修改，刪除，查看詳情，以及直接修改，溫馨提示等等。