jsp页面带有多选框的grid表格,如何将勾选中的行记录所有列数据传送到后台。
来源:互联网 发布:读取网络文件 编辑:程序博客网 时间:2024/05/16 05:10
1.本方案大体思路是,将选中元素所在行的数据,拼装成一个js对象,然后使用JSON.stringify方法将对象转换为json字符串,以ajax.post的方式发送给后台,然后在server端用GsonUtils转为List
<table > <thead > <tr> <th ><input type="checkbox" name="checked-all" class="checkbox checked-all"></th> <th >编码</th> <th >名称</th> <th >启用状态</th> <th >操作</th> </tr> </thead> <tbody> <c:forEach > <tr > <td><input type="checkbox" name="itemId" value="${it.id}" class="checkbox"></td> <td><c:out value="${it.code}" /><input type="hidden" name="code" value="${it.code}" ></td> </span> <input type="text" name="name" value="<c:out value="${it.name}"/>" maxlength="50" ></td> </tr> </c:forEach> </tbody> </table>
3、js代码部分
//选中后点击按钮从该方法开始执行
//按钮如下jsp代码:
<a href="javascript:void(0);" onclick="deleteFun('itemId', del,'itemId,code,name');" class="del-pl"><i class="cedu-delete mr10"></i>删除</a>
js代码:
function deleteFun(tag, callback, needCollectValue) { var str = makeValuesToArray(tag, needCollectValue); if (str == "[]") { alert("请选择要删除的数据项!"); return false; } if (confirm('您确定要删除选取的项吗?')) { callback(str); return true; } return false; } function makeValuesToArray(tag, needCollectValue) { var str = ""; var idx = 0; var arr = new Array(); $("input[name='" + tag + "']:checked").each(function(index, o) { //每行 var obj = {}; $(this).parents('tr:first').find('input').each(function(i, e) { //行中的每个元素 var nameVal = $(e).attr('name'); if (needCollectValue.indexOf(nameVal) >= 0) { obj[nameVal] = $(e).val(); } }); arr[index] = obj; }); str = JSON.stringify(arr) return str; }//向后台发送ajax请求 function del(jsonStr) { ajaxSubmit({ url : "${path}management/career/projectcategory/delete.do", params : { delJsonData : jsonStr }, onSuccess : function(data, textStatus) { }, onError : function(req) { } }); }
4、java代码部分
List<HashMap<String, String>> list = GsonUtils.fromJson(delJsonData, new TypeToken<List<HashMap<String, String>>>() { });
这样就可以将前台列表的选中数据,封装到后台service段的list对象里面了。
阅读全文
0 0
- jsp页面带有多选框的grid表格,如何将勾选中的行记录所有列数据传送到后台。
- Ecshop中是如何将查询到的数据传送到页面并显示的呢?
- 前端页面利用AJAX将数组数据传送到后台
- jQuery获取表格 复选框被选中一行的所有列数据
- 简单的POI导出JSP页面表格数据到excel
- ext6 如何把grid表格的多个数据用json数组传到后台
- JavaScript将页面表格数据导出为Excel、CSV格式文件(结合JQuery EasyUI的grid )
- grid删除选中的记录
- 将grid数据提交到后台保存
- json_后台传送json格式的对象到前台页面
- 如何将远程页面的所有内容下载到本地
- loushang5关于DataSet通过后台查询出的数据如何映射到前台JSP页面的下拉列表中
- 如何将VFP本地表数据传送到SQL-Server后台进行更新
- 如何将VFP本地表数据传送到SQL-Server后台进行更新
- 将jsp页面的表格通过jxl的方式导出到excel中
- Ext获取grid选中列的值
- Ext获取grid选中列的值
- JavaScript如何收集JSP页面的采集到的数据
- Java事务之八——分布式事务(Spring+JTA+Atomikos+Hibernate+JMS)
- Elasticsearch学习笔记
- Android---Adapter
- Mysql事务
- 数据结构——查找、普通查找、折半查找
- jsp页面带有多选框的grid表格,如何将勾选中的行记录所有列数据传送到后台。
- libevent
- LeetCode493. Reverse Pairs(Hard)
- web前端错误监控
- 学会容器服务帮你打造Docker云端最佳运行环境
- codeforces 434 div2
- Banner实现无限轮播图
- 【NOI OJ】1253 Dungeon Master
- axios