程序地带

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理


在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合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;
}

完成这些,我们就可以测试前端的界面效果了。



 


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/wuhuacong/p/14214889.html

随机推荐

无gui界面_虚拟UI设计会取代GUI设计吗

无gui界面_虚拟UI设计会取代GUI设计吗

虚拟UI设计会取代GUI设计吗?当我刚开始作用户界面(UI)设计师时,要了解所有不同类型的用户界面真是一个不容小觑的挑战。迅速发展到今天,技术的发展速度完全超...

weixin_39890652 阅读(706)

java进销存管理系统ssm框架

java进销存管理系统ssm框架

本java进销存系统主要完成对超市的管理,包括会员管理、厂家管理、商品管理、退货管理,销售管理、进货管理、员工管理、系统管理等几个方面。系统可以完成对各类信息的浏览、查询、...

毕业程序员 阅读(699)