-
2020-12-26 00:28:15
下面展示一些
内联代码片
。<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" /> <body> <div> <form class="layui-form" action=""> 姓名: <div class="layui-inline"> <input class="layui-input" id="stu_name" autocomplete="off"> </div> 性别: <div class="layui-inline"> <input class="layui-input" id="sex" autocomplete="off"> </div> <div class="layui-inline"> <label class="layui-form-label">班级</label> <div class="layui-input-inline"> <select class="clazz" id="class_id" name="class_id" lay-filter="aihao"> <option value="">请选择一个班级</option> <option value="1">J1801</option> <option value="2">J1802</option> <option value="3">J1803</option> <option value="4">J1804</option> <option value="5">J1805</option> </select> </div> </div> <button type="button" class="layui-btn" onclick="searchBtn()">检索</button> <button type="button" class="layui-btn" onclick="add()">添加</button> </form> </div> <!-- 添加 --> <form class="layui-form" action="" id=insert style="display: none;"> <div class="layui-form-item"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <input type="text" id="aname" name="title" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入姓名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄:</label> <div class="layui-input-block"> <input type="text" id="aage" name="title" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入年龄" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别:</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked=""> <input type="radio" name="sex" value="女" title="女"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" onclick="addSaveBtn()" >立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <!-- 添加结束 --> <!-- 修改 --> <div> <form class="layui-form" action="" lay-filter="fm" id="updateWin" style="display: none;"> <input type="hidden" name ="sid" id="usid"/><br/> <div class="layui-form-item"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <input type="text" id="usname" name="stu_name" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入姓名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄:</label> <div class="layui-input-block"> <input type="text" id="uage" name="age" lay-verify="title" autocomplete="off" style="width: 180px" placeholder="请输入年龄" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别:</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked=""> <input type="radio" name="sex" value="女" title="女"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" onclick="updateSaveBtn()" >立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <!-- 修改结束 --> <table id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <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> //预加载 $(function(){ searchBtn(); }) var tableObj; var updateIndex; function searchBtn(){ layui.use(['form','jquery','table'], function(){ var form = layui.form; var $ = layui.jquery; var table = layui.table; //第一个实例 tableObj=table.render({ elem: '#demo' ,url: 'stu/findAll.do' //数据接口 ,page: true //开启分页 ,where:{ stu_name:$("#stu_name").val(), sex:$("#sex").val(), class_id:$("#class_id").val() } ,cols: [[ //表头 {field: 'stu_id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'stu_name', title: '真实姓名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'mtel', title: '电话号', width:80} ,{field: 'qq', title: 'QQ', width: 177} ,{field: 'birthday', title: '生日', width: 80, sort: true} ,{field: '', title: '班级', width: 80,templet:function(d){return d.clazz.classname}} ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'} ]] }); //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'del'){ var sid = data.sid; if(confirm("确认删除吗")){ $.post("StudentdelServelt",{ sid:sid },function(res){ if(res=="true"){ layer.msg("删除成功"); tableObj.reload(); } }) } } else if(obj.event === 'edit'){ form.val("fm",data) updateIndex = layer.open({ type:1, content:$("#updateWin"), area:['300px','400px'] }) } }); }); } //点击添加弹出窗体 var insertadd function add() { insertadd=layer.open({ type: 1, content:$("#insert"), area:["300px","400px"] }); } /* 点击提交 */ function addSaveBtn() { var name=$("#aname").val(); var age=$("#aage").val(); var sex=$("input[name='sex']:checked").val(); /*二次确认 */ if (confirm("确认提交吗?")) { $.post("StudentAddServelt",{ name:name, age:age, sex:sex },function(res){ if (res=="true") { layer.msg("添加成功"); layer.close(insertadd); tableObj.reload(); } }) } } //点击修改保存按钮 function updateSaveBtn(){ var sid=$("#usid").val(); var name=$("#usname").val(); var sex=$("input[name='sex']:checked").val(); var age=$("#uage").val(); if(confirm("确认提交吗")){ $.post("StudentupdateServelt",{ name:name, sid:sid, age:age, sex:sex, },function(res){ if(res=="true"){ layer.msg("修改成功"); layer.close(updateIndex); tableObj.reload(); } }) } } </script> <script> layui.use(['form','jquery','table'], function(){ var form = layui.form; var $ = layui.jquery; var table = layui.table; //加载类别 $.post( "clazz/findAll.do", function(res){ for(var i=0;i<res.length;i++){ //console.log(res[i]) var str = "<option value='"+res[i].class_id+"'>"+res[i].classname+"</option>"; $(".clazz").append($(str)); form.render(); } },"json" ); }); </script> </body> </html>
更多相关内容 -
layui+JSP+Java+Tomcat+MySQL线上学习代码.zip
2020-06-18 11:47:25JSP课程设计:包含 1、 学生信息子系统 2、 课程内容管理子系统 3、 学生自测和成绩管理子系统 4、 学生问题及答复子系统 5、 操作维护子系统 6、日志子系统 带有数据库和界面,花了两周用心写的 -
Layui+Jsp+SSM+MybatisPlus+MySql.rar
2021-12-08 20:25:54Jsp + Layui版本2.6.8 Jquery 版本jquery-2.1.1.min.js 图标使用阿里图标库下载的(可自己更换) 后端: Spring、SpringMVC版本4.3.25.RELEASE Mybatis-Plus版本3.0.6 使用Maven代码生成器mybatis-generator 1.3.2... -
基于SSM开发的网上订餐系统(spring+spring mvc+mybatis+layui+jsp+jquery)1009
2022-04-07 18:17:30项目描述 基于SSM框架实现一个校园点餐系统,包括用户端和管理员端;... 管理员端主要功能有:用户管理、商品管理、订单管理、评论管理、资讯管理等 ...spring+spring mvc+mybatis+layui+jsp+jquery+bootstrap -
SSM框架JSP使用Layui实现layer弹出层效果
2020-10-15 20:53:26主要介绍了SSM框架JSP使用Layui实现layer弹出层效果,文章通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
Layui+Jsp+SpringBoot+MybatisPlus+MySql.rar
2021-12-08 20:04:31Jsp + Layui版本2.6.8 Jquery 版本jquery-2.1.1.min.js 图标使用阿里图标库下载的(可自己更换) 后端: SpringBoot 版本2.1.5.RELEASE Mybatis-Plus版本3.2.0 日志使用SpringBoot相关依赖log4j 1.3.8.RELEASE 开发... -
layui在jsp页面中显示
2019-12-06 15:02:53为啥我用的layui,在HTML中可以正常显示,我给加到jsp中就出不来样式呀,在同一个项目下,引入layui的路径也对 -
期末课程设计 图书管理系统 layui+jsp+MVC
2021-12-13 20:23:22javaEE期末课程设计 -
Java项目:问卷调查系统(java+SSM+layui+JSP+Mysql)
2022-06-24 14:13:15项目介绍 这是一个基于SpringMVC+Spring+MyBatis的SSM...2. 前端:JSP+css+javascript+jQuery+layui 使用说明 1. 使用Navicat或者其它工具,在mysql中创建对应名称的数据库,并导入项目的sql文件; 2.使用IDEA/Ecl -
大学本科JSP课程的期末作业JSP+Servlet+layui实现的博客系统源码.zip
2022-05-29 07:04:09下载使用tomcat就可以使用,数据库语句也有,如果要修改数据库配置就在tool下面的工具类修改即可大学本科JSP课程的期末作业JSP+Servlet+layui实现的博客系统源码。教程 下载使用tomcat就可以使用,数据库语句也有,... -
Java项目:在线游戏商城系统(java+Springboot+MyBatis+MySQL+Maven+layui+Jsp)
2022-03-20 08:38:36一、项目简述 功能包括: 用户管理,游戏商品管理,在线购买,上传,售卖记录,商品审核等等。...JSP +Spring + SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等 -
pringMVC+Spring+JPA+LayUI+JSP学生选课系统
2020-10-18 15:10:58SpringMVC+Spring+JPA+LayUI+JSP学生选课系统 本项目为计算机学生选课系统,可作为期末作品,供参考 项目技术: SpringMVC Spring SpringDataJPA LayUI JSP MySQL5.7 -
Java的Jsp中,使用Layui表格
2020-08-09 16:12:47在Jsp中,每次要用表格渲染的时候,如果用系统默认的表格就像下图一样比较丑,如果你要自己渲染的话,就比较麻烦。所以我写了Java 的用Layui渲染表格的方法。 要使用layui渲染表格的方法,要知道后台的传入参数和...在Jsp中,每次要用表格渲染的时候,如果用系统默认的表格就像下图一样比较丑,如果你要自己渲染的话,就比较麻烦。所以我写了Java 的用Layui渲染表格的方法。
要使用layui渲染表格的方法,要知道后台的传入参数和传出参数,layui官网说的很清楚,我就不过多赘述了,传入的是代表当前页码(page)和代表每页数据量(limit),传出的参数是总行数(count)、数据(data)、数据状态码----可以不设置(code)、状态信息码 —可以不设置(mag)
传入参数:
传出参数:
然后再准备工具包:Gson
Gson提供了fromJson() 和toJson() 两个直接用于解析和生成的方法,前者实现反序列化,后者实现了序列化;同时每个方法都提供了重载方法
然后上代码import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.util.Enumeration; import java.util.HashMap; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.google.gson.JsonArray; import com.google.gson.JsonObject; import com.gx.dao.IComdao; import com.gx.dao.impl.ComdaoImpl; import com.gx.utils.DbUtils; public JsonObject SelectSenior(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取传入参数 int page= Integer.parseInt(request.getParameter("page")); int limit=Integer.parseInt(request.getParameter("limit")); request.setCharacterEncoding("UTF-8"); response.setContentType("text/html ;charset=UTF-8"); // Enumeration enu = request.getParameterNames(); //检查传入参数 // while (enu.hasMoreElements()) { // String paraName = (String) enu.nextElement(); // System.out.println(paraName + ": " + request.getParameter(paraName)); // } JsonObject json = new JsonObject(); try { String strmysql = "select tbsenior.seniorID,tbsenior.`name`,tbsenior.gender,tbsenior.birthday,tbinhospital.checkInmark, " + " tbinhospital.dateofagreement,tbinhospital.endtime,tbsenior.idcardno,tbinhospital.inSite, " + " tbCaregrade.caregrade,tbYear.`year`,tbPocketbook.pocketbook" + " from b_inhospital tbinhospital join s_senior tbsenior on tbinhospital.seniorID = tbsenior.seniorID " + " join s_year tbYear on tbinhospital.YearID = tbYear.YearID " + " join S_Pocketbook tbPocketbook on tbinhospital.PocketbookID = tbPocketbook.PocketbookID " + " join S_Caregrade tbCaregrade on tbinhospital.CaregradeID =tbCaregrade.CaregradeID "; String strNum = request.getParameter("strNum"); String strCode = request.getParameter("strCode"); Object[] Obj = null; /// 筛选查询结果 if (!"".equals(strNum) && !"".equals(strCode)) { strmysql = strmysql + " WHERE tbsenior.`name` LIKE '%?%' && tbsenior.checkInmark LIKE '%?%' ORDER BY tbsenior.NationID; "; Obj = new Object[2]; //开辟一个长度为2的数组 System.out.println("Obj="+Obj.length); Obj[0]=strNum; Obj[1]=strCode; } else if (!"".equals(strNum) ) { strmysql = strmysql + " WHERE tbsenior.`name` LIKE ? ORDER BY tbsenior.NationID; "; Obj = new Object[1]; //开辟一个长度为1的数组 Obj[0]=strNum; }else if (!"".equals(strCode) ){ strmysql = strmysql + " WHERE tbsenior.checkInmark LIKE ? ORDER BY tbsenior.NationID; "; Obj = new Object[1]; //开辟一个长度为1的数组 Obj[1]=strCode; } else { strmysql = strmysql + "ORDER BY tbsenior.NationID; "; } IComdao comdao = new ComdaoImpl(); rs = comdao.find(strmysql, Obj); //mysql查询的结果 conn = comdao.getConn(); ps = comdao.getPs(); Gson gson = new Gson(); HashMap<String, String> hm = new HashMap<String, String>(); JsonArray jsonarray = new JsonArray(); json.addProperty("code", 0); json.addProperty("msg", ""); int len = 0; // 总条数 while (rs.next()) { len++; //分页,切割 if ((len > (page-1) * limit) && (len < (page) * limit)) { // 得到结果集(rs)的结构信息,比如字段数、字段名等。 ResultSetMetaData rsmd = (ResultSetMetaData) rs.getMetaData(); // 返回此 ResultSet对象中的列数。 int icolnum = rsmd.getColumnCount(); for (int i = 1; i <= icolnum; i++) { // 转换为json 类型 hm.put(rsmd.getColumnName(i).toString(), rs.getString(i)); } jsonarray.add(gson.toJsonTree(hm)); } } json.add("data", jsonarray); // json.addProperty("count", len); jsonarray.add(gson.toJsonTree(hm)); System.out.println(jsonarray); json.add("data", jsonarray); System.out.println(json); } catch (Exception e) { e.printStackTrace(); } finally { DbUtils.close(conn, ps, rs); } return json; }
最后看效果图:
-
IDEA 使用 LayUI JSP 引用
2020-03-10 16:33:57LayUI是什么? 经典模块化前端框架。简单理解就是更好看点的UI,优点是轻量化和模块化,用起来很方便。整体的美术风格比较优秀,同时免费。 下载链接:https://www.layui.com/ 预览链接:...LayUI是什么?
经典模块化前端框架。简单理解就是更好看点的UI,优点是轻量化和模块化,用起来很方便。整体的美术风格比较优秀,同时免费。
下载链接:https://www.layui.com/
预览链接:https://www.layui.com/demo/form.html如何为IDEA配置LayUI
LayUI官方手册:https://www.layui.com/doc/
反正我是看不懂的,还是亲自动手试一下- 下载layui:地址见上
- 解压layui:
关键是这个文件夹,解压到桌面,复制 - IDEA部署layui:
打开IDEA,在WEB文件夹,右键Paste
这里需要注意的是,似乎粘贴到别的地方似乎是不行的,必须在WEB文件夹下,可能与IDEA web项目的构造有关,站在外面的话jsp访问不到。 - JSP引用layui:
需要对JS和CSS文件进行引用
引用语句如下:
如果你的目录结构和我一样的话,可以直接复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> </head> <body> <script src="layui/layui.js"></script> </body> </html>
- 使用layui进行测试,是否导入成功
在Body标签加一行代码,调用layui的一个图形字符
-
IDEA中JavaWeb项目使用Layui框架,以及解决在JSP中使用和Layui乱码
2021-08-08 20:49:55Layui简介 layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处...Layui简介
layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
下载Layui
首先打开官网(Layui - 经典开源模块化前端 UI 框架),点击首页下载,下载后会得到一个压缩包,再将压缩包解压,之后复制到JavaWeb项目中的Web目录下
使用Layui
1、将解压出来的Layui中test.html的代码复制一份,粘贴到index.jsp中。
2、index.jsp中修改引入Layui语句为
<script src="layui-v2.6.8/layui/layui.js"></script> <link type="text/css" rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css"/>
3、启动Tomcat,会发现中文乱码,我们还需添加
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
之后看官方文档(Layui 开发使用文档 - 入门指南)即可编写。
-
layui选项卡效果实现代码
2020-08-30 12:18:55主要为大家详细介绍了layui弹出层效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Layui 在jsp页面中使用checkbox一些问题解决办法。
2021-05-14 14:05:25//加入在html前面加上<!DOCTYPE html>即可 <!DOCTYPE html> <html> -
基于SSM+MySQL+LayUI+Jsp的高校学生信息管理系统登录
2022-05-22 22:20:39用户登录 管理员 首页 查看学生 教师管理 班级管理 . 教室管理 课程管理 开课管理 ...前段框架: LayUI 后端框架: Spring+SpringMVC+Mybatis+SpringBoot 资料说明 基于SSM+ -
JavaWeb学生成绩管理系统(LayUI+JSON+JSP+MySQL)
2021-06-13 17:23:05超级管理员功能:|-,包括老师登录信 超级管理员可以对老师进行管理息生成、查看、更新老师初始化密码;|- 增加考试科目、修改考试科目信息;...;|- 对学生成绩进行维护、增加学生成绩、查看学生成绩;。。。。... -
JSP页面layui弹出层失效问题
2021-07-30 09:28:07首先layui的导入,必须jqery在前,layui.js在后,自己编写的js文件应该在最后,否则会导致弹出层失效的问题. 建议将自己编写的js文件myStyle.js放入整个页面的最下方,也就是body的上面,因为有时候自己写的js文件... -
layui select 城市联动页面jsp
2020-07-09 10:26:301、jsp 页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath... -
基于SSM+MySQL+LayUI+JSP的公共交通运输信息管理系统
2022-06-13 18:11:45基于SSM+MySQL+LayUI+JSP的公共交通运输信息管理系统 -
java项目:基于SSM开发的网上订餐系统(spring+spring mvc+mybatis+layui+jsp+jquery+bootstrap)1009
2022-04-07 18:06:41项目描述 基于SSM框架实现一个校园点餐系统,包括用户端和管理员端;...spring+spring mvc+mybatis+layui+jsp+jquery+bootstrap 项目截图 后台用户管理 后台订单管理 后台商品管理 客户端首页 客户端登录界面 部 -
Java项目:医院预约挂号系统(java+Springboot+jsp+maven+layui+mysql)
2021-12-30 09:42:07一、项目简述 功能包括: 用户分为患者,医生,管理员,患者可进行注册选择医生挂号,选择日期,选择号源,医生...JSP +Spring + SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等