bootstrap-table+多行数据组合提交(java版)

来源:互联网 发布:刷手如何注册淘宝小号 编辑:程序博客网 时间:2024/06/14 05:45

1、bootstra-table插件介绍
Bootstrap-table是一个基于bootstrap样式的表格组件,可以通过简单的配置,即可以动态生成表格,从而方便使用。

2、bootstrap-table的自带编辑x-editable插件
bootstrap-table含有一个附带的js插件,x-editable,这个插件的主要思想,是提供行内编辑,就是每行作为一个对象,然后提交给后台进行更改数据,这样的更改的,可能需要触发的后台请求次数太过于频繁,所以改成批量数据请求到后台,所以这个插件不是很适用,不过有兴趣的同学还是可以看看这个插件的实现的。
JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

3、间接生成可编辑表格

function operateFormatterApplyQuanlity(value, row, index) {//赋予的参数    return [                '<input type="text" flag="aq" id="aq'+row.id+'"  value="'+ row.applyQuanlity +'" />'                +'<input type="hidden" flag="id" id="id'+row.id+'" value="'+ row.id +'" />'        ].join('');        };

上面的代码是对将表格数据格式化成一个input标签,但要记得的是,还需要在对应的字段上面配置上面那个operateFormatterApplyQuanlity;
如下所示:

{        field: 'applyQuanlity',        title: '申请数量',        align: 'center',        formatter: operateFormatterApplyQuanlity //自定义方法格式化},

配好上面的东西后,我们表格输出的就会像下面这样了
这里写图片描述

4、用from标签包裹整个表格
接下来,我们用from包裹整个表格,然后根据复选框被选中的行,然后在对应的每一行里面的需要更改数据的input标签内添加一个name属性,这是js操作,这里我只给出一个思路,代码太长,就不贴了,然后,将选中的行的中的id列也添加一个name属性,然后再提交整个表单,后台用request.getParameterValues(String name)获取数组属性,然后再在后台默默处理呗。

原创粉丝点击