當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Layui-经典模块化前端框架

發(fā)布時(shí)間：2024/3/26 HTML 33 豆豆

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

Layui

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

1. Layui簡介

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

其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。

1.1 下載

官網(wǎng)：https://www.layui.com/

下載后的目錄結(jié)構(gòu)如下：

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

1.2 入門

2. 柵格布局

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

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

3. 圖標(biāo)

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

? 通過對(duì)一個(gè)內(nèi)聯(lián)元素（一般推薦用 i標(biāo)簽）設(shè)定 class=“l(fā)ayui-icon”，來定義一個(gè)圖標(biāo)，然后對(duì)元素加上圖標(biāo)對(duì)應(yīng)的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可顯示出你想要的圖標(biāo)，譬如：

或者

4. 按鈕

? 向任意HTML元素設(shè)定class=“l(fā)ayui-btn”，建立一個(gè)基礎(chǔ)按鈕。通過追加格式為*layui-btn-{type}*的class來定義其它按鈕風(fēng)格。內(nèi)置的按鈕class可以進(jìn)行任意組合，從而形成更多種按鈕風(fēng)格。

<button type="button" class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button> <a href="http://www.bailiban.com" class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>

4.1 主題

4.2 尺寸

<button type="button" class="layui-btn layui-btn-lg">大型按鈕</button><button type="button" class="layui-btn ">默認(rèn)按鈕</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">流體按鈕（最大化適應(yīng)）</button>

4.3 圓角

4.4 圖標(biāo)按鈕

圖標(biāo)字體參考圖標(biāo)列表。

4.5 按鈕組

5. 后臺(tái)布局

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

<%@ 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 后臺(tái)布局</div><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制臺(tái)</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:;">其它系統(tǒng)</a><dl class="layui-nav-child"><dd><a href="">郵件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授權(quán)管理</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="">安全設(shè)置</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:;">系統(tǒng)管理</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">內(nèi)容主體區(qū)域</div></div><div class="layui-footer">? layui.com - 底部固定區(qū)域</div> </div> <script src="layui/layui.js"></script> <script> //JavaScript代碼區(qū)域 layui.use('element', function(){/* 使用layui內(nèi)置的jquery */var $=layui.$;/* 給菜單添加點(diǎn)擊事件 */$('dl.layui-nav-child>dd').click(function (){/* 獲取點(diǎn)擊后的跳轉(zhuǎn)頁面url */var url = $(this).find("a").attr("data-url");/* 將URL部分內(nèi)容顯示在主體區(qū)域 */$('.pagenav').load(url);})}); </script> </body> </html>

6. 數(shù)據(jù)表格

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

? 這里的數(shù)據(jù)表格的演示我們采用前臺(tái)跟后臺(tái)交互的方式，故我們先準(zhǔn)備后臺(tái)的表格數(shù)據(jù)。

數(shù)據(jù)準(zhǔn)備

? 我們?cè)诤笈_(tái)封裝100條用戶數(shù)據(jù)，由于前端接收數(shù)據(jù)的時(shí)候接收的是json格式字符串，所以后臺(tái)在傳遞數(shù)據(jù)時(shí)候需要進(jìn)行數(shù)據(jù)處理。

public class UserData {// 用戶數(shù)據(jù)的集合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 {// 構(gòu)造方法中創(chuàng)建100條用戶數(shù)據(jù)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 { // 獲取前端傳遞需要的頁號(hào)跟每頁顯示數(shù)量String pageNum = req.getParameter("page");String limit = req.getParameter("limit");// 獲取當(dāng)頁數(shù)量的集合List<User> pageList = getPageList(Integer.parseInt(pageNum),Integer.parseInt(limit));resp.setContentType("text/json;charset=utf-8");// 將數(shù)據(jù)封裝成前端需要的格式JSONObject data = new JSONObject();data.put("code", 0);data.put("msg", "no data."); // 無數(shù)據(jù)顯示的內(nèi)容data.put("count", userList.size());JSONArray array= JSONArray.parseArray(JSON.toJSONString(pageList));data.put("data", array);resp.getWriter().write(data.toString());}// 獲取當(dāng)頁數(shù)量的集合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);}}

參數(shù)的page表示頁碼。
參數(shù)limit表示每頁顯示的數(shù)量。

前臺(tái)頁面user.jsp

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用戶列表</title><link rel="stylesheet" href="layui/css/layui.css" media="all"><style>/* 設(shè)置表格行高自適應(yīng) */.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;//第一個(gè)實(shí)例table.render({elem: '#demo' //指定原始 table 容器的選擇器或 DOM，方法渲染方式必填 ,toolbar:true // 是否顯示工具條,url: 'TableDataServlet' //數(shù)據(jù)接口,page: true //開啟分頁,cols: [[ //表頭，里面的name必須保證返回的json數(shù)組的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{// 假設(shè)圖片都是存在這個(gè)路徑下private static String path = "D://upload//";@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { // 獲取傳遞過來的文件名String imgName = req.getParameter("imgName"); // 取path路徑下找到這個(gè)文件，作為流數(shù)據(jù)讀取踹，然后通過OutputStream寫到客戶端 // 如果看不懂這段代碼，把當(dāng)時(shí)課堂上講的圖片上傳視頻再重復(fù)看下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();}}

最后一列加上了操作列，為后續(xù)功能做準(zhǔn)備。
由于user.jsp是內(nèi)嵌在導(dǎo)航頁面中，所以u(píng)ser.jsp不需要再次引入layui的css跟js。
sort:true表示是否給列加上排序功能。
templet是為了設(shè)置自定義列內(nèi)容跟結(jié)構(gòu)。
.layui-table-cell是為了設(shè)置列高度自適應(yīng)。

7. 彈出層

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

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

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

layer的獨(dú)立版本：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 模塊化使用，那么你直接在官網(wǎng)下載 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（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）。若你采用*layer.open({type: 1})*方式調(diào)用，則type為必填項(xiàng)（信息框除外）
title

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

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

? 在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的，但當(dāng)你只想定義寬度時(shí)，你可以area: ‘500px’，高度仍然是自適應(yīng)的。當(dāng)你寬高都要定義時(shí)，你可以area: [‘500px’, ‘300px’]
btn

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

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

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

如果你的shade是存在的，那么你可以設(shè)定shadeClose來控制點(diǎn)擊彈層外區(qū)域關(guān)閉。
time

默認(rèn)不會(huì)自動(dòng)關(guān)閉。當(dāng)你想自動(dòng)關(guān)閉時(shí)，可以time: 5000，即代表5秒后自動(dòng)關(guān)閉，注意單位是毫秒（1秒=1000毫秒）
layer.open(options)

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

? 它的彈出似乎顯得有些高調(diào)，一般用于對(duì)用戶造成比較強(qiáng)烈的關(guān)注，類似系統(tǒng)alert，但卻比alert更靈便。它的參數(shù)是自動(dòng)向左補(bǔ)齊的。通過第二個(gè)參數(shù)，可以設(shè)定各種你所需要的基礎(chǔ)參數(shù)，但如果你不需要的話，直接寫回調(diào)即可。
layer.confirm(content, options, yes, cancel) - 詢問框

? 類似系統(tǒng)confirm，但卻遠(yuǎn)勝confirm，另外它不是和系統(tǒng)的confirm一樣阻塞你需要把交互的語句放在回調(diào)體中。同樣的，它的參數(shù)也是自動(dòng)補(bǔ)齊的。
layer.msg(content, options, end) - 提示框

? 我們?cè)谠创a中用了相對(duì)較大的篇幅來定制了這個(gè)msg，目的是想將其打造成露臉率最高的提示框。而事實(shí)上我的確也在大量地使用它。因?yàn)樗唵?#xff0c;而且足夠得自覺，它不僅占據(jù)很少的面積，而且默認(rèn)還會(huì)3秒后自動(dòng)消失所有這一切都決定了我對(duì)msg的愛。因此我賦予了它許多可能在外形方面，它堅(jiān)持簡陋的變化，在作用方面，它堅(jiān)持零用戶操作。而且它的參數(shù)也是自動(dòng)補(bǔ)齊的。
layer.load(icon, options) - 加載層

? type:3的深度定制。load并不需要你傳太多的參數(shù)，但如果你不喜歡默認(rèn)的加載風(fēng)格，你還有選擇空間。icon支持傳入0-2如果是0，無需傳。另外特別注意一點(diǎn)：load默認(rèn)是不會(huì)自動(dòng)關(guān)閉的，因?yàn)槟阋话銜?huì)在ajax回調(diào)體中關(guān)閉它。
layer.close(index) - 關(guān)閉特定層

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

8. 表單

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

元素組件

layui 針對(duì)各種表單元素做了較為全面的UI支持，你無需去書寫那些 UI 結(jié)構(gòu)，你只需要寫 HTML 原始的 input、select、textarea 這些基本的標(biāo)簽即可。我們?cè)?UI 上的渲染只要求一點(diǎn)，你必須給表單體系所在的父元素加上*class="layui-form"*，一切的工作都會(huì)在你加載完form模塊后，自動(dòng)完成。如下是一個(gè)最基本的例子： <!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="請(qǐng)輸入" 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">復(fù)選框</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">開關(guān)關(guān)</label><div class="layui-input-block"><input type="checkbox" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">開關(guān)開</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">請(qǐng)?zhí)顚懨枋?span id="ze8trgl8bvbq" class="token operator"></label><div class="layui-input-block"><textarea placeholder="請(qǐng)輸入內(nèi)容" 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;//各種基于事件的操作，下面會(huì)有進(jìn)一步介紹 }); </script> </body> </html>

事件監(jiān)聽

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

select	監(jiān)聽select下拉選擇事件
checkbox	監(jiān)聽checkbox復(fù)選框勾選事件
switch	監(jiān)聽checkbox復(fù)選框開關(guān)事件
radio	監(jiān)聽radio單選框事件
submit	監(jiān)聽表單提交事件

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

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

表單賦值 / 取值

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

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

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

第二個(gè)參數(shù)中的鍵值是表單元素對(duì)應(yīng)的 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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入用戶密碼" 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){//預(yù)讀本地文件示例obj.preview(function(index, file, result){$('#demo1').attr('src', result); //圖片鏈接});},done: function(res){//res 獲取返回的json結(jié)果$('#img').val(res.data.imgName);} });form.on('submit(*)', function(data){//1,數(shù)據(jù)提交到后臺(tái)，2，關(guān)閉當(dāng)前頁面，3刷新父頁面的table$.post("InsertServlet",data.field,function () {// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');// 通過父頁面關(guān)閉當(dāng)前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引parent.layer.close(index);return true ;// 返回true表示提交數(shù)據(jù)，返回false表示不提交});});});</script> </body> </html>

處理新增請(qǐng)求的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. 刪除跟修改功能

? 上面基于后臺(tái)布局的demo有了表格列表數(shù)據(jù)的顯示功能，還有了添加功能，現(xiàn)將刪除跟修改功能也補(bǔ)全完整。

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

table.on('tool(demo)', function(obj){var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值 var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)var userName = data.name;// 表單中的name字段var userId = data.id;// 表單中的id字段var $ = layui.$ ;if(layEvent === 'del_event'){layer.confirm("你確定真的要?jiǎng)h除"+userName+"的數(shù)據(jù)嗎?",{icon: 2},function(index){// 異步請(qǐng)求去后臺(tái)刪除數(shù)據(jù)$.post("DeleteServlet",{"user_id":userId},function(data){// 刪除成功給出提示if(data.flag){// 操作成功的提示layer.msg("刪除成功！",{icon:1});// 關(guān)閉最新的層layer.close(layer.index);// 刷新id為demo的table數(shù)據(jù)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。

刪除的后臺(tái)功能

@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);} }

進(jìn)入修改頁面時(shí)需要先到后臺(tái)獲取要修改的用戶信息

@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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入用戶密碼" 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.$;//執(zhí)行實(shí)例var uploadInst = upload.render({elem: '#test1' //綁定元素,url: 'UploadServlet' //上傳接口,before: function(obj){//預(yù)讀本地文件示例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,數(shù)據(jù)提交到后臺(tái)，2，關(guān)閉當(dāng)前頁面，3刷新父頁面的table$.post("UpdateServlet",data.field,function () {// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');// 通過父頁面關(guān)閉當(dāng)前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引parent.layer.close(index);});// 通過父頁面關(guān)閉當(dāng)前頁面var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引parent.layer.close(index);// 提交后刷新父頁面的表格，demo為父表格的idparent.layui.table.reload('demo');return true ;// 返回true表示提交數(shù)據(jù)，返回false表示不提交});});</script> </form> </body> </html>

修改操作要提交到后臺(tái)完成

@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);} }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：软件架构模式之事件驱动架构
下一篇： python全局键盘监听(pynput快