Einführung in Layui
Layui ist ein UI -Framework für Hintergrundprogrammierer mit geringen Lernkosten. Front und Backend der JSON-Datenformat-Interaktion ist auch für einseitige Entwicklung geeignet. Interessierte Freunde können sich die offizielle Website von Layui ansehen.
Layui Front- und Backend -Dateninteraktion
Layui hat einen eigenen Satz spezifischer Datenformatinteraktionen (dies ist sehr wichtig) und muss Parametercode: 0, MSG: "", Graf: Datengröße (int), Daten: "Datenliste". Im Allgemeinen entscheiden wir uns dafür, die Empfangsklasse zu verkapulieren und zurückzugeben.
Layui Rezeption JS Anfordern Sie Daten
Unter ihnen HTML -Code
<link rel = "styleSheet" href = "static/layui/css/layui.css" rel = "external nofollow" media = "all"/> <script type = "text/javaScript" src = "static/layui/layui.js"> </script> <table id = "test" test "test" table "table" table "
JS -Code
layui.use (['Form', 'Layer', 'Tabelle'], function () {var table = layui.table, Form = layui.form, $ = layui. ,{field:'name', title:'men name'} ,{field:'parentName', title:'parent menu name',width:150} ,{field:'url', title:'menu path'} ,{field:'perms', title: 'menu permission'} ,{field:'type', title:'type'} ,{field:'icon', title:'icon'} , {field: 'ordernum', title: 'sorting'}, {fix: 'right', title: 'operation', width: 180, ausgerichtet: 'center', toolbar: '#toolbar'} // Details, bitte überprüfen Sie die layui offizielle Website], Seite: TRUE // Open Paging: 10 // // Data -Data Eins -Data -Ein- und DATEN -SAGE, DATA DATA EINE PAGE,: [10,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20.0/. 'testReload'});});Java -Hintergrundcode
@RequestMapping ("/list") @ResponseBody @RequireSpermissions ("SYS: Menü: List") public Layui -Liste (@RequestParam map <String, Objekt> Params) {// Query List Data Query Query = New Query (Params); Liste <sysMenuentity> Menulist = sysmenuService.QueryList (Abfrage); int Total = sysmenuService.QueryTotal (Abfrage); Pageutils pageutil = new pageutils (Menulist, Total, query.getLimit (), query.getPage ()); return layui.data (pageutil.gettotalcount (), pageutil.getList ()); }Layui Tool Code
öffentliche Klasse Layui erweitert HashMap <String, Objekt> {öffentliche statische Layui -Daten (Ganzzahlanzahl, Liste <?> Daten) {Layui r = new layui (); R.put ("Code", 0); R.put ("msg", ""); R.put ("count", count); R.put ("Daten", Daten); return r; }}PageUtils ist hier optional, Sie können es selbst zusammenschließen
@Datapublic Class PageUtils implementiert serialisierbar {private statische endgültige lange Serialversionuid = -1202716581589799959L; // Total Records Private Int TotalCount; // Anzahl der Datensätze pro Seite private int pageSize; // Gesamtseiten Private int TotalPage; // Anzahl der aktuellen Seite private int CurrPage; // Listendaten private Liste <?> Liste; / *** Seite* @Param List List -Daten* @param TotalCount Total Records* @param pageSize Anzahl der Datensätze pro Seite* @param currpage Aktuelle Seite*/ public pageutils (Liste <?> Liste, int TotalCount, int pageSize, int currpage) {this.list = liste; this.totalcount = TotalCount; this.PageSize = pageSize; this.currpage = currPage; this.totalpage = (int) math.ceil ((doppelt) totalCount/pageSize); }}Kurz gesagt, das Datenformat, das Layui am Ende empfängt, sollte sein.
Das obige Beispiel für Layuis Front- und Backstage -Interaktionsdatenerfassung Java ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.