Pengantar Layui
Layui adalah kerangka kerja UI yang cocok untuk pemrogram latar belakang, dengan biaya belajar yang rendah. JSON Data Format Interaksi Depan dan Backend, dan juga cukup cocok untuk pengembangan halaman tunggal. Teman -teman yang tertarik dapat memeriksa situs web resmi Layui.
Layui depan dan backend data interaksi
LayUi memiliki set interaksi format data spesifik (ini sangat penting), dan harus Parameter kode: 0, msg: "", hitung: ukuran data (int), data: "daftar data". Secara umum, kami memilih untuk merangkum dan mengembalikan kelas menerima.
Layui Data Data Permintaan JS
Di antara mereka, kode HTML
<tautan rel = "stylesheet" href = "static/layui/css/layui.css" rel = "nofollow eksternal" media = "all"/> <script type = "text/javascript" src = "static/layui/layui.js"> </script> <table id = "test" test "test" layUi/layUi.js "> </script> <table id =" test "test"
Kode JS
layui.use (['bentuk', 'layer', 'table'], function () {var table = layUi.table, form = layui.form, $ = layui. $; tabel.render ({{elem: '{{{{{{{{{{{{' {{{{{{{{{{{{{{{{{{{'/{ , {field: 'name', judul: 'nama pria'}, {field: 'ParentName', judul: 'nama menu induk', lebar: 150}, {field: 'url', judul: 'Jalur menu'}, {field: '{field', judul: 'field', {field ', {field:' {field: '{field:' {field: '{' {'{field', '{field', '{' {field ',' {field ', {field: , {field: 'ordernum', judul: 'penyortiran'}, {fixed: 'right', judul: 'operasi', lebar: 180, align: 'center', toolbar: '#toolbar'} // untuk perincian, silakan periksa data resmi LayUI], halaman: true // buka panci, batas: 10 // Data Ten Layui], halaman: true // Open paging, Limit: 10 // DATA DATA DATASIONAL], Page: True // Open Paging, Limit: 10 // Data Ten Data A LayUI], halaman: true // Open pAGGING, LIMET: 10/DATA DATA DATA DATA (PAGE0, PAGE0: PAGE: BURA0, BURDE DATA: 10 'testreload'});});Kode Latar Belakang Java
@RequestMapping ("/list") @ResponseBody @RequiresPerMissions ("Sys: Menu: List") Public LayUi List (@RequestParam Map <String, Object> Params) {// Daftar Kueri Data Query = Query baru (params); Daftar <Sysmenuentity> Menulist = sysmenuservice.querylist (kueri); int total = sysmenuservice.querytotal (kueri); Pageutils pageutil = pageutils baru (menulist, total, query.getlimit (), query.getPage ()); return layui.data (pageutil.gettotalcount (), pageutil.getList ()); }Kode Alat Layui
LayUi kelas publik memperluas hashmap <string, objek> {public static layui data (jumlah integer, daftar <?> data) {layui r = new layui (); r.put ("kode", 0); r.put ("msg", ""); r.put ("count", count); r.put ("data", data); mengembalikan r; }}Pageutils opsional di sini, Anda dapat merangkumnya sendiri
@DataPublic Class PageUtils mengimplementasikan serializable {private static final long serialversionuid = -1202716581589799959l; // Total Records Private Int TotalCount; // Jumlah catatan per halaman private int pageSize; // Total halaman Totalpage int swasta; // Jumlah halaman saat ini intrpage int private; // Daftar data daftar pribadi <?> Daftar; / *** Halaman* @param Daftar Data Data* @param TotalCount Total Records* @param Halaman Jumlah catatan per halaman* @param Currpage Halaman saat ini*/ pageutils publik (daftar <?> Daftar, totalcount, int pageSize, int Currpage) {this.list = list; this.totalCount = TotalCount; this.pagesize = halaman; this.currpage = Currpage; this.totalPage = (int) math.ceil ((ganda) totalCount/pagesize); }}Singkatnya, format data yang diterima LayUi pada akhirnya seharusnya.
Contoh di atas dari Layui's Front dan Backstage Interaction Data Acquisition Java adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.