2. 程式人生 > 其它 >Layui-經典模組化前端框架

Layui-經典模組化前端框架

阿新 • • 發佈：2020-12-24

技術標籤：layui

Layui

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 入門
<%@ 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>
    <!-- 引入layui的樣式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 使用layUI的按鈕樣式-->
<button type="button" class="layui-btn">一個標準的按鈕</button>

<script src="layui/layui.js"></script>
<script>
	/* 使用layUI的彈出層模組  */
	layui.use(['layer'], function(){
	  var layer = layui.layer; 
	  /* 彈出hello world提示 */
	  layer.msg('Hello World');
	});
	
</script> 

</body>
</html>

2. 柵格佈局

​ 如你所願，在 layui 2.0 的版本中，我們加入了強勁的柵格系統和後臺佈局方案，這意味著你終於可以著手採用 layui 排版你的響應式網站和後臺系統了。layui 的柵格系統採用業界比較常見的 12 等分規則，內建移動裝置、平板、桌面中等和大型螢幕的多終端適配處理，最低能支援到ie8。而你應當更欣喜的是，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>
<!-- <div class="layui-fluid"> : 鋪滿   -->
<div class="layui-container">  
  常規佈局（以中型螢幕桌面為例）：
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-lg6 layui-bg-blue">
      你的內容 9/12
    </div>
    <div class="layui-col-md3 layui-col-lg6 layui-bg-red">
      你的內容 3/12
    </div>
  </div>
 </div>
</body>
</html>

  • 採用 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 字元)，即可顯示出你想要的圖示，譬如：

<i class="layui-icon layui-icon-face-smile" ></i>

或者

<i class="layui-icon">&#xe69c;</i>

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 主題
 <button type="button" class="layui-btn  layui-btn-primary">原始按鈕</button>
 <button type="button" class="layui-btn  ">預設按鈕</button>
 <button type="button" class="layui-btn  layui-btn-normal">百搭按鈕</button>
 <button type="button" class="layui-btn  layui-btn-warm">暖色按鈕</button>
 <button type="button" class="layui-btn  layui-btn-danger">警告按鈕</button>
 <button type="button" class="layui-btn  layui-btn-disabled">禁用按鈕</button>
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 圓角
<button type="button" class="layui-btn  layui-btn-radius layui-btn-primary">原始按鈕</button>
 <button type="button" class="layui-btn  layui-btn-radius ">預設按鈕</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-normal">百搭按鈕</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-warm">暖色按鈕</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger">警告按鈕</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-disabled">禁用按鈕</button>
4.4 圖示按鈕
<button type="button" class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 新增
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#xe605;</i>
</button>
  • 圖示字型參考圖示列表。
4.5 按鈕組
<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">編輯</button>
  <button type="button" class="layui-btn">刪除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

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>
    <!-- 頭部區域（可配合layui已有的水平導航） -->
    <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">
          <!-- data-url 定義點選後要顯示的頁面 -->
            <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);
		}
	}
	
	
	@Override
	protected 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 ;
	}
	
	@Override
	protected 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>
    
<!-- 下面是圖片單元格要放入的內容，跟上面的templet對應 -->
<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//";

	@Override
	protected 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"> <!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
  <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或者false
  console.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為父表格的id
                    parent.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 {

    @Override
    protected 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);

    }

    @Override
    protected 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 {

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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

進入修改頁面時需要先到後臺獲取要修改的使用者資訊

@WebServlet("/UpdatePageServlet")
public class UpdatePageServlet extends HttpServlet {

    @Override
    protected 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);

    }

    @Override
    protected 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為父表格的id
                    parent.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為父表格的id
                parent.layui.table.reload('demo');
                return true ;// 返回true表示提交資料，返回false表示不提交
            });
        });
    </script>
</form>
</body>
</html>

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

@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {

    @Override
    protected 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;
            }
        }


    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

相關推薦

Layui-經典模組化前端框架

技術標籤：layui Layui 1. Layui簡介1.1 下載1.2 入門 2. 柵格佈局3. 圖示4. 按鈕4.1 主題4.2 尺寸4.3 圓角4.4 圖示按鈕4.5 按鈕組

.netcore MVC模組化開發框架搭建基礎

環境： 　　.net core 3.1 　　MSSSQL , MYSQL 　　MVC 　　EFCore 　　AutoFac 前言： 　　不同的框架主要解決開發中出現的不同的問題，本框架主要解決多個專案在開發過程中多個模組的重複使用造成冗餘和不便於管理

JS前端模組化原理與實現方法詳解

本文例項講述了JS前端模組化原理與實現方法。分享給大家供大家參考，具體如下：

js中的模組化開發（前端、後端）

js中的模組化開發 後端的模組化開發使用commenJs,使用路由形成入口檔案，每一個介面是一個檔案

前端模組化

前端模組化 函式封裝 函式一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函式的，所以把函式作為模組化的第一步是很自然的事情，在一個檔案裡面編寫幾個相關函式就是最開始的模組

6-前端模組化

一、為什麼需要模組化 1、JavaScript的原始功能在網頁開發的早期，js 製作作為一種指令碼語言，做一些簡單的表單驗證或動畫實現等，那個時候程式碼很少，直接將程式碼寫在 <script> 標籤中即可：<script>

前端工程化（ES6模組化和webpack打包）

目標： 　　能夠知道有哪些模組化的相關規範 　　能夠使用webpack 　　能夠使用Vue單檔案元件 　　能夠使用Vue腳手架 　　能夠使用Element-UI目錄： 　　模組化相關規範 　　webpack用法 　　Vue單檔案元件 　　Vue腳

前端模組化簡單總結

前言 　　在JavaScript初期就是為了實現簡單的頁面互動邏輯，如今CPU、瀏覽器效能得到了極大的提升，很多頁面邏輯遷移到了客戶端，前端程式碼日益膨脹，此時在js方面就會考慮怎麼樣來管理使用模組化規範去管理。無論

07 . 前端工程化(ES6模組化和webpack打包)

模組化規範 傳統開發模式主要問題 /* 1. 命名衝突 2. 檔案依賴 */ 通過模組化解決上述問題

前端模組化：CommonJS,AMD,CMD,ES6

模組化的開發方式可以提高程式碼複用率，方便進行程式碼的管理。通常一個檔案就是一個模組，有自己的作用域，只向外暴露特定的變數和函式。目前流行的js模組化規範有Commonjs、AMD、CMD以及ES6的模組系統

四. 前端模組化

1. 為什麼需要模組化 1.1 JavaScript原始功能 在網頁開發的早期js製作作為一種指令碼語言，做一些簡單的表單驗證或動畫實現等，那個時候程式碼還是很少的。那個時候的程式碼是怎麼寫的呢？直接將程式碼寫在 <scri

學習記錄——前端模組化相關規範

技術標籤：前端工程化前端整理前端前端模組化 1. ES6模組化（大一統的模組化規範）

突破桎梏（七）：前端模組化開發 - 開篇

技術標籤：大前端之突破桎梏前端javascriptjs前端大前端模組化 今天我們來介紹 【前端模組化開發】。

django框架學習2：url的使用 url模組化

技術標籤：django框架django 1.新建django專案： django-admin startproject first_project 2.新建藍圖：

前端模組化export || export default =＞ import暴露與接收資料

技術標籤：模組化js 1、export與export default均可用於匯出常量、函式、檔案、模組等 2、在一個檔案或模組中，export、import可以有多個，export default僅有一個 3、通過export方式匯出，在匯入時要加{ }，exp

前端模組化指南

前端模組化 ##script 老牌傳統的模組化 <scriptsrc=\'xxxxx.js\'></script> 主意 script的引入是阻塞的，為了解決阻塞的問題 引入了

關於前端框架Layui使用Ajax實現分頁模糊查詢的操作

技術標籤：AjaxLayuijavajavascriptjquery 這兩天為了實現分頁模糊查詢了很多種方法，最後彙總使用了兩個前端框架來寫，第一個是Bootstrap，第二個是Layui。 Bootstrap是一種較為粗暴的方法，而Layui則需要自己渲

前端框架之layUI

技術標籤：layui layUI 一、什麼是layUI？二、第三方支援三、引用檔案四、layUI基礎用法1、柵格佈局2、圖示3、按鈕4、表單5、選項卡

Express框架請求處理之構建模組化路由

構建模組化路由 Express框架提供了構建模組化路由的方式，可以根據某種條件將路由進行分類，將不同類別的路由放置在不同的模組中方便管理。 比如說一個部落格網站，這個網站有給使用者看的文章列表頁面，文章詳

Layui前端框架中的Button新增Click事件

技術標籤：javascriptvuejshtmljquery 　　引言 　　button點選事件有一個type屬性，預設type是submit，有時候使用預設會出現頁面自動重新整理問題。