kys-笔记2

由于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:"";
}