1js动态拼接表格,2获取表格内属性,并将table表格元素封装成json,3后台将json转成list

前段时间做一个pdf操作的项目,现在分享一下在jsp中遇到的坑

1.js动态拼接表格

文件上传完毕后读取文件信息,将本次上传的文件信息封装到list中

从controller层传过来是map集合

map里面存了一个list和pages

ajax获取导数据后进行拼接

body中

<table class="layui-table" lay-skin="line"  >
<thead>
<tr>
<th>文件名</th>
<th>页数</th>
<th>文件大小</th>
<th>文件预览</th>
<th>删除</th>
</tr>
</thead>
<tbody id="Info">
</tbody>
</table>

js的方法中:

var pageId=$("#pageId");
pageId.load(url, function(data){
var json = eval("(" + data + ")");
var tb='';
for(var i = 0; i< json.list.length; i++){
tb=tb +'<tr><td name=filename>'+json.list[i].filename+'</td>'
+'<td name=pages>'+json.list[i].pages +'</td>'
+'<td name=filesize>'+json.list[i].filesize +'kb</td>'
+'<td name=file><button class="layui-btn layui-btn-primary layui-btn-mini" onclick="openPdf(' +i+ ');">文件预览</button></td>'
+'<td name=inputfile hidden="true">'+json.list[i].inputfile+'</td>'
+'<td><button class="layui-btn layui-btn-primary layui-btn-small" onclick="del(' +i+ ');">  <i class="layui-icon"></i></button></td></tr>'
}
//显示table
$("#Info").html(tb);
//总页数
$("#pageId").html(json.pages);
});

PS:刚开始拼接我有出现不显示,原因大致是:

1.没有用 eval去转换data;

2.’和”冒号的问题;

3.接收的值不正确;

效果图:

2获取表格内属性,并将table表格元素封装成json

操作完pdf文件后,

我需要把获取表格(table)内文件信息,并封装成json传到后台进行入库操作;

这里的封装json是数组形式,效果>>例:

[{"name":"张三","age":20,"gender":"f"},
{"name":"李四","age":22,"gender":"f"}]

代码如下

var tabLen = document.getElementById("Info");
var json = "";
if(tabLen.rows.length!=0){
json = "[";
for (var i = 0; i <tabLen.rows.length; i++) {
json += '{"filename":"' + tabLen.rows[i].cells[0].innerHTML
+ '","pages":' + tabLen.rows[i].cells[1].innerHTML
+ ',"filesize":"' + tabLen.rows[i].cells[2].innerHTML
+ '","inputfile":"' + tabLen.rows[i].cells[4].innerHTML + '"},';
}
//方法可在字符串中抽取从 start 下标开始的指定数目的字符。
json= json.substr(0, json.length - 1);
json=jsonT+"]";
}

PS:这里需要注意的地方:

1.$(“#Info”);可能会失效,推荐用document.getElementById(“Info”);

2.注意下标的问题rows[i].cells[2]代表第一行的第3个元素(下标0开始,这个,不用多说了吧);

3.innerHTML代表标签间的值,千万别写成input的val();

3.后台将json转成list

推荐阿里的转换工具 com.alibaba.fastjson.JSONArray;

这是JSONArray的maven:

<!-- json转换解析 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.4</version>
</dependency>

后台操作(controller)

//获取前端传过来的json后,直接用下面这个方法,简单粗暴
//注意,json需要转成String类型的字符串
List<实体类> list =JSONArray.parseArray(你的json字符串, 实体类.class);

PS:这里需要注意的是:

1.如果json有错,是会抛异常的,首先,你打断点看一下你的json有没有错

你可以复制你的json,然后去在线JSON校验看一下你的json是否正确

2.如果你json中的name和实体类name对应不上的话,也会报错

3.注意,你传过来的json格式

PS:

1.前端不像后台,稍不留神,就会导致某某事件失效,多用F12看错误,

2.JSONArray很强大,不止只有json转list,大家可以去看看api

3.有问题记得在下方评论哦