this.msg = msg;
}
public AjaxResult(boolean success) {
this.success=success;
}
@SuppressWarnings(“rawtypes”)
public static HashMap<String, Object> bulidPageResult(Page page) {
HashMap<String, Object> result=new HashMap<>();
result.put(“total”, page.getTotalElements());
result.put(“rows”, page.getContent());
return result;
}
}
数据源得到了,就可以看到渲染表格的效果了,如图。
单表的基本数据显示是没有问题了,但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。
在渲染表格的JS中的columns属性值中添加如下代码。
{
field: ‘tbClass’,
title: ‘班级’,
valign: ‘middle’,
halign: ‘center’,
align: ‘center’,
formatter: “tbClassName”
}
formatter属性值对应的是一个方法名,此方法返回需要显示关联表中的数据。
其中参数value表示field对应实体类中的值,row为当前行的数据,index为当前行的索引。因为tbClass为实体类中关联的班级表,索引直接通过value.name就可以得出班级名称。
//班级名称
function tbClassName(value, row, index){
return value?value.name: ‘’;
}
效果图如下。
得到数据源的JSON格式数据。
数据显示基本就这些了,下一步就是对数据进行操作了(增删改查)
定义操作按钮,代码如下。
新增
修改
删除
在渲染表格的JS中通过toolbar属性和和表格绑定,显示在表格的左上角位置。toolbar的属性值为选中操作按钮的DOM元素。toolbar: ‘#toolbar’
效果如下。
功能实现
新增add()方法,新增一个modal弹框,用JQ插入到body中,弹框中显示新增页面,弹框关闭时把弹框删除。代码如下。
//新增
function add(){
var dialog = $(‘
’);dialog.load(“student/edit”);
$(“body”).append(dialog);
/弹出模态框,绑定关闭后的事件/
dialog.modal().on(‘hidden.bs.modal’, function () {
//删除
dialog.remove();
});
}
student/edit请求新增页面的方法,新增和修改后台用的一个方法,id为null,是新增,不为null为修改,根据传递的id查询需要修改的对象,之后把对象数据传递到前台。代码如下。
@RequestMapping(value=“/edit”)
public void edit(StudentForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
//把所有班级查询出来传递到前台
map.put(“tbClass”, tbClassService.findAll());
Student model = new Student();
Integer id = form.getId();
if (id != null) {
model = studentService.findById(id);
}
map.put(“model”, model);</