LayUI 表单和表格的简单应用

最新推荐文章于 2022-02-28 16:26:40 发布

原创最新推荐文章于 2022-02-28 16:26:40 发布 · 587 阅读

CC 4.0 BY-SA版权

该页面提供了一个党员发展阶段管理系统的实现方案，包括党员发展阶段的增删改查功能，支持通过表格展示不同阶段的身份信息，并允许用户进行添加、编辑和删除操作。

<%@page import="com.open.eac.core.app.AppHandle"%>
<%@page import="com.open.eac.core.structure.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://www.open.com/eac/core/tag"%>
<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>党员发展阶段管理</title>


</head>


<body>
	<script src="/std-core/static/js/require.min.js"></script>
	<script src="/std-core/static/js/require-config.js"></script>

	<div style="float: right; position: relative; left: -36px;">
		<button class="layui-btn layui-btn-sm style="background: #8d8888" onclick="addStp()">+添加身份</button>			
	</div>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>党员发展阶段管理</legend>
	</fieldset>
	<table class="layui-hide" id="stp" lay-filter="demo">
	</table>
	<button class="layui-btn layui-btn-sm" style="background: #a9a3a3"
		onclick="deleteStps()">删除</button>
	<script>
		require(
				[ 'style', 'form_ajax', 'form_util' ],
				function(style, ajax) {
					layui
							.use(
									[ 'laydate', 'laypage', 'layer', 'table',
											'element' ],
									function() {
										var layer = layui.layer, //弹层
										table = layui.table //表格

										//执行一个 table 实例
										table
												.render({
													elem : '#stp',
													height : 332,
													url : '/stddj_dev/step/all' //数据接口
													,
													cols : [ [ //表头
															{
																type : 'checkbox'
															},
															{
																field : 'stepName',
																title : '发展阶段',
																width : 180,
																align : 'center'
															},
															{
																field : 'typeName',
																title : '身份',
																width : 180,
																align : 'center'
															}
															{
																field : 'wealth',
																title : '操作',
																width : 150,
																align : 'center',
																templet : function(
																		record) {
																	var html = '';
																	html += '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" onclick="queryStp(\''
																			+ record.stepId
																			+ '\')">查看</a>';
																	html += '<a class="layui-btn layui-btn-xs" lay-event="edit" onclick="updateStp(\''
																			+ record.stepId
																			+ '\')" style="background: #009688">编辑</a>';
																	html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="deleteStp(\''+ record.stepId+'\',\'true\')" style="background: #ff5734">删除</a>';
																	return html;
																}
															} ] ]
												});
									});
				});
	</script>
	<script type="text/javascript">
		function addStp() {
			window.location.href = "fitstep.jsp";
		}
 
		function queryStp(stepId) {
			window.location.href = "fitstep.jsp?stepId="+stepId;
		}

		//删除阶段
		function deleteStp(stepId, flag) {
			var stepId = stepId;
			var layer = layui.layer;
		
			if(flag == 'true'){
			
			layer.confirm('是否删除当前选中的信息？', {
				btn : [ '是的', '取消' ]
			//按钮
			}, function() {
				var index = layer.load();//加载层
				$.ajax({
					url : '/stddj_dev/step/deleteStp',
					data : {
						"stepId" : stepId
					},
					contentType : 'application/json;charset=UTF-8',
					async : false,
					success : function(data) {
						if (data >= 0) {
							layer.msg("删除成功");
							location.reload();
						} else {
							layer.msg("删除失败");
						}
					}
				});
			}, function() {

			});
		}else{
				$.ajax({
					url : '/stddj_dev/step/deleteStp',
					data : {
						"stepId" : stepId
					},
					contentType : 'application/json;charset=UTF-8',
					async : false,
					success : function(data) {
						if (data >= 0) {
							layer.msg("删除成功");
							location.reload();
						} else {
							layer.msg("删除失败");
						}
					}
				});
			}

		}
		//删除阶段 批量 
		function deleteStps() {
			var records = getSelectedRecords('stp');
			var collections = new Array();
			if (records.length == 0) {
				layer.confirm('请选择需要操作的记录！', true);
				return false;
			}

			layer.confirm('确认要删除选择的' + records.length + '条记录吗？', {
				btn : [ '是的', '取消' ]
			//按钮
			}, function() {
				for (var i = 0; i < records.length; i++) {
					deleteStp(records[i].stepId,false);
				}
			});
		}
		
		//修改
		function updateStp(stepId) {
			window.location.href = "fitstep.jsp?stepId="+stepId;
		}
		
	</script>
</body>
</html>

<%@page import="com.open.eac.core.app.AppHandle"%>

<%@page import="com.open.eac.core.structure.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://www.open.com/eac/core/tag"%>
<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>党员发展阶段设置</title>
<style>
.layui-content {
	padding-bottom: 50px !important;
}

.layui-form-item .layui-input-w400 {
	width: 400px !important;
}

.layui-form-item .layui-word-aux {
	color: #f00 !important;
	font-size: 13px;
}

.layui-form {
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 20px;
}

.layui-form-item .layui-form-label {
	color: #666;
}

.layui-form-item a {
	color: #1E9FFF;
}

.layui-form-item a:hover {
	color: #f00;
}


</style>
</head>

<body style="display: none;">
<body>
	<script src="/std-core/static/js/require.min.js"></script>
	<script src="/std-core/static/js/require-config.js"></script>
	<div style="height: 40px; line-height: 40px;">
		<span style="color: #f76c4e;"><i class="layui-icon"></i>
			您的当前位置：党务-党员发展</span>
	</div>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>党员发展阶段设置</legend>
	</fieldset>
	<form class="layui-form" id="stpForm">

		<div class="layui-form-item">
			<label class="layui-form-label">阶段名称</label>
			<div class="layui-input-inline">
				<input type="text" name="stepName" class="layui-input">
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">身份</label>
				<div class="layui-input-inline">
					<select name="userType" id="numbers">
						<option value="请选择">请选择</option>
						<option value="1">申请人员</option>
						<option value="2">积极分子</option>
						<option value="3">发展对象</option>
						<option value="4">预备党员</option>
					</select>
				</div>
			</div>
			<label class="layui-form-label"> 顺序</label>
			<div class="layui-input-inline">
				<input type="text" name="orderSeq" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">说明</label>
			<div class="layui-input-block">
				<textarea name="stepDesc" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="fomDemo">立即提交</button>
				<button class="layui-btn" lay-submit lay-filter="fomDemo1">修改</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>

	</form>
 	

	
	<script>
	//修改
					var stepId=getQueryVariable("stepId");
					require([ 'style', 'form_ajax' ], function() {
						layui.use([ 'laypage', 'form', 'element', 'layer', 'table' ],
								$.ajax({
									url : '/stddj_dev/step/queryOne',
									data : {"stepId" : stepId},
									method : 'GET',
									contentType : 'application/json;charset=UTF-8',
									async : false,
									success : function(data) {
										$('input[name="stepName"]').val(data['stepName']);
										$('input[name="orderSeq"]').val(data['orderSeq']);
										$('textarea[name="stepDesc"]').val(data['stepDesc']);
										 if(data['userType'] ==1){
											 $("#numbers").find("option[value = '"+1+"']").attr("selected","selected");
										}else if(data['userType'] ==2){
											$("#numbers").find("option[value = '"+2+"']").attr("selected","selected");
										}else if(data['userType'] ==3){
											$("#numbers").find("option[value = '"+3+"']").attr("selected","selected");
										}else{
											$("#numbers").find("option[value = '"+1+"']").attr("selected","selected");
									}
										  /* form.render('select'); */
								}
							})
						)
					})
		//获取url参数
		function getQueryVariable(variable){
			   var query = window.location.search.substring(1);
			   var vars = query.split("&");
			   for (var i=0;i<vars.length;i++) {
					   var pair = vars[i].split("=");
					   if(pair[0] == variable){return pair[1];}
			   }
			   return(false);
		}
					
								
					require([ 'style', 'form_ajax' ], function() {
						layui.use(['form','laydate','layer','element','layedit'], function(){
							form = layui.form;
							//监听提交
							form.on('submit(fomDemo1)', function(data){
							   		  	var postData = data.field;
											$.ajax({
												url : '/stddj_dev/step/updateStp',
												data : {
													"stepId": stepId,
													"stepName" : postData.stepName,
													"userType" : postData.userType,
													"orderSeq" : postData.orderSeq,
													"stepDesc" : postData.stepDesc
												},
												method : 'POST',
												contentType : 'application/json;charset=UTF-8',
												async : false,
												success : function(data) {
													if (data = 1) {
														layer.msg("修改成功");
													} else {
														layer.msg("修改失败");
													}
												}
											});
							   		    
									    return false;
									});
							  });
							
						});
					
					
	</script> 
	<script type="text/javascript">
	
	//新增
	require([ 'style', 'form_ajax' ], function() {
		layui.use(['form','laydate','layer','element','layedit'], function(){
			form = layui.form;
			//监听提交
			form.on('submit(fomDemo)', function(data){
			   		  	var postData = data.field;
							$.ajax({
								url : '/stddj_dev/step/addStp',
								data : {
									"stepName" : postData.stepName,
									"userType" : postData.userType,
									"orderSeq" : postData.orderSeq,
									"stepDesc" : postData.stepDesc
								},
								method : 'POST',
								contentType : 'application/json;charset=UTF-8',
								async : false,
								success : function(data) {
									if (data = 1) {
										layer.msg("添加成功");
										window.location.href="stp.jsp";
									} else {
										layer.msg("添加失败");
									}
								}
							});
			   		    
					    return false;
					});
			  });
			
		});
	
	</script>
</body>
</html>

package com.open.stddj.dev.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.open.stddj.dev.common.JsonResult;
import com.open.stddj.dev.dto.ApplyStepDTO;
import com.open.stddj.dev.service.ApplyStepService;

@Controller
@RequestMapping("/step")
public class ApplyStepController {
	@Autowired
	private ApplyStepService applyStepService;

	@RequestMapping("/all")
	@ResponseBody
	public JsonResult<ApplyStepDTO> quaryAll() {
		JsonResult<ApplyStepDTO> list = applyStepService.selectAll();
		return list;
	}
	
	@RequestMapping(value="/deleteStp")
	@ResponseBody
	public  int  deleteStp(String stepId) throws Exception {
		 return applyStepService.deleteStp(stepId);
	}
	
	@ResponseBody
 	@RequestMapping(value="/addStp")
 	public int addStp(String stepName,int userType,int orderSeq,String stepDesc) throws Exception {
 		ApplyStepDTO  stp = new ApplyStepDTO();
 		stp.setStepName(stepName);
 		stp.setUserType(userType);
 		stp.setOrderSeq(orderSeq);
 		stp.setStepDesc(stepDesc); 
 		return applyStepService.addStp(stp);
 	}
	@ResponseBody
	@RequestMapping(value="/queryOne")
	public ApplyStepDTO quaryOne(String stepId) throws Exception{
		return  applyStepService.selectOne(Integer.valueOf(stepId));
	}
	
	@ResponseBody
	@RequestMapping(value="/updateStp")
 	public int updateStp(String stepId,String stepName,int userType,int orderSeq,String stepDesc) throws Exception {
		System.out.println(stepId);
 		ApplyStepDTO  stp = new ApplyStepDTO();
 		stp.setStepId(Integer.valueOf(stepId));
 		stp.setStepName(stepName);
 		stp.setUserType(userType);
 		stp.setOrderSeq(orderSeq);
 		stp.setStepDesc(stepDesc);
 		return applyStepService.update(stp);
 	}
}

package com.open.stddj.dev.common;

import java.io.Serializable;
import java.util.List;

public class JsonResult<T> implements Serializable  {

	private static final long serialVersionUID = 1L;
	private List<T> data;//存储最终查询的数据  
	/*private Integer startIndex;//结束索引  
    private Integer endIndex;//开始索引  
    private Integer CurPage=1;//当前页  
*/    private Integer count;//总记录数  
   /* private Integer records=10;//每页显示个数  
    private Integer previesPage;//前一页  
    private Integer nextPage;//下一页  
    private Integer totalPage;//总页数  
*/    private String msg;//返回信息
  	private int code; //状态码
  	
  	public JsonResult() {
  		
  	}

	public JsonResult(Integer curPage,Integer count,Integer records) {
		
//		    this.CurPage=curPage;//当前页  
	        this.count=count;//总记录数
//	        this.records=records==null?this.records:records;//每页显示个数  
//	        this.previesPage=(curPage==1?1:curPage-1);//上一页  
//	        this.nextPage=(curPage==totalPage)?totalPage:(curPage+1);//下一页 
//	        this.totalPage=count%this.records==0?count/this.records:count/this.records+1;  
//	        this.startIndex=(curPage-1)*this.records+1;
//	        this.endIndex=curPage*this.records; 
	        this.msg=this.count>0?"返回"+count+"条数据":"查询失败！";
	        this.code=this.count>0?1:0;
	}


	

	public Integer getCount() {
		return count;
	}

	public void setCount(Integer count) {
		this.count = count;
	}

	public List<T> getData() {
		return data;
	}


	public void setData(List<T> data) {
		this.data = data;
	}


	public String getMsg() {
		return msg;
	}


	public void setMsg(String msg) {
		this.msg = msg;
	}


	public int getCode() {
		return code;
	}


	public void setCode(int code) {
		this.code = code;
	}
	public static void main(String[] args) {
		int curPage=2;  
        int totalCount=37;  
        int pageCount=5;  
        JsonResult pt = new JsonResult(curPage,totalCount,pageCount);  
//        System.out.println("每页显示个数"+pt.getRecords());
//        System.out.println("下一页"+pt.getNextPage());  
//        System.out.println("上一页"+pt.getPreviesPage());  
//        System.out.println("当前页："+curPage);  
//        System.out.println("总页"+pt.getTotalPage());  
//        System.out.println("开始索引"+pt.getStartIndex());  
//        System.out.println("结束索引"+pt.getEndIndex());  
//        System.out.println("状态码"+pt.getCode());
//        System.out.println("消息"+pt.getMsg());

	}
}