在很多串列展示資料的場合中，大多數都會需要一個排序的處理，以方便快速查找排序所需的資料，本篇隨筆介紹如何結合ABP后端和Vue+Element前端結合的分頁排序處理程序，
1、Vue+Element前端的排序代碼
我們首先參考一下Element界面組件的排序說明，如下效果是Element表格組件的排序效果，
在列中設定sortable屬性即可實作以該列為基準的排序，接受一個Boolean，默認為false，可以通過 Table 的default-sort屬性設定默認的排序列和排序順序，可以使用sort-method或者sort-by使用自定義的排序規則，如果需要后端排序，需將sortable設定為custom，同時在 Table 上監聽sort-change事件，在事件回呼中可以獲取當前排序的欄位名和排序順序，從而向介面請求排序后的表格資料，在本例中，我們還使用了formatter屬性，它用于格式化指定列的值，接受一個Function，會傳入兩個引數：row和column，可以根據自己的需求進行處理，
根據上面說明，我們這里采取的是后端排序，將sortable設定為custom，如下案例代碼所示，
<!--表格串列資訊 --> <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" @sort-change="sortChange" > <el-table-column type="selection" width="40" /> <el-table-column align="center" sortable="custom" prop="name" label="姓名"> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-table-column> <el-table-column align="center" sortable="custom" prop="age" label="年齡"> <template slot-scope="scope"> {{ scope.row.age }} 歲 </template> </el-table-column> <!--日期欄位資訊，顯示完整時間格式:formatter="timeFormat"，否則使用:formatter="dateFormat" --> <el-table-column align="center" label="創建時間" sortable="custom" width="160" prop="creationTime" :formatter="timeFormat" />
以上是界面端的HTML代碼，那么前端JS的處理邏輯也需要相應處理下，上面代碼中 @sort-change="sortChange" 定義了排序變化的觸發事件處理，
methods: { sortChange({ column, prop, order }) { var direction = (order === 'ascending') ? ' ASC' : ' DESC' this.sorting = !this.isEmpty(prop) ? (prop + direction) : null this.getlist() },
以上代碼主要邏輯是構建一個排序字串，如：欄位 ASC 或 欄位 DESC的字串，以供ABP后端的排序處理即可，這個主要是根據ABP框架排序特點進行提交的，
我們通過getlist的方法提交對應的查詢條件和排序字串，讓后端再次獲取資料給我們前端處理，
getlist() { // 串列資料獲取
var param = { // 構造常規的分頁查詢條件
// 分頁條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
Sorting: this.sorting,
// 查詢過濾條件
Name: this.searchForm.name,
AgeStart: this.searchForm.ageStart
};
// 使用日期范圍選擇控制元件，在查詢物件增加開始日期CreationTimeStart、結束日期CreationTimeEnd
this.addDateRange(param, this.searchForm.creationTime)
// 獲取串列，系結到模型上，并修改分頁數量
this.listLoading = true
customer.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
那么剩下的時候，就是后端如何處理資料的問題了，
2、 ABP后端分頁排序的處理
我們查看ABP的應用服務層的介面基類可以看到，對應的獲取所有記錄GetAll方法的定義如下所示，
public virtual async Task<PagedResultDto<TEntityDto>> GetAllAsync(TGetAllInput input) { CheckGetAllPermission(); //檢查權限 var query = CreateFilteredQuery(input); //構建查詢條件 var totalCount = await AsyncQueryableExecuter.CountAsync(query); //獲取記錄總數 query = ApplySorting(query, input); //排序 query = ApplyPaging(query, input); //分頁 var entities = await AsyncQueryableExecuter.ToListAsync(query); //回傳物體記錄 return new PagedResultDto<TEntityDto>( //構建分頁展示資料 totalCount, entities.Select(MapToEntityDto).ToList() //物體轉換DTO ); }
一般情況下，這些邏輯我們一般不會變化，我們只需要進行一定的重寫構建查詢條件，以及排序規則即可，
例如重寫條件查詢獲取查詢物件的處理如下，
詳細代碼如下所示：
/// <summary> /// 自定義條件處理 /// </summary> /// <param name="input">查詢條件Dto</param> /// <returns></returns> protected override IQueryable<Customer> CreateFilteredQuery(CustomerPagedDto input) { return base.CreateFilteredQuery(input) .WhereIf(!input.ExcludeId.IsNullOrWhiteSpace(), t=>t.Id != input.ExcludeId) //不包含排除ID .WhereIf(!input.Name.IsNullOrWhiteSpace(), t => t.Name.Contains(input.Name)) //如需要精確匹配則用Equals //年齡區間查詢 .WhereIf(input.AgeStart.HasValue, s => s.Age >= input.AgeStart.Value) .WhereIf(input.AgeEnd.HasValue, s => s.Age <= input.AgeEnd.Value) //創建日期區間查詢 .WhereIf(input.CreationTimeStart.HasValue, s => s.CreationTime >= input.CreationTimeStart.Value) .WhereIf(input.CreationTimeEnd.HasValue, s => s.CreationTime <= input.CreationTimeEnd.Value) ; }
排序的處理，我們可以重寫下規則如下所示，
/// <summary> /// 自定義排序處理 /// </summary> /// <param name="query">可查詢LINQ</param> /// <param name="input">查詢條件Dto</param> /// <returns></returns> protected override IQueryable<Customer> ApplySorting(IQueryable<Customer> query, CustomerPagedDto input) { if (!string.IsNullOrEmpty(input.Sorting))//排序欄位是否有值 { query = query.OrderBy(input.Sorting); } else { query = query.OrderByDescending(t => t.CreationTime); } return query; }
完成這些，我們就可以測驗前端的界面效果了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/243077.html
標籤：.NET技术