kys-笔记2

最新推荐文章于 2024-06-30 20:55:28 发布

Venveb

最新推荐文章于 2024-06-30 20:55:28 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏：学习记录

本文链接：https://blog.youkuaiyun.com/Venveb/article/details/94959416

学习记录专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何解决EasyUI前端框架与后端数据交互时的兼容性问题，包括数据格式转换、分页参数设置及页面元素显示优化，如图片展示和下拉条的格式化。

由于easyUI接收数据的名称和后台封装的名称不同，所以将后台传出的数据封装来匹配easyUI的需求

public class UiPage {
private long total; //总条数
private List rows; //每页数据
public UiPage(){}
public UiPage(Page page){
total = page.getTotalElements();
rows = page.getContent();
}
get,set省略
}

easyUI查询时传的参数名称与后台query字段名不符，建立set方法来封装

//兼容Easyui的分页
public void setPage(int page) {
    this.currentPage = page;
}
public void setRows(int rows) {
    this.pageSize = rows;
}

controller

//查询分页数据
@RequestMapping("/page")
@ResponseBody
public UiPage page(EmployeeQuery query){
    return new UiPage(employeeService.findPageByQuery(query));
}

在页面显示图片和下拉条时 使用formatter方法

   <th data-options="field:'department',width:100,formatter:formatDept, sortable:true">部门</th>
          <th data-options="field:'headImage',width:100,formatter:formatImage">头像</th>

js代码

function formatImage(value){
console.debug(value);
return value?"<img src='"+value+"' width='50'>":"暂无";
//return `<img src="${value}" width="50" height="50">`;
}

function formatDept(value) {
return value?value.name:"";
}