LayUI之CRUD
生活随笔
收集整理的這篇文章主要介紹了
LayUI之CRUD
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一、layui數據表格相關組件官網介紹
二、用戶管理后臺
三、用戶新增
四、用戶編輯
一、layui數據表格相關組件官網介紹
整體頁面
?①先根據路徑創建相關的界面，如下
?②在官網上找到數據表格的代碼塊，再放到項目中
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="/common/header.jsp" %> <!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>Insert title here</title> </head> <body> <table class="layui-hide" id="test" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數據</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">獲取選中數目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">驗證是否全選</button></div> </script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script><script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接復制所有代碼到本地，上述 JS 路徑需要改成你本地的 --> <script> layui.use('table', function(){var table = layui.table;table.render({elem: '#test',url:'../../test/table/demo1.json.js'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/,toolbar: '#toolbarDemo' //開啟頭部工具欄，并為其綁定左側模板,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側圖標。如無需自定義，去除該參數即可title: '提示',layEvent: 'LAYTABLE_TIPS',icon: 'layui-icon-tips'}],title: '用戶數據表',cols: [[{type: 'checkbox', fixed: 'left'},{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},{field:'username', title:'用戶名', width:120, edit: 'text'},{field:'email', title:'郵箱', width:150, edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}},{field:'sex', title:'性別', width:80, edit: 'text', sort: true},{field:'city', title:'城市', width:100},{field:'sign', title:'簽名'},{field:'experience', title:'積分', width:80, sort: true},{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次數', width:100, sort: true},{field:'joinTime', title:'加入時間', width:120},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}]],page: true});//頭工具欄事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('選中了：'+ data.length + ' 個');break;case 'isAll':layer.msg(checkStatus.isAll ? '全選': '未全選');break;//自定義頭工具欄右側圖標 - 提示case 'LAYTABLE_TIPS':layer.alert('這是工具欄右側自定義的一個圖標按鈕');break;};});//監聽行工具事件table.on('tool(test)', function(obj){var data = obj.data;//console.log(obj)if(obj.event === 'del'){layer.confirm('真的刪除行么', function(index){obj.del();layer.close(index);});} else if(obj.event === 'edit'){layer.prompt({formType: 2,value: data.email}, function(value, index){obj.update({email: value});layer.close(index);});}}); }); </script> </body> </html>初步效果：
?③再從官網表單中找到輸入框，并復制粘貼
<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">驗證手機</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">驗證郵箱</label><div class="layui-input-inline"><input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"></div></div></div>初步效果
?④將驗證郵箱那一塊改為按鈕
<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">驗證手機</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><div class="layui-input-inline"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button></div></div></div>初步效果
⑤將官方中彈出層的代碼塊復制到項目中即可，暫時不需要用到
layer.open({type: 1,content: str //注意，如果str是object，那么需要字符拼接。})二、用戶管理后臺
User實體類：
package com.zking.entity;public class User {private Long id;private String name;private String loginName;private String pwd;private Long rid;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public Long getRid() {return rid;}public void setRid(Long rid) {this.rid = rid;}public User() {super();// TODO Auto-generated constructor stub}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}}①、完成UserDao
package com.zking.dao;import java.sql.SQLException; import java.util.List; import java.util.Map;import com.zking.entity.User; import com.zking.util.BaseDao; import com.zking.util.PageBean; import com.zking.util.StringUtils;public class UserDao extends BaseDao<User> {public User login(User user) throws Exception {String sql="select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'"; // 根據sql查詢符合條件的用戶，通常只會返回一條數據List<User> users = super.executeQuery(sql, User.class, null);return users==null||users.size()==0?null:users.get(0);// return super.executeQuery(sql, clz, pageBean);} // 查詢用戶信息及對應的角色，角色是通過case when得來的public List<Map<String, Object>> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sql="select *,\r\n" + "(CASE rid \r\n" + "WHEN 1 THEN '管理員' \r\n" + "WHEN 2 THEN '發起者' \r\n" + "WHEN 3 THEN '審批者' \r\n" + "WHEN 4 THEN '參與者' \r\n" + "WHEN 5 THEN '會議室管理員' \r\n" + "ELSE '其他' END \r\n" + ") roleName \r\n" + "from t_oa_user where 1 = 1";String name = user.getName();if(StringUtils.isNotBlank(name)) {sql+=" and name like '%"+name+"%'";} // 當實體類的屬性完全包含數據庫查詢出來的列段的時候使用 // super.executeQuery(sql, User.class, pageBean) // 返回List<Map<String, Object>>，對應的是連表查詢，單個實體類對象不完全包含查詢的列段return super.executeQuery(sql, pageBean);} // 增public int add(User user) throws Exception {String sql="insert into t_oa_user(name,loginName,pwd) values(?,?,?)";return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});} // 刪public int del(User user) throws Exception {String sql="delete from t_oa_user where id=?";return super.executeUpdate(sql, user, new String[] {"id"});} // 改public int edit(User user) throws Exception {String sql = "update t_oa_user set name=?, loginName=?, pwd=? where id=?";return super.executeUpdate(sql, user, new String [] {"name","loginName","pwd","id"});} }再用juin進行測試---->UserDaoTest
package com.zking.dao;import static org.junit.Assert.*;import java.sql.SQLException; import java.util.List; import java.util.Map;import org.junit.After; import org.junit.Before; import org.junit.Test;import com.zking.entity.User; import com.zking.util.PageBean;public class UserDaoTest {private UserDao userDao=new UserDao();@Beforepublic void setUp() throws Exception {}@Afterpublic void tearDown() throws Exception {}@Testpublic void testList() {User user=new User();PageBean pageBean=new PageBean();try {List<Map<String, Object>> list = userDao.list(user, pageBean);for (Map<String, Object> map : list) {System.out.println(map);}} catch (Exception e) {e.printStackTrace();}}@Testpublic void testAdd() {User user=new User();user.setName("云鶴衫");user.setLoginName("yhs");user.setPwd("1234");try {userDao.add(user);} catch (Exception e) {e.printStackTrace();}}@Testpublic void testDel() {User user=new User();user.setId(17L);try {userDao.del(user);} catch (Exception e) {e.printStackTrace();}}@Testpublic void testEdit() {User user=new User();user.setName("云鶴衫");user.setLoginName("yhs2");user.setPwd("1234567");user.setId(17L);try {userDao.edit(user);} catch (Exception e) {e.printStackTrace();}}}?list方法結果：
add方法結果：
?
???edit方法結果：
del方法結果：
將UserAction完善
package com.zking.web;import java.util.HashMap; import java.util.List; import java.util.Map;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.zking.dao.UserDao; import com.zking.entity.User; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.PageBean; import com.zking.util.R; import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriver<User>{private User user=new User();private UserDao userDao=new UserDao();//寫一個方法除了前臺的請求 /* public String login(HttpServletRequest req, HttpServletResponse resp) {Map<String, Object> map = new HashMap<String, Object>();if("zhangsan".equals(user.getUsername()) && "123456".equals(user.getPassword())) {map.put("code", 200);map.put("msg", "登錄成功");}else {map.put("code", 0);map.put("msg", "用戶名或密碼錯誤");}try {ResponseUtil.writeJson(resp, map);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}try {ResponseUtil.writeJson(resp, map);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}*/public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u=userDao.login(user); // 通過賬戶名密碼查到了用戶記錄if(u!=null) { // ResponseUtil.writeJson(resp, new R() // .data("code", 200) // .data("msg", "成功"));ResponseUtil.writeJson(resp, R.ok(200, "登錄成功"));req.getSession().setAttribute("user", u);}else {ResponseUtil.writeJson(resp, R.ok(0, "用戶名密碼錯誤"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用戶名密碼錯誤"));} catch (Exception e2) {e2.printStackTrace();}}return null;}//用戶查詢public String list(HttpServletRequest req, HttpServletResponse resp) {try {PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Map<String, Object>> users = userDao.list(user, pageBean);//注意：layui中的數據表格的格式ResponseUtil.writeJson(resp, R.ok(0 ,"用戶數據查詢成功",pageBean.getTotal(),user));} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據查詢失敗"));} catch (Exception e2) {e2.printStackTrace();}}return null;}//增加public String add(HttpServletRequest req, HttpServletResponse resp) {try {//rs是sql語句執行的影響行數int rs=userDao.add(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(200, "用戶數據新增成功"));}else {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據新增失敗"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據新增失敗"));} catch (Exception e2) {e2.printStackTrace();}}return null;}//刪除public String del(HttpServletRequest req, HttpServletResponse resp) {try {//rs是sql語句執行的影響行數int rs=userDao.add(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(200, "用戶數據刪除成功"));}else {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據刪除失敗"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據刪除失敗"));} catch (Exception e2) {e2.printStackTrace();}}return null;}//修改public String edit(HttpServletRequest req, HttpServletResponse resp) {try {//rs是sql語句執行的影響行數int rs=userDao.add(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(200, "用戶數據修改成功"));}else {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據修改失敗"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用戶數據修改失敗"));} catch (Exception e2) {e2.printStackTrace();}}return null;}@Overridepublic User getModel() {return user;}}R類：
package com.zking.util;import java.util.HashMap;public class R extends HashMap{public R data(String key, Object value) {this.put(key, value);return this;}public static R ok(int code, String msg) {R r = new R();r.data("success", true).data("code", code).data("msg", msg);return r;}public static R error(int code, String msg) {R r = new R();r.data("success", false).data("code", code).data("msg", msg);return r;}public static R ok(int code, String msg,Object data) {R r = new R();r.data("success", true).data("code", code).data("msg", msg).data("data", data);return r;}public static R ok(int code, String msg, long count, Object data) {R r = new R();r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);return r;} }三、用戶新增
主界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@include file="/common/header.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="static/js/system/userManage.js"></script> <title>用戶管理</title> </head> <body><!-- 搜索欄 --><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用戶名：</label><div class="layui-input-inline"><input type="text" id="name" placeholder="請輸入用戶名" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><div class="layui-input-inline"><button id="btn_search" type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-search"></i>查詢</button><button id="btn_add" type="button" class="layui-btn">新增</button></div></div></div><!-- 數據表格及分頁 --><table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;"></table><!-- 對話框（新增和編輯共用一個頁面） --><script type="text/html" id="toolbar"><button class="layui-btn layui-btn-sm" lay-event="edit">編輯</button><button class="layui-btn layui-btn-sm" lay-event="del">刪除</button><button class="layui-btn layui-btn-sm" lay-event="reset">重置密碼</button></script> </body> </html>?userManage.js
let layer,$,table; var row; layui.use(['jquery', 'layer', 'table'], function(){layer = layui.layer,$ = layui.jquery,table = layui.table;//初始化數據表格initTable();//綁定查詢按鈕的點擊事件$('#btn_search').click(function(){query();});//綁定新增按鈕的點擊事件$('#btn_add').click(function(){row=null;open('新增');}); });//1.初始化數據表格 function initTable(){table.render({ //執行渲染elem: '#tb', //指定原始表格元素選擇器（推薦id選擇器） // url: 'user.action?methodName=list', //請求地址height: 340, //自定義高度loading: false, //是否顯示加載條（默認 true）cols: [[ //設置表頭{field: 'id', title: '用戶編號', width: 120},{field: 'name', title: '用戶名', width: 120},{field: 'loginName', title: '登錄賬號', width: 140},{field: '', title: '操作', width: 220,toolbar:'#toolbar'},]]});} //2.點擊查詢 function query(){ // console.log($("#ctx").val());table.reload('tb', {url: $("#ctx").val()+'/user.action', //請求地址method: 'POST', //請求方式，GET或者POSTloading: true, //是否顯示加載條（默認 true）page: true, //是否分頁where: { //設定異步數據接口的額外參數，任意設'methodName':'list','name':$('#name').val()}, request: { //自定義分頁請求參數名pageName: 'page', //頁碼的參數名稱，默認：pagelimitName: 'rows' //每頁數據量的參數名，默認：limit}}); } //3.對話框 function open(title){layer.open({type: 2, //layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）title:title,area: ['660px', '340px'], //寬高skin: 'layui-layer-rim', //樣式類名content: $("#ctx").val()+'/jsp/system/userEdit.jsp', //書本編輯頁面btn:['保存','關閉','批量新增','22'],yes: function(index, layero){//調用子頁面中提供的getData方法，快速獲取子頁面的form表單數據 // jquery findlet data= $(layero).find("iframe")[0].contentWindow.getData();console.log(data);//判斷title標題let methodName="add";if(title=="編輯")methodName="edit";$.post($("#ctx").val()+'/user.action?methodName='+methodName,data,function(rs){if(rs.success){//關閉對話框layer.closeAll();//調用查詢方法刷新數據query();}else{layer.msg(rs.msg,function(){});}},'json');},btn2: function(index, layero){layer.closeAll();},btn3: function(index, layero){layer.msg("批量新增");return false;},btn4: function(index, layero){layer.msg("批量新增22");}});}?新增界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@include file="/common/header.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js"></script> <title>用戶新增</title> </head> <style> .layui-form-select dl{max-height:150px; } </style> <body> <div style="padding:10px;"><form class="layui-form layui-form-pane" lay-filter="user"><input type="hidden" name="id"/><div class="layui-form-item"><label class="layui-form-label">用戶名稱</label><div class="layui-input-block"><input type="text" id="name" name="name" autocomplete="off" placeholder="請輸入用戶名" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用戶角色</label><div class="layui-input-block"><select name="rid"><option value="">---請選擇---</option><option value="1">管理員</option><option value="2">發起者</option><option value="3">審批者</option><option value="4">參與者</option><option value="5">會議管理員</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">登錄賬號</label><div class="layui-input-block"><input type="text" name="loginName" lay-verify="required" 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="password" name="pwd" placeholder="請輸入密碼" autocomplete="off" class="layui-input"></div></div></form> </div> </body> </html>userEdit.js:
let layer,form,$; layui.use(['layer','form','jquery'],function(){layer=layui.layer,form=layui.form,$=layui.jquery;initData(); });function initData(){console.log(parent.row);if(null!=parent.row){//因為layui.each內部的邏輯問題導致的所以要先深拷貝一份然后再去val//parent.row：表格行對象 // table的數據在父頁面 userMange.jsp // 點擊編輯按鈕的時候，當前行賦值給予頁面userEdit.jspform.val('user',$.extend({}, parent.row||{}));$('#name').attr('readonly','readonly');} }function getData(){ // 取user from中的值return form.val('user'); }效果：
?
四、用戶編輯
更改一下即可
let layer,$,table; var row; layui.use(['jquery', 'layer', 'table'], function(){layer = layui.layer,$ = layui.jquery,table = layui.table;//初始化數據表格initTable();//綁定查詢按鈕的點擊事件$('#btn_search').click(function(){query();});//綁定新增按鈕的點擊事件$('#btn_add').click(function(){row=null;open('新增');}); });//1.初始化數據表格 function initTable(){table.render({ //執行渲染elem: '#tb', //指定原始表格元素選擇器（推薦id選擇器） // url: 'user.action?methodName=list', //請求地址height: 340, //自定義高度loading: false, //是否顯示加載條（默認 true）cols: [[ //設置表頭{field: 'id', title: '用戶編號', width: 120},{field: 'name', title: '用戶名', width: 120},{field: 'loginName', title: '登錄賬號', width: 140},{field: '', title: '操作', width: 220,toolbar:'#toolbar'},]]});//在頁面中的<table>中必須配置lay-filter="tb_goods"屬性才能觸發屬性!!!table.on('tool(tb)', function (obj) {row = obj.data;if (obj.event == "edit") {open("編輯");}else if(obj.event == "del"){layer.confirm('確認刪除嗎?', {icon: 3, title:'提示'}, function(index){$.post($("#ctx").val()+'/user.action',{'methodName':'del','id':row.id},function(rs){if(rs.success){//調用查詢方法刷新數據query();}else{layer.msg(rs.msg,function(){});}},'json');layer.close(index);});}else{}});} //2.點擊查詢 function query(){ // console.log($("#ctx").val());table.reload('tb', {url: $("#ctx").val()+'/user.action', //請求地址method: 'POST', //請求方式，GET或者POSTloading: true, //是否顯示加載條（默認 true）page: true, //是否分頁where: { //設定異步數據接口的額外參數，任意設'methodName':'list','name':$('#name').val()}, request: { //自定義分頁請求參數名pageName: 'page', //頁碼的參數名稱，默認：pagelimitName: 'rows' //每頁數據量的參數名，默認：limit}}); } //3.對話框 function open(title){layer.open({type: 2, //layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）title:title,area: ['660px', '340px'], //寬高skin: 'layui-layer-rim', //樣式類名content: $("#ctx").val()+'/jsp/system/userEdit.jsp', //書本編輯頁面btn:['保存','關閉','批量新增','22'],yes: function(index, layero){//調用子頁面中提供的getData方法，快速獲取子頁面的form表單數據 // jquery findlet data= $(layero).find("iframe")[0].contentWindow.getData();console.log(data);//判斷title標題let methodName="add";if(title=="編輯")methodName="edit";$.post($("#ctx").val()+'/user.action?methodName='+methodName,data,function(rs){if(rs.success){//關閉對話框layer.closeAll();//調用查詢方法刷新數據query();}else{layer.msg(rs.msg,function(){});}},'json');},btn2: function(index, layero){layer.closeAll();},btn3: function(index, layero){layer.msg("批量新增");return false;},btn4: function(index, layero){layer.msg("批量新增22");}});}修改效果：
?
刪除效果：
?
總結
以上是生活随笔為你收集整理的LayUI之CRUD的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度钱包 java_百度钱包安全控件
- 下一篇： 大学计算机实验vfp,Visual Fo