Question

我正在尝试使用一些复杂的结构显示一些数据。

这些是我的占位符

我有一些按状态分组的数据，这些数据是占位符的ID

abastecer
多余
好

我正在使用引导程序4列表组进行显示

<div class="row">

    <div class="col-xl-4">
        <div id="abastecer">
            <ul class="list-group list-group-flush"></ul>
        </div>
    </div>
    <div class="col-xl-4">
        <div id="excesso">
            <ul class="list-group list-group-flush"></ul>
        </div>
    </div>
    <div class="col-xl-4">
        <div id="ok">
            <ul class="list-group list-group-flush"></ul>
        </div>
    </div>
</div>

这是我的ajax函数

   function GetStocksBySector() {

        lastRefreshDate = new Date();

        $.get('/dashboard/Index?handler=StocksBySector', { sector: sector }, function (response) {

            console.log(response);

            var abastecer = '';
            var excesso = '';
            var ok = '';

            $('#sector').hide();
            $('#content').hide();

            $('#abastecer ul').html('');
            $('#excesso ul').html('');
            $('#ok ul').html('');

            $.each(response, function (index, value) {


                switch (value.estado) {
                    case 'Abastecer':

                        abastecer += '<li class="list-group-item list-group-item-action flex-column align-items-start list-group-item-danger">' +
                            '<div class="d-flex w-100 justify-content-between">' +
                            '<h5 class="mb-1 font-weight-bold">' + value.referencia + '</h5>' +
                            '<span class="font-weight-bold">' + value.stock + '/' + value.stockMax + '</span>' +
                            '</div>' +
                            '<div id="progressBar' + index + '"></div>' +
                            '</li>';

                        $('#abastecer ul').html(abastecer);

                        break;

                    case 'Excesso':

                        excesso += '<li class="list-group-item list-group-item-action flex-column align-items-start list-group-item-warning">' +
                            '<div class="d-flex w-100 justify-content-between">' +
                            '<h5 class="mb-1 font-weight-bold">' + value.referencia + '</h5>' +
                            '<span class="font-weight-bold">' + value.stock + '/' + value.stockMax + '</span>' +
                            '</div>' +
                            '<div id="progressBar' + index + '"></div>' +
                            '</li>';

                        $('#excesso ul').html(excesso);

                        break;

                    case 'OK':

                        ok += '<li class="list-group-item list-group-item-action flex-column align-items-start list-group-item-success">' +
                            '<div class="d-flex w-100 justify-content-between">' +
                            '<h5 class="mb-1 font-weight-bold">' + value.referencia + '</h5>' +
                            '<span class="font-weight-bold">' + value.stock + '/' + value.stockMax + '</span>' +
                            '</div>' +
                            '<div id="progressBar' + index + '"></div>' +
                            '</li>';

                        $('#ok ul').html(ok);

                        break;
                }
            });

            $.each(response, function (index, value) {
                $('#progressBar' + index).LineProgressbar({
                    percentage: value.percentagem,
                    ShowProgressCount: true,
                    fillBackgroundColor: '#3498db'
                });
            });


            sector = sectorArray[index];
            $('#sector').html(sector);
            index++;

            if (index <= sectorArray.length)
                sector = sectorArray[index];

            if (index > sectorArray.length)
                index = 0;

        }).done(function () {
            $('#content').fadeIn();
            $('#sector').fadeIn();
        });;
    }

这是其他一些基于扇区旋转数据的js

    moment.locale('pt');

    var lastRefreshDate;
    var sectorArray = ['UAP1', 'UAP2', 'UAP3', 'UAP4', 'UAP5', 'UAP6', 'UAPP', 'EXT'];
    var sector = 'UAP1';
    var index = 0;

    //$(document).ajaxStart(function () {
    //    $("#loader").show();
    //    $("#content").addClass('d-none');
    //}).ajaxStop(function () {
    //    $("#loader").hide();
    //    $("#content").removeClass('d-none');
    //    lastRefreshDate = new Date();
    //});

    function updateTime() {
        $('#refreshDate').html(moment(lastRefreshDate).fromNow());
    }

    $(function () {
        $("#loader").show();
        $("#content").addClass('d-none');

        GetStocksBySector();

        setInterval(GetStocksBySector, 10000);
        setInterval(updateTime, 1000);

        $("#loader").hide();
        $("#content").removeClass('d-none');

    });

总结起来，

我按部门显示库存，按状态划分，并显示每种状态和每x次部门变化的列表。

现在这是问题所在，有大量数据，并且在屏幕上您基本上只能一次看到每种状态的6个项目。这是一张可以正确显示的图片

我已经设置了一个计时器，可以每x次更改扇区。

我认为我可以对数据做同样的事情

类似的东西

iteration 1: show top 6 all status
iteration 2: show all status abastecer, 18 items per sub iteration
subiteration 2.1: show 18 items
subiteration 2.2: show next 18 items 
etc...
iteration 3: repeat for status excesso
iteration 4: repeat for status ok
back to iteration 1.

我还认为我可以使用垂直自动滚动条之类的东西

我曾考虑过使用bootstrap传送带，但是无论它有什么用，或者如果没有图像并且很难管理所有渲染的html，都不会出现箭头。

我以前使用过VueJS，它使这样的事情变得非常容易，但是我认为我可以依靠jquery。

使用jQuery，我意识到我的代码开始变得凌乱，而且我不知道随着结构变得更加复杂，以后如何保持其清洁和可维护性。

我正在寻找建议，以使它可以轻松地在jquery中使用，或者即使整个应用程序只是jquery我也应该使用VueJS。

使用JQuery渲染自定义html而不造成麻烦

0 个答案: