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.有問題記得在下方評論哦