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

时间:2022-09-12 17:18:23

在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程。

1、Vue+Element前端的排序代码

我们首先参考一下Element界面组件的排序说明。如下效果是Element表格组件的排序效果。

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

在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:rowcolumn,可以根据自己的需求进行处理。

根据上面说明,我们这里采取的是后端排序,将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
);
}

一般情况下,这些逻辑我们一般不会变化,我们只需要进行一定的重写构建查询条件,以及排序规则即可。

例如重写条件查询获取查询对象的处理如下。

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

详细代码如下所示:

        /// <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;
}

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

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

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

  1. 循序渐进VUE&plus;Element 前端应用开发&lpar;19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  2. 前端使用AngularJS的&dollar;resource&comma;后端ASP&period;NET Web API,实现分页、过滤

    在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...

  3. spring boot &plus; vue &plus; element-ui全栈开发入门——前后端整合开发

    一.配置 思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: { '/ap ...

  4. springboot&plus;vue&plus;element:echarts开发遇见问题---后端sql&lpar;三&rpar;

    <select id="getSumRequestRankingCount" parameterType="java.lang.String" resul ...

  5. 循序渐进VUE&plus;Element 前端应用开发&lpar;14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  6. 循序渐进VUE&plus;Element 前端应用开发&lpar;15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  7. 循序渐进VUE&plus;Element 前端应用开发&lpar;18)--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  8. 循序渐进VUE&plus;Element 前端应用开发&lpar;20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  9. 循序渐进VUE&plus;Element 前端应用开发&lpar;26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

随机推荐

  1. Struts2中Date日期转换的问题

      今天跑程序的时候莫名其妙的出现了下面的一个异常: java.lang.NoSuchMethodException:com.ca.agent.model.mybatis.ApprovalInforC ...

  2. C&num; WinForm实现控件拖动实例介绍

    主要是设计控件的MouseDown.MouseLeave.MouseMove事件.一步步来吧:1.定义一个枚举类型,描述光标状态 private enum EnumMousePointPosition ...

  3. MySQL之count&lpar;&ast;&rpar;与count&lpar;id&rpar;效率比较&lpar;转&rpar;

    优化总结: 1.任何情况下SELECT COUNT(*) FROM tablename是最优选择: 2.尽量减少SELECT COUNT(*) FROM tablename WHERE COL = ’ ...

  4. Http&comma;Https&lpar;SSL&rpar;的Url绝对路径&comma;相对路径解决方案Security Switch 4&period;2的配置和使用 分类: ASP&period;NET 2014-11-05 12&colon;51 97人阅读 评论&lpar;0&rpar; 收藏

    下载地址1:https://securityswitch.googlecode.com/files/SecuritySwitch%20v4.2.0.0%20-%20Binary.zip 下载地址2:h ...

  5. 深入理解Struts2----数据校验

    在表现层的数据处理方面主要分为两种类型,一种是类型转换,这点我们上篇已经简单介绍过,另外一种则是我们本篇文章将要介绍的:数据校验.对于我们的web应用,我们经常需要和用户进行交互收集用户信息,那么无论 ...

  6. Spring-Framework 源码阅读之&commat;Autowired和AutowiredAnnotationBeanPostProcessor

    今天接下去讲我们的内容,上次的解析了AnnotationBeanUtils这个类的运用和源码.今天主要关注的是Autowired和 AutowiredAnnotationBeanPostProcess ...

  7. jenkins&plus;maven&plus;git&plus;tomcat&plus;salt自动构建

    jenkins 安装步骤 环境: centos7,jdk1.8.0,jenkins2.165,maven3.5.2 一. 安装配置java环境   JDK1.8下载地址:http://www.orac ...

  8. Android——Activity练习

    manifests里的AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> < ...

  9. 在Java中final类与一般类有什么样的区别

    final修饰的类不能被继承. Sting就是一个被final修饰的类,我们只能用,不用继承final不仅可以修饰类,还可以修饰变量,被final修饰的变量就是一个常量,只能赋值一次注意final和f ...

  10. Java多线程-两种常用的线程计数器CountDownLatch和循环屏障CyclicBarrier

    Java多线程编程-(1)-线程安全和锁Synchronized概念 Java多线程编程-(2)-可重入锁以及Synchronized的其他基本特性 Java多线程编程-(3)-从一个错误的双重校验锁 ...