當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Layui-经典模块化前端框架

發布時間：2024/3/26 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Layui-经典模块化前端框架小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Layui

- - - 1. Layui簡介
    - - 1.1 下載
      - 1.2 入門
    - 2. 柵格布局
    - 3. 圖標
    - 4. 按鈕
    - - 4.1 主題
      - 4.2 尺寸
      - 4.3 圓角
      - 4.4 圖標按鈕
      - 4.5 按鈕組
    - 5. 后臺布局
    - 6. 數據表格
    - 7. 彈出層
    - 8. 表單
    - 9. 新增
    - 10. 刪除跟修改功能

1. Layui簡介

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。

其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。

1.1 下載

官網：https://www.layui.com/

下載后的目錄結構如下：

├─css //css目錄│ │─modules //模塊css目錄│ │ ├─laydate│ │ ├─layer│ │ └─layim│ └─layui.css //核心樣式文件├─font //字體圖標目錄├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）│─lay //模塊核心目錄│ └─modules //各模塊組件│─layui.js //基礎核心庫└─layui.all.js //包含layui.js和所有模塊的合并文件

1.2 入門

2. 柵格布局

? 如你所愿，在 layui 2.0 的版本中，我們加入了強勁的柵格系統和后臺布局方案，這意味著你終于可以著手采用 layui 排版你的響應式網站和后臺系統了。layui 的柵格系統采用業界比較常見的 12 等分規則，內置移動設備、平板、桌面中等和大型屏幕的多終端適配處理，最低能支持到ie8。而你應當更欣喜的是，layui 終于開放了它經典的后臺布局方案，快速搭建一個屬于你的后臺系統將變得十分輕松自如。

采用 layui-row 來定義行，如：<div class="layui-row"></div>
列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現更加動態靈活的布局。

3. 圖標

? layui 的所有圖標全部采用字體形式，取材于阿里巴巴矢量圖標庫（iconfont）。因此你可以把一個 icon 看作是一個普通的文字，這意味著你直接用 css 控制文字屬性，如 color、font-size，就可以改變圖標的顏色和大小。你可以通過 font-class 或 unicode 來定義不同的圖標。

? 通過對一個內聯元素（一般推薦用 i標簽）設定 class=“layui-icon”，來定義一個圖標，然后對元素加上圖標對應的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可顯示出你想要的圖標，譬如：

或者

4. 按鈕

? 向任意HTML元素設定class=“layui-btn”，建立一個基礎按鈕。通過追加格式為*layui-btn-{type}*的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。

<button type="button" class="layui-btn">一個標準的按鈕</button> <a href="http://www.bailiban.com" class="layui-btn">一個可跳轉的按鈕</a>

4.1 主題

4.2 尺寸

<button type="button" class="layui-btn layui-btn-lg">大型按鈕</button><button type="button" class="layui-btn ">默認按鈕</button><button type="button" class="layui-btn layui-btn-sm">小型按鈕</button><button type="button" class="layui-btn layui-btn-xs">迷你按鈕</button> <button type="button" class="layui-btn layui-btn-fluid">流體按鈕（最大化適應）</button>

4.3 圓角

4.4 圖標按鈕

圖標字體參考圖標列表。

4.5 按鈕組

5. 后臺布局

? layui 之所以贏得如此多人的青睞，更多是在于它前后臺系統通吃的能力。既可編織出絢麗的前臺頁面，又可滿足繁雜的后臺功能需求。layui 致力于讓每一位開發者都能輕松搭建自己的后臺。下面是 layui 提供的一個現場的方案。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>layui-demo</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后臺布局</div><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制臺</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用戶</a></li><li class="layui-nav-item"><a href="javascript:;">其它系統</a><dl class="layui-nav-child"><dd><a href="">郵件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授權管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">賢心</a><dl class="layui-nav-child"><dd><a href="">基本資料</a></dd><dd><a href="">安全設置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">系統管理</a><dl class="layui-nav-child"><dd><a href="javascript:;" data-url="user.jsp">用戶管理</a></dd><dd><a href="javascript:;" data-url="good.jsp">商品管理</a></dd></dl></li></ul></div></div><div class="layui-body"><div style="padding: 15px;" class="pagenav">內容主體區域</div></div><div class="layui-footer">? layui.com - 底部固定區域</div> </div> <script src="layui/layui.js"></script> <script> //JavaScript代碼區域 layui.use('element', function(){/* 使用layui內置的jquery */var $=layui.$;/* 給菜單添加點擊事件 */$('dl.layui-nav-child>dd').click(function (){/* 獲取點擊后的跳轉頁面url */var url = $(this).find("a").attr("data-url");/* 將URL部分內容顯示在主體區域 */$('.pagenav').load(url);})}); </script> </body> </html>

6. 數據表格

? table 模塊是layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的組成之一。它用于對表格進行一些列功能和動態化數據操作，涵蓋了日常業務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持對表格重載（比如搜索、條件篩選等），支持復選框，支持分頁，支持單元格編輯等等一些列功能。盡管如此，我們仍將對其進行完善，在控制代碼量和性能的前提下，不定期增加更多人性化功能。table 模塊也將是 layui 重點維護的項目之一。

? 這里的數據表格的演示我們采用前臺跟后臺交互的方式，故我們先準備后臺的表格數據。

數據準備

? 我們在后臺封裝100條用戶數據，由于前端接收數據的時候接收的是json格式字符串，所以后臺在傳遞數據時候需要進行數據處理。

public class UserData {// 用戶數據的集合public static List<User> userList = new ArrayList<User>();} public class User {private String id ;private String name ;private String password ;private String userImg ;// setter and getter } @WebServlet("/TableDataServlet") public class TableDataServlet extends HttpServlet {// 構造方法中創建100條用戶數據public TableDataServlet() {for(int i=1;i<=100;i++){User u = new User(i,"seven"+i,"123456","1.png");UserData.userList.add(u);}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { // 獲取前端傳遞需要的頁號跟每頁顯示數量String pageNum = req.getParameter("page");String limit = req.getParameter("limit");// 獲取當頁數量的集合List<User> pageList = getPageList(Integer.parseInt(pageNum),Integer.parseInt(limit));resp.setContentType("text/json;charset=utf-8");// 將數據封裝成前端需要的格式JSONObject data = new JSONObject();data.put("code", 0);data.put("msg", "no data."); // 無數據顯示的內容data.put("count", userList.size());JSONArray array= JSONArray.parseArray(JSON.toJSONString(pageList));data.put("data", array);resp.getWriter().write(data.toString());}// 獲取當頁數量的集合public List<User> getPageList(int pageNo ,int pageLimit){List<User> list = new ArrayList<>();int maxSize = UserData.userList.size()> pageNo*pageLimit? pageNo*pageLimit:UserData.userList.size() ;for(int i=(pageNo-1)*pageLimit;i<maxSize;i++){list.add(UserData.userList.get(i));}return list ;}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doGet(req, resp);}}

參數的page表示頁碼。
參數limit表示每頁顯示的數量。

前臺頁面user.jsp

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用戶列表</title><link rel="stylesheet" href="layui/css/layui.css" media="all"><style>/* 設置表格行高自適應 */.layui-table-cell {height: auto !important;}</style> </head><body><div><button type="button" class="layui-btn" id="add_btn">新增</button></div> <table id="demo" lay-filter="demo" ></table><script> layui.use('table',function(){var table = layui.table;//第一個實例table.render({elem: '#demo' //指定原始 table 容器的選擇器或 DOM，方法渲染方式必填 ,toolbar:true // 是否顯示工具條,url: 'TableDataServlet' //數據接口,page: true //開啟分頁,cols: [[ //表頭，里面的name必須保證返回的json數組的bean的屬性名為name，titile為頁面表頭顯示的字段名{field: 'id', title: 'ID', width:'20%',sort:true},{field: 'name', title: '姓名', width: '20%',sort:true},{field: 'password', title: '密碼', width:'20%'},{field: 'userImg', title: '密碼',templet : '#proImg'} ,{fixed: 'right',title : '操作',align:'center', toolbar: '#opt'}]]});}); </script><script id="opt" type="text/html"><a lay-event="update_event" href="javascript:;" ><button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-normal">修改</button></a><a lay-event="del_event" href="javascript:;" ><button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-normal">刪除</button></a> </script> <script id="proImg" type="text/html"><img src="ImageServlet?imgName={{d.user_img}}" /> </script></body> </html> @WebServlet("/ImageServlet") public class ImageServlet extends HttpServlet{// 假設圖片都是存在這個路徑下private static String path = "D://upload//";@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { // 獲取傳遞過來的文件名String imgName = req.getParameter("imgName"); // 取path路徑下找到這個文件，作為流數據讀取踹，然后通過OutputStream寫到客戶端 // 如果看不懂這段代碼，把當時課堂上講的圖片上傳視頻再重復看下FileInputStream inputStream = new FileInputStream(path+imgName);int i = inputStream.available();byte[] buff = new byte[i];inputStream.read(buff);inputStream.close();resp.setContentType("image/*");OutputStream out = resp.getOutputStream();out.write(buff);out.close();}}

最后一列加上了操作列，為后續功能做準備。
由于user.jsp是內嵌在導航頁面中，所以user.jsp不需要再次引入layui的css跟js。
sort:true表示是否給列加上排序功能。
templet是為了設置自定義列內容跟結構。
.layui-table-cell是為了設置列高度自適應。

7. 彈出層

? layer 至今仍作為 layui 的代表作，她的受眾廣泛并非偶然，而是這數年來的堅持、不棄的執念，將那些不屑的眼光轉化為應得的尊重，不斷完善和維護、不斷建設和提升社區服務，在 Web 開發者的圈子里口口相傳，乃至于成為今天的 layui 最強勁的源動力。目前，layer已成為國內最多人使用的 Web 彈層組件，GitHub) 自然Stars5000+，官網累計下載量達50w+，大概有30萬不同規模的 Web 平臺使用過 layer。

? 之所以列舉上面這些數字，并非是在夸夸其談，而是懂 layer 的人都知道，這是一種怎樣不易的沉淀。而由于 layer 在 layui 體系中的位置比較特殊，甚至讓很多人都誤以為 layui = layer ui，所以再次強調 layer 只是作為 layui 的一個彈層模塊，由于其用戶基數較大，所以至今仍把她作為獨立組件來維護。

layer作為獨立組件使用，你可以去layer獨立版本官網下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本，并引入layer.js。且jquery的引入位置必須放到layer引入之前，否則無效。

layer的獨立版本：https://layer.layui.com/
使用方式
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="layer/layer.js"></script><script type="text/javascript">layer.msg('hello'); </script>

layer作為 layui 模塊化使用，那么你直接在官網下載 layui 框架即可，無需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js。

使用方式
<script>layui.use('layer', function(){var layer = layui.layer;layer.msg('hello');}); </script>
type

layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。若你采用*layer.open({type: 1})*方式調用，則type為必填項（信息框除外）
title

? title支持三種類型的值，若你傳入的是普通的字符串，如title :‘我是標題’，那么只會改變標題文本；若你還需要自定義標題區域樣式，那么你可以title: [‘文本’, ‘font-size:18px;’]，數組第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
content

? content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨著type的不同而不同。
area

? 在默認狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: ‘500px’，高度仍然是自適應的。當你寬高都要定義時，你可以area: [‘500px’, ‘300px’]
btn

? 信息框模式時，btn默認是一個確認按鈕，其它層類型則默認不顯示，加載層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: ‘我知道了’，當你要定義兩個按鈕時，你可以btn: [‘yes’, ‘no’]。當然，你也可以定義更多按鈕，比如：btn: [‘按鈕1’, ‘按鈕2’, ‘按鈕3’, …]，按鈕1的回調是yes，而從按鈕2開始，則回調為btn2: function(){}，以此類推。
closeBtn

layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0
shade

即彈層外區域。默認是0.3透明度的黑色背景（’#000’）。如果你想定義別的顏色，可以shade: [0.8, ‘#393D49’]；如果你不想顯示遮罩，可以shade: 0
shadeClose

如果你的shade是存在的，那么你可以設定shadeClose來控制點擊彈層外區域關閉。
time

默認不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒后自動關閉，注意單位是毫秒（1秒=1000毫秒）
layer.open(options)

基本上是露臉率最高的方法，不管是使用哪種方式創建層，都是走layer.open()，創建任何類型的彈層都會返回一個當前層索引，上述的options即是基礎參數
layer.alert(content, options, yes) - 普通信息框

? 它的彈出似乎顯得有些高調，一般用于對用戶造成比較強烈的關注，類似系統alert，但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數，可以設定各種你所需要的基礎參數，但如果你不需要的話，直接寫回調即可。
layer.confirm(content, options, yes, cancel) - 詢問框

? 類似系統confirm，但卻遠勝confirm，另外它不是和系統的confirm一樣阻塞你需要把交互的語句放在回調體中。同樣的，它的參數也是自動補齊的。
layer.msg(content, options, end) - 提示框

? 我們在源碼中用了相對較大的篇幅來定制了這個msg，目的是想將其打造成露臉率最高的提示框。而事實上我的確也在大量地使用它。因為它簡單，而且足夠得自覺，它不僅占據很少的面積，而且默認還會3秒后自動消失所有這一切都決定了我對msg的愛。因此我賦予了它許多可能在外形方面，它堅持簡陋的變化，在作用方面，它堅持零用戶操作。而且它的參數也是自動補齊的。
layer.load(icon, options) - 加載層

? type:3的深度定制。load并不需要你傳太多的參數，但如果你不喜歡默認的加載風格，你還有選擇空間。icon支持傳入0-2如果是0，無需傳。另外特別注意一點：load默認是不會自動關閉的，因為你一般會在ajax回調體中關閉它。
layer.close(index) - 關閉特定層

關于它似乎沒有太多介紹的必要，唯一讓你疑惑的，可能就是這個index了吧。事實上它非常容易得到。
//當你在iframe頁面關閉自身時 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉 //如果你想關閉最新彈出的層，直接獲取layer.index即可layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的

8. 表單

? 我們通常會在最常用的模塊上耗費更多的精力，用盡可能簡單的方式詮釋 layui 所帶來的便捷性。顯而易見，form 是我們非常看重的一塊。于是它試圖用一貫極簡的姿態，去捕獲你對它的深深青睞。寄托在原始表單元素上的屬性設定，及其全自動的初始渲染，和基于事件驅動的接口書寫方式，會讓你覺得，傳統模式下的組件調用形式，也可以是那樣的優雅、簡單。然而文字的陳述始終是蒼白的，所以用行動慢慢感受 layui.form 給你的項目帶來的效率提升吧。

元素組件

layui 針對各種表單元素做了較為全面的UI支持，你無需去書寫那些 UI 結構，你只需要寫 HTML 原始的 input、select、textarea 這些基本的標簽即可。我們在 UI 上的渲染只要求一點，你必須給表單體系所在的父元素加上*class="layui-form"*，一切的工作都會在你加載完form模塊后，自動完成。如下是一個最基本的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head> <body> <form class="layui-form"> <div class="layui-form-item"><label class="layui-form-label">輸入框</label><div class="layui-input-block"><input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">下拉選擇框</label><div class="layui-input-block"><select name="interest" lay-filter="aihao"><option value="0">寫作</option><option value="1">閱讀</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">復選框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="寫作"><input type="checkbox" name="like[read]" title="閱讀"></div></div><div class="layui-form-item"><label class="layui-form-label">開關關</label><div class="layui-input-block"><input type="checkbox" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">開關開</label><div class="layui-input-block"><input type="checkbox" checked lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">單選框</label><div class="layui-input-block"><input type="radio" name="sex" value="0" title="男"><input type="radio" name="sex" value="1" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">請填寫描述</label><div class="layui-input-block"><textarea placeholder="請輸入內容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div> </form> <script src="layui.js"></script> <script> layui.use('form', function(){var form = layui.form;//各種基于事件的操作，下面會有進一步介紹 }); </script> </body> </html>

事件監聽

語法：form.on('event(過濾器值)', callback); event描述

select	監聽select下拉選擇事件
checkbox	監聽checkbox復選框勾選事件
switch	監聽checkbox復選框開關事件
radio	監聽radio單選框事件
submit	監聽表單提交事件

監聽select
form.on('select(test)', function(data){console.log(data); });
監聽checkbox復選
form.on('checkbox(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM對象console.log(data.elem.checked); //是否被選中，true或者falseconsole.log(data.value); //復選框value值，也可以通過data.elem.value得到console.log(data.othis); //得到美化后的DOM對象 });
監聽submit提交

按鈕點擊或者表單被執行提交時觸發，其中回調函數只有在驗證全部通過后才會進入，回調返回三個成員：
form.on('submit(*)', function(data){console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。 });
再次溫馨提示：上述的*submit(*)*中的 *** 號為事件過濾器的值，是在你綁定執行提交的元素時設定的，如：
<button lay-submit lay-filter="*">提交</button>
你可以把*號換成任意的值，如：lay-filter=“go”，但監聽事件時也要改成 form.on(‘submit(go)’, callback);

表單賦值 / 取值

語法：form.val(‘filter’, object);

用于給指定表單集合的元素賦值和取值。如果 object 參數存在，則為賦值；如果 object 參數不存在，則為取值。

//給表單賦值 form.val("formTest", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值"username": "賢心" // "name": "value","sex": "女","auth": 3,"check[write]": true,"open": false,"desc": "我愛layui" });//獲取表單區域所有值 var data1 = form.val("formTest");

第二個參數中的鍵值是表單元素對應的 name 和 value。

9. 新增

打開新增頁面

<div><button class="layui-btn" id="add_btn">新增</button></div> <script>$("#add_btn").on("click",function () {layer.msg(" add ") ;layer.open({type:2,title:"用戶新增",area: ['700px', '600px'],maxmin:true,shadeClose :false,content:'add.jsp'});}); </script>

顯示新增頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>layui</title><link rel="stylesheet" href="static/layui/css/layui.css"> </head> <body><form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">用戶名</label><div class="layui-input-block"><input type="text" name="userName" placeholder="請輸入用戶名" autocomplete="off" class="layui-input" ></div></div><div class="layui-form-item"><label class="layui-form-label">密碼</label><div class="layui-input-block"><input type="text" name="userPwd" placeholder="請輸入用戶密碼" autocomplete="off" class="layui-input" ></div></div><input id="img" type="hidden" name="imgName" /><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上傳圖片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div> </form><script src="static/layui/layui.js"></script><script>layui.use(['form','upload'], function(){var upload = layui.upload;var form = layui.form;var $ = layui.$;//圖片上傳var uploadInst = upload.render({elem: '#test1' //綁定元素,url: 'UploadServlet' //上傳接口,before: function(obj){//預讀本地文件示例obj.preview(function(index, file, result){$('#demo1').attr('src', result); //圖片鏈接});},done: function(res){//res 獲取返回的json結果$('#img').val(res.data.imgName);} });form.on('submit(*)', function(data){//1,數據提交到后臺，2，關閉當前頁面，3刷新父頁面的table$.post("InsertServlet",data.field,function () {// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');// 通過父頁面關閉當前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引parent.layer.close(index);return true ;// 返回true表示提交數據，返回false表示不提交});});});</script> </body> </html>

處理新增請求的InsertServlet

@WebServlet("/InsertServlet") public class InsertSerlvet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String userName = req.getParameter("userName");String userPwd = req.getParameter("userPwd");String imgName = req.getParameter("imgName");User u = new User(""+(new Random().nextInt() + 100),userName,userPwd,imgName);UserData.userList.add(u);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

10. 刪除跟修改功能

? 上面基于后臺布局的demo有了表格列表數據的顯示功能，還有了添加功能，現將刪除跟修改功能也補全完整。

上面已經把修改跟刪除的界面顯示定義出來，我們這里只需要通過table.on將點擊事件進行綁定即可。

table.on('tool(demo)', function(obj){var layEvent = obj.event; //獲得 lay-event 對應的值 var data = obj.data; //獲得當前行數據var userName = data.name;// 表單中的name字段var userId = data.id;// 表單中的id字段var $ = layui.$ ;if(layEvent === 'del_event'){layer.confirm("你確定真的要刪除"+userName+"的數據嗎?",{icon: 2},function(index){// 異步請求去后臺刪除數據$.post("DeleteServlet",{"user_id":userId},function(data){// 刪除成功給出提示if(data.flag){// 操作成功的提示layer.msg("刪除成功！",{icon:1});// 關閉最新的層layer.close(layer.index);// 刷新id為demo的table數據layui.table.reload("demo");}});});}else if(layEvent === 'update_event'){// 修改操作// 打開修改頁面layer.open({type:2,title:"用戶修改",area: ['700px', '600px'],maxmin:true,shadeClose :false,// 修改頁面需要先訪問Servlet獲取修改的用戶信息content:'UpdatePageServlet?user_id='+userId});} });

table.on('tool(demo)'中的demo是去找lay-filter="demo"的table。

刪除的后臺功能

@WebServlet("/DeleteServlet") public class DeleteServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String deleteId = req.getParameter("deleteId");for(int i = 0; i< UserData.userList.size(); i++){String id = UserData.userList.get(i).getId() ;if(id.equals(deleteId)){UserData.userList.remove(i);break;}}resp.setContentType("text/json;charset=utf-8");resp.getWriter().write("{\"flag\":true}");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

進入修改頁面時需要先到后臺獲取要修改的用戶信息

@WebServlet("/UpdatePageServlet") public class UpdatePageServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String userId = req.getParameter("userId");for(int i = 0; i< UserData.userList.size(); i++){String id = UserData.userList.get(i).getId() ;if(id.equals(userId)){req.setAttribute("updateUser", UserData.userList.get(i));break;}}req.getRequestDispatcher("update.jsp").forward(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

然后才能打開修改頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>layui</title><link rel="stylesheet" href="static/layui/css/layui.css"><style>#demo1{width: 300px;}</style> </head> <body><form class="layui-form"><input type="hidden" name="userId" value="${updateUser.id}" /><div class="layui-form-item"><label class="layui-form-label">用戶名</label><div class="layui-input-block"><input type="text" name="userName" value="${updateUser.name}" placeholder="請輸入用戶名" autocomplete="off" class="layui-input" ></div></div><div class="layui-form-item"><label class="layui-form-label">密碼</label><div class="layui-input-block"><input type="text" name="userPwd" value="${updateUser.password}" placeholder="請輸入用戶密碼" autocomplete="off" class="layui-input" ></div></div><input id="img" type="hidden" name="imgName" value="${updateUser.img}" /><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上傳圖片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1" src="ImageServlet?imageName=${updateUser.img}"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div><script src="static/layui/layui.js"></script><script>layui.use(['form','upload'], function(){var upload = layui.upload;var form = layui.form;var $ = layui.$;//執行實例var uploadInst = upload.render({elem: '#test1' //綁定元素,url: 'UploadServlet' //上傳接口,before: function(obj){//預讀本地文件示例obj.preview(function(index, file, result){$('#demo1').attr('src', result); //圖片鏈接（base64）});},done: function(res){$('#img').val(res.data.imgName);},error: function(){}});form.on('submit(*)', function(data){//1,數據提交到后臺，2，關閉當前頁面，3刷新父頁面的table$.post("UpdateServlet",data.field,function () {// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');// 通過父頁面關閉當前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引parent.layer.close(index);});// 通過父頁面關閉當前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引parent.layer.close(index);// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');return true ;// 返回true表示提交數據，返回false表示不提交});});</script> </form> </body> </html>

修改操作要提交到后臺完成

@WebServlet("/UpdateServlet") public class UpdateServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String userId = req.getParameter("userId");String userName = req.getParameter("userName");String userPwd = req.getParameter("userPwd");String imgName = req.getParameter("imgName");for(int i = 0; i< UserData.userList.size(); i++){String id = UserData.userList.get(i).getId() ;if(id.equals(userId)){UserData.userList.get(i).setName(userName);UserData.userList.get(i).setPassword(userPwd);UserData.userList.get(i).setImg(imgName);break;}}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

總結

以上是生活随笔為你收集整理的Layui-经典模块化前端框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：软件架构模式之事件驱动架构
下一篇：关于端午节的网页设计HTML,梦幻西游网