學習Layui 第一天

来源:https://www.cnblogs.com/LesLie-yimei/archive/2018/05/12/9030327.html
-Advertisement-
Play Games

Layui 官網說這是款經典模塊化前端框架 個人覺得Layui很好用，容易上手。 在學習Layui的之前。先去官網下載必要的文件 將這些文件放入項目當中 然後可以到官網看一下示例。 可以做一個簡單的表格 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char ...


Layui 官網說這是款經典模塊化前端框架

個人覺得Layui很好用，容易上手。

在學習Layui的之前。先去官網下載必要的文件

將這些文件放入項目當中

 

 然後可以到官網看一下示例。

 

可以做一個簡單的表格

前端代碼如下： 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6   <title>layout 後臺大佈局 - Layui</title>
 7   <link rel="stylesheet" href="layui/css/layui.css">
 8   <script type="text/javascript" src="layui/layui.js"></script>
 9 </head>
10 <body>
11 <table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table> 
12 <script type="text/html" id="barDemo">
13   <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
14   <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
15   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
16 </script>          
17 <script>
18 layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
19       var laydate = layui.laydate //日期
20       ,laypage = layui.laypage //分頁
21       layer = layui.layer //彈層
22       ,table = layui.table //表格
23       ,carousel = layui.carousel //輪播
24       ,upload = layui.upload //上傳
25       ,element = layui.element; //元素操作
26              
27   table.render({
28     elem: '#LAY_table_user'
29     ,url:'http://localhost:8080/Limit/UVServlet'
30     ,height: 332
31     ,page: true //開啟分頁
32     ,cols: [[
33         {type:'checkbox'}
34       ,{field:'id', width:80, title: 'ID', sort: true}
35       ,{field:'username', width:80, title: '用戶名'}
36       ,{field:'sex', title: '性別', sort: true}
37       ,{field:'city', title: '城市'}
38       ,{field:'sign', title: '簽名',  minWidth: 100}
39       ,{field:'experience', title: '積分', sort: true}
40       ,{field:'score', title: '評分', sort: true}
41       ,{field:'classify', title: '職業'}
42       ,{field:'wealth', title: '財富', sort: true}
43       ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
44     ]]
45   });
46       
47 });
48 </script>
49 <script type="text/javascript" src="layui/jquery1.8.3.min.js"></script>
50 </body>
51 </html>
View Code

然後我們可以將表格內的數據為動態的，可以簡單寫一個Servlet

部分代碼如下：

 1 @WebServlet(name="UVServlet",urlPatterns="/UVServlet")
 2 public class UVServlet extends HttpServlet{
 3      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 4             doGet(request, response);
 5         }
 6      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 7              String a = "{\"code\":0,\"msg\":\"成功\",\"count\":1000,\"data\":[{\"id\":10000,\"username\":\"user-0\",\"sex\":\"女\",\"city\":\"城市-0\",\"sign\":\"簽名-0\",\"experience\":255,\"logins\":24,\"wealth\":82830700,\"classify\":\"作家\",\"score\":57},{\"id\":10001,\"username\":\"user-1\",\"sex\":\"男\",\"city\":\"城市-1\",\"sign\":\"簽名-1\",\"experience\":884,\"logins\":58,\"wealth\":64928690,\"classify\":\"詞人\",\"score\":27},{\"id\":10002,\"username\":\"user-2\",\"sex\":\"女\",\"city\":\"城市-2\",\"sign\":\"簽名-2\",\"experience\":650,\"logins\":77,\"wealth\":6298078,\"classify\":\"醬油\",\"score\":31},{\"id\":10003,\"username\":\"user-3\",\"sex\":\"女\",\"city\":\"城市-3\",\"sign\":\"簽名-3\",\"experience\":362,\"logins\":157,\"wealth\":37117017,\"classify\":\"詩人\",\"score\":68},{\"id\":10004,\"username\":\"user-4\",\"sex\":\"男\",\"city\":\"城市-4\",\"sign\":\"簽名-4\",\"experience\":807,\"logins\":51,\"wealth\":76263262,\"classify\":\"作家\",\"score\":6},{\"id\":10005,\"username\":\"user-5\",\"sex\":\"女\",\"city\":\"城市-5\",\"sign\":\"簽名-5\",\"experience\":173,\"logins\":68,\"wealth\":60344147,\"classify\":\"作家\",\"score\":87},{\"id\":10006,\"username\":\"user-6\",\"sex\":\"女\",\"city\":\"城市-6\",\"sign\":\"簽名-6\",\"experience\":982,\"logins\":37,\"wealth\":57768166,\"classify\":\"作家\",\"score\":34},{\"id\":10007,\"username\":\"user-7\",\"sex\":\"男\",\"city\":\"城市-7\",\"sign\":\"簽名-7\",\"experience\":727,\"logins\":150,\"wealth\":82030578,\"classify\":\"作家\",\"score\":28},{\"id\":10008,\"username\":\"user-8\",\"sex\":\"男\",\"city\":\"城市-8\",\"sign\":\"簽名-8\",\"experience\":951,\"logins\":133,\"wealth\":16503371,\"classify\":\"詞人\",\"score\":14},{\"id\":10009,\"username\":\"user-9\",\"sex\":\"女\",\"city\":\"城市-9\",\"sign\":\"簽名-9\",\"experience\":484,\"logins\":25,\"wealth\":86801934,\"classify\":\"詞人\",\"score\":75},{\"id\":10010,\"username\":\"user-10\",\"sex\":\"女\",\"city\":\"城市-10\",\"sign\":\"簽名-10\",\"experience\":1016,\"logins\":182,\"wealth\":71294671,\"classify\":\"詩人\",\"score\":34},{\"id\":10011,\"username\":\"user-11\",\"sex\":\"女\",\"city\":\"城市-11\",\"sign\":\"簽名-11\",\"experience\":492,\"logins\":107,\"wealth\":8062783,\"classify\":\"詩人\",\"score\":6},{\"id\":10012,\"username\":\"user-12\",\"sex\":\"女\",\"city\":\"城市-12\",\"sign\":\"簽名-12\",\"experience\":106,\"logins\":176,\"wealth\":42622704,\"classify\":\"詞人\",\"score\":54},{\"id\":10013,\"username\":\"user-13\",\"sex\":\"男\",\"city\":\"城市-13\",\"sign\":\"簽名-13\",\"experience\":1047,\"logins\":94,\"wealth\":59508583,\"classify\":\"詩人\",\"score\":63},{\"id\":10014,\"username\":\"user-14\",\"sex\":\"男\",\"city\":\"城市-14\",\"sign\":\"簽名-14\",\"experience\":873,\"logins\":116,\"wealth\":72549912,\"classify\":\"詞人\",\"score\":8},{\"id\":10015,\"username\":\"user-15\",\"sex\":\"女\",\"city\":\"城市-15\",\"sign\":\"簽名-15\",\"experience\":1068,\"logins\":27,\"wealth\":52737025,\"classify\":\"作家\",\"score\":28},{\"id\":10016,\"username\":\"user-16\",\"sex\":\"女\",\"city\":\"城市-16\",\"sign\":\"簽名-16\",\"experience\":862,\"logins\":168,\"wealth\":37069775,\"classify\":\"醬油\",\"score\":86},{\"id\":10017,\"username\":\"user-17\",\"sex\":\"女\",\"city\":\"城市-17\",\"sign\":\"簽名-17\",\"experience\":1060,\"logins\":187,\"wealth\":66099525,\"classify\":\"作家\",\"score\":69},{\"id\":10018,\"username\":\"user-18\",\"sex\":\"女\",\"city\":\"城市-18\",\"sign\":\"簽名-18\",\"experience\":866,\"logins\":88,\"wealth\":81722326,\"classify\":\"詞人\",\"score\":74},{\"id\":10019,\"username\":\"user-19\",\"sex\":\"女\",\"city\":\"城市-19\",\"sign\":\"簽名-19\",\"experience\":682,\"logins\":106,\"wealth\":68647362,\"classify\":\"詞人\",\"score\":51},{\"id\":10020,\"username\":\"user-20\",\"sex\":\"男\",\"city\":\"城市-20\",\"sign\":\"簽名-20\",\"experience\":770,\"logins\":24,\"wealth\":92420248,\"classify\":\"詩人\",\"score\":87},{\"id\":10021,\"username\":\"user-21\",\"sex\":\"男\",\"city\":\"城市-21\",\"sign\":\"簽名-21\",\"experience\":184,\"logins\":131,\"wealth\":71566045,\"classify\":\"詞人\",\"score\":99},{\"id\":10022,\"username\":\"user-22\",\"sex\":\"男\",\"city\":\"城市-22\",\"sign\":\"簽名-22\",\"experience\":739,\"logins\":152,\"wealth\":60907929,\"classify\":\"作家\",\"score\":18},{\"id\":10023,\"username\":\"user-23\",\"sex\":\"女\",\"city\":\"城市-23\",\"sign\":\"簽名-23\",\"experience\":127,\"logins\":82,\"wealth\":14765943,\"classify\":\"作家\",\"score\":30},{\"id\":10024,\"username\":\"user-24\",\"sex\":\"女\",\"city\":\"城市-24\",\"sign\":\"簽名-24\",\"experience\":212,\"logins\":133,\"wealth\":59011052,\"classify\":\"詞人\",\"score\":76},{\"id\":10025,\"username\":\"user-25\",\"sex\":\"女\",\"city\":\"城市-25\",\"sign\":\"簽名-25\",\"experience\":938,\"logins\":182,\"wealth\":91183097,\"classify\":\"作家\",\"score\":69},{\"id\":10026,\"username\":\"user-26\",\"sex\":\"男\",\"city\":\"城市-26\",\"sign\":\"簽名-26\",\"experience\":978,\"logins\":7,\"wealth\":48008413,\"classify\":\"作家\",\"score\":65},{\"id\":10027,\"username\":\"user-27\",\"sex\":\"女\",\"city\":\"城市-27\",\"sign\":\"簽名-27\",\"experience\":371,\"logins\":44,\"wealth\":64419691,\"classify\":\"詩人\",\"score\":60},{\"id\":10028,\"username\":\"user-28\",\"sex\":\"女\",\"city\":\"城市-28\",\"sign\":\"簽名-28\",\"experience\":977,\"logins\":21,\"wealth\":75935022,\"classify\":\"作家\",\"score\":37},{\"id\":10029,\"username\":\"user-29\",\"sex\":\"男\",\"city\":\"城市-29\",\"sign\":\"簽名-29\",\"experience\":647,\"logins\":107,\"wealth\":97450636,\"classify\":\"醬油\",\"score\":27}]}"; 
 8             JSONObject jsobeject =JSONObject.fromObject(a);
 9              PrintWriter write = response.getWriter();
10              write.write(jsobeject.toString());
11              write.flush();
12              write.close();
13              System.out.println(jsobeject.toString());
14      }
View Code

啟動tomcat。會見到如下界面

Layui簡單的表格就出現了。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 通過一個輪播圖插件來瞭解構造函數
    例子：https://github.com/wayaha/rotateChart 在ES5中，構造函數的使用可以說是很能體現面向對象的編程思想，有學過c的同學，可以很明顯體會到面向過程和麵向對象的區別，不多瞎扯，這次通過一個輪播圖的插件來理解一下構造函數； 1、關於對象的創建方式 常見的創建對象方式 ...
  • 負載均衡
    負載均衡 負載均衡是部署有相同應用的伺服器組成的一個集群，每次用戶請求都可以發送到集群中任意一臺伺服器上去處理，任何一臺伺服器處理結果都是相同的。 負載均衡伺服器是一個HTTP請求分發裝置，能感知或配置集群的伺服器數量，及時發現集群中上線、下線的伺服器，並將請求分發到上線的伺服器。 實現負載均衡有5 ...
  • 談談三種工廠模式
    談談三種工廠模式 遠在上個世紀，電腦技術的大牛們就總結出了23種設計及模式，這些設計模式解決了我們程式在模擬現實世界事物以及邏輯時，會出現的一些問題，以及對一些常見的系統設計中常見的問題提出一些解決方案。 工廠模式是一種常見的實例化對象的一種方式，告別了new的方法，更符合現實世界的邏輯，因為現實 ...
  • 微服務—熔斷器Hystrix
    前言在微服務架構中，我們將系統拆分成了一個個的服務單元，各單元應用間通過服務註冊與發現的方式互相依賴。 由於每個單元都在不同的進程中運行，依賴通過遠程調用的方式執行，這樣就有可能因為網路原因或是依賴服務自身問題出現調用故障或延遲， 而這些問題會直接導致調用方的對外服務也出現延遲，若此時調用方的請求不 ...
  • linux常用命令彙總
    1. 快速啟動終端:ctr+alt+t2. 終端字體放大: ctr+shift+'+'3. 終端字體縮小: ctr+'-'4. ls: 查看當前目錄下文件信息 4.1 ls BD ABC 同時查看兩個目錄5. pwd: 查看目錄的路徑6. touch: 創建文件 6.1 touch 1.txt 2. ...
  • Java生成二維碼
    前言： 這周有個項目需要生成二維碼，研究了一下使用Google的zxing生成二維碼，發現效果還可以，在這裡記錄下。如果需要更加定製化的二維碼，也可接通第三方API服務生成二維碼。 二維碼的生成 : ...
  • Windows編譯Opencv
    下載安裝CMake 下載Opencv源碼 打開CMake，設置源碼路徑和生成路徑，點擊Configure選擇要生成的版本。 勾選BUILD_opencv_world的話，表示只生成一個庫文件(集合起來)。點擊Generate開始生成工程項目。 點擊Open Project，打開工程。生成INSTAL ...
  • 使用pypi-server搭建簡單的PyPI源
    _pypiserver_ 是一個最基本的PyPI伺服器實現, 可以用來上傳和維護python包. 本文介紹 _pypiserver_ 在ubuntu上的基本安裝, 配置和使用. 1. 基本安裝和使用 1.1 安裝和啟動 _pypiserver_ 可以在Python 2或者Python 3下運行. 使 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類