精华内容
下载资源
问答
  • 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>
    
    更多相关内容
  • JSP课程设计:包含 1、 学生信息子系统 2、 课程内容管理子系统 3、 学生自测和成绩管理子系统 4、 学生问题及答复子系统 5、 操作维护子系统 6、日志子系统 带有数据库和界面,花了两周用心写的
  • Jsp + 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+bootstrap
  • 主要介绍了SSM框架JSP使用Layui实现layer弹出层效果,文章通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Jsp + 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
    为啥我用的layuiHTML中可以正常显示,我给加到jsp中就出不来样式呀,同一个项目下,引入layui的路径也对
  • javaEE期末课程设计
  • 项目介绍 这是一个基于SpringMVC+Spring+MyBatis的SSM...2. 前端:JSP+css+javascript+jQuery+layui 使用说明 1. 使用Navicat或者其它工具,mysql中创建对应名称的数据库,并导入项目的sql文件; 2.使用IDEA/Ecl
  • 下载使用tomcat就可以使用,数据库语句也有,如果要修改数据库配置就tool下面的工具类修改即可大学本科JSP课程的期末作业JSP+Servlet+layui实现的博客系统源码。教程 下载使用tomcat就可以使用,数据库语句也有,...
  • 一、项目简述 功能包括: 用户管理,游戏商品管理,在线购买,上传,售卖记录,商品审核等等。...JSP +Spring + SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等
  • SpringMVC+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:57
    LayUI是什么? 经典模块化前端框架。简单理解就是更好看点的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/
    反正我是看不懂的,还是亲自动手试一下

    1. 下载layui:地址见上
    2. 解压layui: 在这里插入图片描述
      关键是这个文件夹,解压到桌面,复制
    3. IDEA部署layui:
      打开IDEA,在WEB文件夹,右键Paste
      在这里插入图片描述
      这里需要注意的是,似乎粘贴到别的地方似乎是不行的,必须在WEB文件夹下,可能与IDEA web项目的构造有关,站在外面的话jsp访问不到。
    4. 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>
    
    1. 使用layui进行测试,是否导入成功
      在Body标签加一行代码,调用layui的一个图形字符
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020031016154164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dqaDE3MTY3MTgzMjY=,size_16,color_FFFFFF,t_70) 然后运行进行,对jsp进行访问 在浏览器地址栏输入:[http://localhost:8080/test.jsp](http://localhost:8080/test.jsp) 这个根目录如果你没有修改过的话可能和我不一样 可以在下面这个位置修改![在这里插入图片描述](https://img-blog.csdnimg.cn/20200310163059844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dqaDE3MTY3MTgzMjY=,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200310163138481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dqaDE3MTY3MTgzMjY=,size_16,color_FFFFFF,t_70) 打开之后,发现引入成功,可以开始使用。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200310162954929.png)
    展开全文
  • Layui简介 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弹出层效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • //加入html前面加上<!DOCTYPE html>即可 <!DOCTYPE html> <html>
  • 用户登录 管理员 首页 查看学生 教师管理 班级管理 . 教室管理 课程管理 开课管理 ...前段框架: LayUI 后端框架: Spring+SpringMVC+Mybatis+SpringBoot 资料说明 基于SSM+
  • 超级管理员功能:|-,包括老师登录信 超级管理员可以对老师进行管理息生成、查看、更新老师初始化密码;|- 增加考试科目、修改考试科目信息;...;|- 对学生成绩进行维护、增加学生成绩、查看学生成绩;。。。。...
  • 首先layui的导入,必须jqery前,layui.js后,自己编写的js文件应该最后,否则会导致弹出层失效的问题. 建议将自己编写的js文件myStyle.js放入整个页面的最下方,也就是body的上面,因为有时候自己写的js文件...
  • 1、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的公共交通运输信息管理系统
  • 项目描述 基于SSM框架实现一个校园点餐系统,包括用户端和管理员端;...spring+spring mvc+mybatis+layui+jsp+jquery+bootstrap 项目截图 后台用户管理 后台订单管理 后台商品管理 客户端首页 客户端登录界面 部
  • 一、项目简述 功能包括: 用户分为患者,医生,管理员,患者可进行注册选择医生挂号,选择日期,选择号源,医生...JSP +Spring + SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,291
精华内容 2,916
关键字:

layui在jsp里