layui資料表格匯入資料
阿新 • • 發佈:2022-05-20
作為一個後端程式設計師,前端做的確實很醜,所以就學習了一下layui框架的使用。資料表格主要的問題就是傳輸資料的問題,這裡我用我的前後端程式碼來做一個實際的分解。
前端部分
可以到layui官網示例中找到資料表格,複製前臺程式碼。也可以使用我的程式碼。
這部分主要更改的是自己的表格屬性,傳值的url。細節我都寫在程式碼註釋裡面了
我的分頁功能好像有點問題,現在還不知到問題在哪,可以先不完成這個功能。
html
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>學生資訊表</legend> </fieldset> <table class="layui-hide" id="test" lay-filter="test"> </table> <script type="text/html" id="toolbarDemo"> <div class="demoTable"> 搜尋ID: <div class="layui-inline"> <input class="layui-input" name="id" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" type="button" id="search_btn" data-type="reload">搜尋</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script>
JavaScript
layui.use('table', function(){ var table = layui.table; var $ = layui.jquery; table.render({ elem: '#test' ,url:'ShowAllServlet' //url寫自己的後端介面,這裡我是通過servlet傳遞json實現的資料傳遞 ,toolbar: '#toolbarDemo' //開啟頭部工具欄,併為其繫結左側模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側圖示。如無需自定義,去除該引數即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '使用者資料表' ,id: 'test' //表格的id值,可用於其他功能呼叫重新整理表格等 ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', width:320, unresize: true, sort: true} //field 是json陣列的name值,title是表格的表頭,width是表格寬度 edit是表格可以編輯,sort 屬性true可以排序 ,{field:'name', title:'姓名', width:320, edit: 'text'} ,{field:'sex', title:'性別', width:320, edit: 'text'} ,{field:'birthday', title:'出生日期', width:320,edit: 'text'} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200} //操作是側邊工具欄的刪除和編輯 ]] ,page: true //分頁 });
後端部分
後端我採用的servlet傳遞json陣列,
這是layui預設規定的資料格式code
- {
- "code": 0,
- "msg": "",
- "count": 1000,
- "data": [{}, {}]
- }
在我們的servlet要把自己的list陣列轉換成json格式,轉換方法在我的程式碼裡面,需要導的包可以私聊我傳送。
我們serlvet的思路是把MySQL中的資料全部遍歷出來,然後存到arraylist物件陣列中,再統一轉到layui需要的json格式。
Servlet
import COM.Bean.student; import COM.Dao.mannger; import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @WebServlet(name = "ShowAllServlet", value = "/ShowAllServlet") //對應表格模組的url public class ShowAllServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");//設定相應的文字型別 response.setContentType("text/html;charset=utf-8");//設定響應型別,並防止中文亂碼 ArrayList<student> stulist = new ArrayList<>(); //定義arraylist陣列 mannger dao = new mannger(); dao.stulist(stulist); int count1 = stulist.size(); //count是資料的條數 String count = ""+ count1; Map<String, Object> result = new HashMap<String, Object>(); //下面的部分只需要改result.put(“data”,stulist)中的stulist ,換成你自己的list //System.out.println(paperslist); result.put("code", 0); result.put("msg", ""); result.put("count",count); result.put("data",stulist); System.out.println(result); ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString (result); response.getWriter().print(json.toString()); //傳遞json給後端 System.out.println(result); } }