layui自己写列排序sort

最新推荐文章于 2024-09-25 16:23:17 发布
果仁栗子糕
最新推荐文章于 2024-09-25 16:23:17 发布
阅读量1.7k
点赞数
文章标签： layui 前端 javascript
本文链接：https://blog.csdn.net/qq_21718533/article/details/122145455
版权
<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>最近下单</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <!--自定义样式-->
    <style></style>
</head>
<body>
<div class="user_table_div">
    <form id="searchForm" class="layui-form" lay-filter="searchForm">
        <div class="layui-form-item">
            <div class="layui-input-inline  layui-form">
                <select id="salesmanId" name="salesmanId" class="layui-select" lay-search lay-filter="salesmanId">
                </select>
            </div>
            <div class="layui-inline">
                <input type="text" autocomplete="off" class="layui-input" id="businessname" placeholder="商行名称">
            </div>
            <div class="layui-inline " style="width:auto;">
                <a class="layui-btn" id="search" data-event="search"><i class="layui-icon">&#xe615;</i> 查询</a>
            </div>
        </div>
    </form>
    <!--表格容器-->
    <table class="layui-hide" id="user_table" lay-filter="user_table"></table>
    <!--分页容器-->
    <div id="laypage" class="layui-table-page-inline"></div>
</div>
</body>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
    var $ = jQuery = layui.jquery;
    layui.use(['table', 'laypage', 'layer', 'laydate',], function () {
        var table = layui.table;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        <!--列表查询条件-->
        var searchParam = {
            pageNum: 1,
            pageSize: 15, //定义为0,则不进行分页
            salesmanId: null,
            sort: '1',  //(1时间倒序 2时间正序)
            sortField: 'time',
            sortType: 'desc',
        };
        getData();
        //业务员列表
        CoreUtil.sendAjax("/api/busSalesman/all", JSON.stringify(searchParam), function (res) {
            if (res.data != null) {
                var str = '<option value="">业务员</option>';
                for (var i = 0; i < res.data.length; i++) {
                    str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>';
                }
                $('#salesmanId').append(str);
                form.render('select');
            }
        }, "POST", false, function (res) {
            layer.msg("抱歉！您暂无获取业务员列表的权限");
        });
        var laypageTable = function (count, currentPage) {
            laypage.render({
                elem: 'laypage'
                , count: count
                , limit: searchParam.pageSize
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , curr: currentPage || 1 //获取起始页
                , hash: 'currentPage' //自定义hash值
                , jump: function (obj, first) {
                    if (!first) {
                        searchParam.pageNum = obj.curr;
                        searchParam.pageSize = obj.limit;
                        getData();
                    }
                }, limits: [15, 30, 45, 60]
            });
        };
        //渲染table
        var loadTable = function (data) {
            table.render({
                elem: '#user_table'
                , cols: [
                    [
                        {field: '', title: '序号', width: 50, type: 'numbers'},
                        {field: 'businessname', title: '商行名称', width: 350},
                        {field: 'time', title: '最后一次下单时间', width: 250, sort: true,},
                    ]
                ]
                , data: data
                , even: true
                , limit: data.length
                , limits: [15, 30, 45, 60]
                , autoSort: false
                , done: function (res, curr, count) {
                    //执行到此后，可实现依照后台返回的顺序排列，但点击表格的排序小三角形之后，不会变黑，小三角形没有了颜色状态，一直是灰色的
                    $('th[data-field="' + searchParam.sortField + '"]').find('span').eq(1).attr('lay-sort', searchParam.sortType);//给小三角加颜色状态
                }
            });
        };

        table.on('sort(user_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            searchParam.sortField = obj.field;
            searchParam.sortType = obj.type;
            if ('time' == obj.field) {
                if ('asc' == obj.type) {
                    searchParam.sort = '2';
                } else if ('desc' == obj.type) {
                    searchParam.sort = '1';
                } else {
                    searchParam.sort = '1';
                }
            }
            searchParam.pageNum = 1;
            getData();
        });

        $("#search").click(function () {
            searchParam.salesmanId = $("#salesmanId").val();
            searchParam.businessname = $("#businessname").val();
            searchParam.pageNum = 1;
            getData();
        });

        function getData() {
            CoreUtil.sendAjax("/api/finReportOrderStatistic/lastPlaceOrder", searchParam, function (res) {
                if (res.data.list.list != null) {
                    loadTable(res.data.list.list);
                    laypageTable(res.data.list.totalRows, searchParam.pageNum);
                }
            }, "POST", false, function (res) {
                layer.msg("抱歉！您暂无获取订单列表的权限");
                var noAuthorityData = [];
                loadTable(noAuthorityData);
            });
        }
    });
</script>
</html>