bootstrap行内编辑后提交多条数据到ssm

先定义一个数组用于接收修改的数据:
var changeRows = new Array();
在bootstrap属性定义上添加类似:
onEditableSave: function (field, row, oldValue, $el) {
$table.bootstrapTable(‘updateRow‘, {index: row.rowId, row: row});
//将 行对象转化为json字符串并放入changeRows数组
var result = JSON.stringify(row);
changeRows.push(result);
},

而后在ajax提交时:
//将数组转化为json字符串传递给后台
data: {‘changeRows‘:JSON.stringify(changeRows)},
dataType: ‘json‘,

    在ssm控制器上接收该字符串
    public Object update(@RequestParam(value = "changeRows",required=false) String  changeRows) {

        //将页面传递过来的json字符串转化为jsonArray
    JSONArray jsonRows = JSONArray.fromObject(changeRows);
    JSONObject jObject = null;
    Vo vo = null;
    List<Vo> changeList = new ArrayList<>();
    //遍历jsonArray,取得所需的对象并放入list集合
    for (int i = 0; i < jsonRows.size(); i++) {
        jObject = JSONObject.fromObject(jsonRows.get(i));
        vo = (Vo) JSONObject.toBean(jObject,Vo.class);
        changeList.add(vo);
    }

            changeList即被修改过的 行的数据集合

原文地址:http://blog.51cto.com/13588844/2140185

时间: 2024-10-20 02:14:41

bootstrap行内编辑后提交多条数据到ssm的相关文章

[转]Laravel与bootstrap-editable实现table的行内编辑

[转]Laravel与bootstrap-editable实现table的行内编辑 准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop下载 前端处理 引入库 要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件 bootstrap引入 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

Easy UI实现行内编辑

最近跟着勇霞师姐做我们高校云平台的UI系统,各个系统界面的管理.UI的系统虽然很小,但是技术内容很新鲜,这篇博文就像大家介绍一下我新接触的EasyUI的知识:开启行内编辑. 效果图如下: 一.View页面 首先,引入easyui的js文件. [html] view plaincopy <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/theme

ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,

EasyUI-Datagrid行内编辑

接上一篇,这次介绍easyUI的datagrid的行内编辑单元格的功能. 关于行内编辑,我之前写过一个demo <jQuery:页面可编辑表格>,但是easyui 中早已经封装了行内单元格编辑的功能,我们在调用时只需要使用人家封装好的方法就行.这里就使用封装好的方法. 实现思路: 1.定义table 时写上监听单击事件的方法:onClickCell:onClickCell: 2.将需要编辑的<th>和<td>设置编辑的触发响应:editor:'text'.其中text只

EasyUI之dataGrid的行内编辑

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量:当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源 6 iconCls: 'icon-save', //图标 7 pagination: true, //显

Datagrid的行内编辑,Combobox的级联。

选择一个省份,市区的信息会发生相应的变化.主要是第一个combobox的值发生变化的时候,访问服务器,获得数据并赋值给第二个combobox,获取数据就是一个ajax时间,在第一个combobox中获得第二个combobox对象: .$.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){ var ed=$("#"+frm+"#addresstest").datagrid('

vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

<vxe-table border show-overflow ref="xTable"  --------------------------------------------------------------------------------------------可根据此变量控制表格内容 class="vxe-table-element" height="600" :data="tableData"-----

bootstrap-table 行内编辑

所需的样式和js文件: https://pan.baidu.com/s/1eSAKzyM 密码: s3wh 参考 : http://www.cnblogs.com/landeanfen/p/5005367.html columnsDefined()  处需要加行内编辑的可这么设置 { title : '备注', field : 'remark', formatter : function(value, row, index){ if(value == null){ return "添加"