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">&#xe640;</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.有问题记得在下方评论哦