ASPNETZERO - 如何更改索引页面以呈现图块而不是 table

Question

我目前有一个普通的 ASPNETZERO 索引页，它呈现一个具有搜索功能的数据表网格。我想更改此视图以呈现 "tiles" 网格中的每一行。我已经有了用于渲染图块的 CSS/HTML。我基本上想重新利用下面的 index.js 代码来渲染我的图块，而不是数据表网格。

(function () {
$(function () {
    var _$companyTable = $('#companyTable');
    var _companyService = abp.services.app.company;

    var _permissions = {
        create: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Create'),
        edit: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Edit'),
        impersonation: abp.auth.hasPermission('Pages.Tenants.Impersonation'),
    };

    var _createModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Company/CreateModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_CreateModal.js',
        modalClass: 'CreateCompanyModal'
    });

    var _editModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Company/EditModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_EditModal.js',
        modalClass: 'EditCompanyModal'
    });

    var dataTable = _$companyTable.DataTable({
        paging: true,
        serverSide: true,
        processing: true,
        responsive: true,
        listAction: {
            ajaxFunction: _companyService.getCompanies,
            inputFilter: function () {
                return {
                    filter: $('#CompanyTableFilter').val()
                };
            }
        },
        columnDefs: [
            {
                targets: 0,
                data: null,
                orderable: false,
                autoWidth: true,
                defaultContent: '',
                rowAction: {
                    cssClass: 'btn btn-xs btn-primary blue',
                    text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
                    items: [{
                        text: app.localize('Edit'),
                        visible: function () {
                            return _permissions.edit;
                        },
                        action: function (data) {
                            _editModal.open({ id: data.record.id });
                        }
                    }]
                }
            },
            {
                targets: 1,
                orderable: true,
                autoWidth: true,
                data: "companyName"
            },
            {
                targets: 2,
                orderable: true,
                autoWidth: true,
                data: "companyLegalName"
            },
            {
                targets: 3,
                autoWidth: true,
                data: "companyTaxID"
            },
            {
                targets: 4,
                orderable: true,
                autoWidth: true,
                data: "currency"
            }
        ]
    });


    function getCompanies() {
        dataTable.ajax.reload();
    }

    $('#CreateNewCompanyButton').click(function (e) {
        _createModal.open();
    });

    $('#GetCompaniesButton').click(function (e) {
        e.preventDefault();
        getCompanies();
    });

    abp.event.on('app.editCompanyModalSaved', function () {
        getCompanies(true);
    });

    abp.event.on('app.createCompanyModalSaved', function () {
        getCompanies(true);
    });

    $('#CompanyTableFilter').focus();

});

如何更改上面的 JS 代码来渲染我的图块而不是数据表？我还想保留图块的搜索功能。上面 JS 代码中使用的应用程序服务方法 GetCompanies 用于渲染我的图块。这样 API 调用将保持不变。

这是我希望从上面的 JS 代码实现的输出。

这是当前标准ABP 索引页面视图。我想用上面的瓷砖替换它。

Answer 1

我想出了一个解决方案。我通过添加如下所示的方法更改了 index.js 代码。我正在使用 AJAX 调用 API 方法，然后使用结果来呈现我的平铺输出。这对我有用。如果有人发现此方法有任何问题，请告诉我。

        function getCompanies() {
        $.ajax({
            type: 'GET',
            url: '/api/services/app/Company/GetCompanies',
            dataType: 'json',
            success: function (companies) {
                var _tileHtml = "";
                //Iterate thru JSON list of values
                $.each(companies.result.items, function (i, company) {
                    //Tile content start
                    _tileHtml = "<div class='SingleTileContent inline-block'>";
                    //Header
                    _tileHtml += "<div class='Tile-header'>";
                    _tileHtml += "<div class='pull-left inline-block'>";
                    _tileHtml += "<div class='badge badge-info'>" + company.id + "</div>";
                    _tileHtml += "</div>";
                    _tileHtml += "<div class='pull-left inline-block text-bold'> | " + company.companyName + "</div>";
                    _tileHtml += "</div>";
                    //Body start
                    _tileHtml += "<div class='Tile-body text-left'>";
                    //Body row
                    _tileHtml += "<div class='Tile-body-detail'>";
                    _tileHtml += "<label>Legal Name</label> " + company.companyLegalName + "</div>";
                    //Body row
                    _tileHtml += "<div class='Tile-body-detail'>";
                    _tileHtml += "<label>Tax Id</label> " + company.companyTaxID + "</div>";
                    //Body end
                    _tileHtml += "</div>";
                    //Buttons (footer)
                    _tileHtml += "<div class='Tile-buttons'>";
                    _tileHtml += "<a href='javascript:;' class='btn btn-xs blue btnEdit' id='EditCompanyButton'>Edit<i class='fa fa-edit'></i></a>";
                    _tileHtml += "</div>";
                    //Tile content end
                    _tileHtml += "</div>";
                    $("#TestJS2").append(_tileHtml);

                });
                Count = 0;
            },
            error: function (ex) {
                abp.notify.error('Failed to retrieve companies' + ex);
            }
        });
    }

ASPNETZERO - 如何更改索引页面以呈现图块而不是 table

ASPNETZERO - How to change index page to render tiles instead of table

javascript

asp.net

asp.net-mvc

asp.net-core

aspnetboilerplate