asp.net zero 8.2 學習-7-展示實體列表，實現查詢，分頁，過濾，排序功能

本節學習如何在頁面中展示實體列表，並實現查詢，分頁，過濾，排序功能。

• 前端實體列表頁面框架修改
• 編寫js代碼實現數據列表，實現列表功能,分頁，排序功能
• js代碼實現查詢功能

前端實體列表頁面框架修改

前端頁面爲DemoObjectController的Index方法對應的Index.cshtml視圖，頁面結構修改參考UserController的Index方法對應的Index.cshtml,分爲兩大塊，查詢表單和datatable列表。
查詢表單部分包括簡單查詢和高級查詢，具體參考下面代碼，有註釋說明

@using EDU.SIS.Web.Areas.app.Startup
@using EDU.SIS.Authorization

@{
    ViewBag.CurrentPageName = appPageNames.Common.Demo;
}

@section Styles
{
    <link rel="stylesheet" href="/view-resources/Areas/app/Views/Demo/index.css" />
}

@section Scripts
{
    <script src="/view-resources/Areas/app/Views/Demo/index.js" ></script>
}
<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">

    <div class="kt-subheader kt-grid__item">
        <div class="@(await GetContainerClass())">

            <!--標題和副標題-->
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    <span>@L("Demo")</span>
                </h3>
                <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                <span class="kt-subheader__desc">
                    @L("DemoHeaderInfo")
                </span>
            </div>
            <!--標題和副標題end-->

            <!--創建實體按鈕start-->
            <div class="kt_subheader__toolbar">
                <div class="kt-subheader__wrapper">

                    @if (IsGranted(AppPermissions.Pages_Demo_Create))
                    {
                        <button id="CreateNewUserButton" class="btn btn-primary">
                            <i class="fa fa-plus"></i>
                            @L("CreateNewDemo")
                        </button>
                    }

                </div>
            </div>
            <!--創建實體按鈕end-->

        </div>
    </div>

    <div class="@(await GetContainerClass()) kt-grid__item kt-grid__item--fluid">
        <div class="kt-portlet kt-portlet--mobile">

            <div class="kt-portlet__body">
                <!--查詢start-->
                <div class="kt-form">

                    <!--搜索框start-->
                    <div class="row align-items-center mb-4">
                        <div class="col-xl-12">
                            <div class="form-group align-items-center">
                                <div class="input-group">
                                    <input type="text" id="DemoObjectTableFilter" class="form-control" placeholder="@L("SearchWithThreeDot")" value="">
                                    <span class="input-group-btn">
                                        <button id="GetDemoObjectButton" class="btn btn-primary" type="submit">
                                            <i class="flaticon-search-1" aria-label="@L("Search")"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--搜索框end-->

                    <!-- 高級查詢 -->
                    <div id="AdvacedAuditFiltersArea" style="display: none" class="row mb-4">

                        <div class="col-xl-12">
                            <div class="form-group">
                                <label for="NameFilterId">@L("Name")</label>
                                <input type="text" class="form-control" name="nameFilter" id="NameFilterId" />
                            </div>
                        </div>

                        <div class="col-xl-12 text-right">
                            <button id="RefreshDemoListButton" class="btn btn-primary"><i class="fa fa-sync"></i> @L("Refresh")</button>
                        </div>
                    </div>
                    <!--高級查詢end-->

                    <!--顯示/隱藏高級過濾start-->
                    <div class="row mb-4">
                        <div class="col-xl-12">
                            <span id="ShowAdvancedFiltersSpan" class="text-muted clickable-item"><i class="fa fa-angle-down"></i> @L("ShowAdvancedFilters")</span>
                            <span id="HideAdvancedFiltersSpan" class="text-muted clickable-item" style="display: none"><i class="fa fa-angle-up"></i> @L("HideAdvancedFilters")</span>
                        </div>
                    </div>
                    <!--顯示/隱藏高級過濾end-->

                </div>
                <!--查詢表單部分end-->

                <!--實體列表start-->
                <div class="align-items-center">

                    <table id="DemoObjectTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                        <thead>
                            <tr>
                                <th></th>
                                <th>@L("Actions")</th>
                                <th>@L("Name")</th>
                                <th>@L("Age")</th>
                                <th class="text-center">@L("IsVip")</th>
                                <th>@L("EndDateTime")</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!--實體列表end-->

            </div>
        </div>
    </div>
</div>

編寫js代碼實現數據列表，實現列表功能,分頁，排序功能

• 1. 首先需要獲取datatable對象，並獲取後臺接口服務，還有權限列表

//數據列表對象
var _$demoObjectTable = $("#DemoObjectTable");
//後臺接口服務對象
var _demoObjectService = abp.services.app.demoObject;

//權限列表
var _permissions = {
    create: abp.auth.hasPermission('Pages.Demo.Create'),
    edit: abp.auth.hasPermission('Pages.Demo.Create'),
    'delete': abp.auth.hasPermission('Pages.Demo.Create')
};

• 2. 初始化dataTable數據，並添加操作方法列，調用_demoObjectService.getAll方法獲取後臺數據，並添加分頁，過濾排序參數的傳遞

var dataTable = _$demoObjectTable.DataTable({
    paging: true, //分頁操作欄
    serviceSide: true, //服務端進行分頁處理
    processsing: true, //處理數據等待提示
    listAction: {
        ajaxFunction: _demoObjectService.getAll,//獲取後臺數據
        inputFilter: function () {    //輸入參數，過濾選項
            return {
                filter: $("#DemoObjectTableFilter").val(),
                nameFilter: $("#NameFilterId").val()
            };
        }
    },
    columnDefs: [
        {
            className: 'control responsive',
            orderable: false,
            render: function () {
                return '';
            },
            targets: 0
        },
        {
            targets: 1,//數據列順序值
            data: null,//數據內容體
            orderable: false,//是否允許排列
            autoWidth: false,//自動列寬
            defaultContent: '',//默認顯示內容
            rowAction: {
                text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
                items: [
                    {
                        text: app.localize('View'),
                        visible: function () { return true;}, //注意這裏visible必須是函數，不能是簡單的true或false
                        action: function () {
                            console.log('view'); //這裏只是佔位，下一節實現具體功能
                        }
                    },
                    {
                        text: app.localize('Edit'),
                        visible: function () {
                            return _permissions.edit; //根據權限決定是否顯示改操作方法
                        },
                        action: function () {
                            console.log('edit');
                        }
                    },
                    {
                        text: app.localize('Delete'),
                        visible: function () {
                            return _permissions.delete;
                        },
                        action: function () {
                            console.log('delete');
                        }
                    }
                ]
            }
        },
        {
            targets: 2,
            orderable: false,
            data:"demoObject.name"
        },
        {
            targets: 3,
            data: "demoObject.age"
        },
        {
            targets: 4,
            data: "demoObject.isVip",
            render: function (isVip) { //自定義顯示數據
                if (isVip) {
                    return '<div class="text-center"><i class="fa fa-check-circle" title="True"></i></div>'
                }
                return '<div class="text-center"><i class="fa fa-times-circle" title="False"></i></div>' 
            }
        },
        {
            targets: 5,
            data: "demoObject.endDateTime",
            render: function (endDateTime) {
                if (endDateTime) {
                    return moment(endDateTime).format('YYYY-MM-DD HH:mm:ss'); //時間格式化
                }
                return "";
            }
        }
    ]

});

js代碼實現查詢功能

接下來是處理查詢按鈕點擊事件，和高級查詢的顯示和隱藏

//刷新數據
function getDemoObject() {
    dataTable.ajax.reload();
}

//查詢按鈕事件
$("#GetDemoObjectButton").click(function (e) {
    e.preventDefault();
    getDemoObject();
});

//顯示高級查詢
$('#ShowAdvancedFiltersSpan').click(function () {
    $('#ShowAdvancedFiltersSpan').hide();
    $('#HideAdvancedFiltersSpan').show();
    $('#AdvacedAuditFiltersArea').slideDown();
});

//隱藏高級查詢
$('#HideAdvancedFiltersSpan').click(function () {
    $('#HideAdvancedFiltersSpan').hide();
    $('#ShowAdvancedFiltersSpan').show();
    $('#AdvacedAuditFiltersArea').slideUp();
});

效果：