jsp页面带有多选框的grid表格,如何将勾选中的行记录所有列数据传送到后台。
2017-09-18 13:58
483 查看
1.本方案大体思路是,将选中元素所在行的数据,拼装成一个js对象,然后使用JSON.stringify方法将对象转换为json字符串,以ajax.post的方式发送给后台,然后在server端用GsonUtils转为List
3、js代码部分
//选中后点击按钮从该方法开始执行
//按钮如下jsp代码:
js代码:
4、java代码部分
这样就可以将前台列表的选中数据,封装到后台service段的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对象里面了。
相关文章推荐
- 如何在jsp页面下载后台服务器返回的数据并保存为txt格式
- servlet中如何获取jsp页面表格中的数据
- 后台如何向前端传递JSON数据(Servlet传向jsp页面)
- ext6 如何把grid表格的多个数据用json数组传到后台
- 在jsp中选中checkbox后 将该记录的多个数据获取,然后传到Action类中进行后台处理 双主键情况下 *.hbm.xml中的写法
- 请问如何在Web页面中点击一个button之后,用jsp从数据库中读取数据显示到表格里
- 如何用Jquery将后台数据通过表格形式展现在页面上
- 用java将查询到的数据显示到在jsp页面(查询所有及查询一条记录)
- loushang5关于DataSet通过后台查询出的数据如何映射到前台JSP页面的下拉列表中
- springMVC笔记:jsp页面获取后台数据记录列表
- servlet处理数据库表中所有数据,在jsp页面表格中用jst forEach输出解决办法
- jsp页面访问后台方法显示数据
- 如何将数据从Action中传递到下一个JSP页面?
- 如何在登录成功后将后台的数据返回到另一个页面
- 日常问题记录--jsp中struts2标签如何获取当前页面的url参数
- jsp 页面无法正确显示后台数据 ,需多次刷新才能正确显示 在springmvc
- 如何让ajax技术显示数据的jsp页面第一次加载就加载默认查询数据
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- element ui 表格提交时获取所有选中的checkbox的数据
- jsp页面ajax后台取得json数据更新到页面下拉列表