Bootstrap Table数据表格的使用指南

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.findA

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值