asp.net zero 8.2 学习-7-展示实体列表，实现查询，分页，过滤，排序功能

红太狼 2021-07-27 01:29 268阅读 0赞

本节学习如何在页面中展示实体列表，并实现查询，分页，过滤，排序功能。

*  前端实体列表页面框架修改
 *  编写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>
                
    
                
                <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>
                
    
            </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">
                    
                    <div class="kt-form">
    
                        
                        <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>
                        
    
                        
                        <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>
                        
    
                        
                        <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>
                        
    
                    </div>
                    
    
                    
                    <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>
                    
    
                </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')
    };

*  1.  初始化dataTable数据，并添加操作方法列，调用`_demoObjectService.getAll`方法获取后台数据，并添加分页，过滤排序参数的传递

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

效果：  
![format_png][]

[format_png]: /images/20210726/d54d4eef590448989c804a83aefe100d.png