`

【表单】-001-表单的基本组件

阅读更多

1、表单的基本组件


 

2、WebContent/jsp/form_001.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>
<!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>表单--表单基本控件</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		
		/*
			1. validatebox验证框组件
			   A、required:定义是否字段应被输入。
			   B、missingMessage:当文本框是空时出现的提示文字。
			   C、invalidMessage:当文本框的内容无效时出现的提示文字。
			   D、validType:定义字段的验证类型,与自定义验证规则配合使用。
			   
		*/
		//自定义验证规则
		$.extend($.fn.validatebox.defaults.rules, {   
		    midLength: {   
		        validator: function(value, param){   
		            return value.length >= param[0] && value.length <= param[1];   
		        },   
		        message: ''  
		    },
		    equalLength: {   
		        validator: function(value, param){   
		            return value.length == param[0];   
		        },   
		        message: '密码必须为{0}个字符'  
		    }   
		}); 
		
		/*
			2. numberbox数字框组件
			   A、min:允许的最小值,若小于最小值,则值自动设置为最小值。
			   B、max:允许的最大值,若大于最大值,则值自动设置为最大值。
			   C、该组件继承了validatebox验证框组件,故可以使用其的属性。
			   D、precision:显示在小数点后面的最大精度。
		*/
		$('#age').numberbox({
			min:0,
			max:150,
			required:true, 
			missingMessage:'年龄必填',
			precision:0
		});
		
		/*
			3. datebox日期框组件
			  A、该组件继承了combo组件,可以使用其的editable属性
			  B、editable:定义是否用户可以往文本域中直接输入文字
			  C、combo组件继承了validatebox验证框组件,故可以使用其的required和missingMessage属性
		*/
		$('#birthday').datebox({
			required:true,
			missingMessage:'生日必填',
			editable:false
		});
		
		/*
			4. combobox下拉框组件
			 A、url:从远程加载列表数据的url。
			 B、valueField:绑定到 ComboBox的 value上的基础数据的名称,与json的key一致。
			 C、textField:绑定到combobox的text上的基础数据的名称,与json的value一致。
			 D、panelHeight:值为auto表示下拉框的高度自适应。
		*/
		$('#city').combobox({
			url:'<%=root%>/UserServlet?method=getCity',
			valueField:'id',
			textField:'name',
			required:true, 
			missingMessage:'所属城市必填',
			editable:false,
			panelHeight:'auto'
		});
		
		//numberbox数字框组件
		$('#salary').numberbox({
			min:1000,
			max:20000,
			required:true, 
			missingMessage:'薪水必填',
			precision:2
		});
		
		/*
			5. datetimebox日期时间框组件
		*/
		$('#starttime,#endtime').datetimebox({
			required:true, 
			missingMessage:'时间必填',
			editable:false
		});
	});
</script>
</head>
<body>
	<div id="mydiv" class="easyui-panel" title="新增用户" iconCls="icon-add"
		style="width:400px; height:350px;">
		<form action="" method="post">
			<table>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="username" class="easyui-validatebox" required="true" missingMessage="用户名必填" validType="midLength[2,5]" invalidMessage="用户名必须在2到5个字符之间"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" class="easyui-validatebox" required="true" missingMessage="密码必填" validType="equalLength[4]" /></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						男<input type="radio" name="sex" checked="checked" value="1">
						女<input type="radio" name="sex" value="2">
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
					<td><input id="age" type="text" name="age"></td>
				</tr>
				<tr>
					<td>出生日期:</td>
					<td><input id="birthday" type="text" name="birthday" style="width:146px;"/></td>
				</tr>
				<tr>
					<td>所属城市:</td>
					<td><input id="city" type="text" name="city" style="width:146px;"></td>
				</tr>
				<tr>
					<td>薪水:</td>
					<td><input id="salary" type="text" name="salary" /></td>
				</tr>
				<tr>
					<td>开始时间:</td>
					<td><input id="starttime" type="text" name="starttime" style="width:160px;"/></td>
				</tr>
				<tr>
					<td>结束时间:</td>
					<td><input id="endtime" type="text" name="endtime" style="width:160px;"/></td>
				</tr>
				<tr>
					<td>个人描述:</td>
					<td><input type="text" name="description" class="easyui-validatebox" required="true" missingMessage="个人描述必填" validType="midLength[5,50]" invalidMessage="个人描述必须在5到50个字符之间"/></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<a class="easyui-linkbutton">保存</a>
					</td>
				</tr>   
			</table>
		</form>
	</div>
</body>
</html>

 

3、com.easyui.bean.CityBean.java

 

package com.easyui.bean;

/**
 * 城市基本信息 
 * @author LiPiaoShui
 */
public class CityBean {

	private int id;
	private String name;
	
	public CityBean(int id, String name) {
		this.id = id;
		this.name = name;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

 

4、com.easyui.bean.TUserBean.java

 

package com.easyui.bean;

/**
 * 用户基本信息
 * @author LiPiaoShui
 */
public class TUserBean {

	private int id;
	private String username;
	private String password;
	private String sex;
	private int age;
	private String birthday;
	private int city;
	private String salary;
	private String starttime;
	private String endtime;
	private String description;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
	public int getCity() {
		return city;
	}
	public void setCity(int city) {
		this.city = city;
	}
	public String getSalary() {
		return salary;
	}
	public void setSalary(String salary) {
		this.salary = salary;
	}
	public String getStarttime() {
		return starttime;
	}
	public void setStarttime(String starttime) {
		this.starttime = starttime;
	}
	public String getEndtime() {
		return endtime;
	}
	public void setEndtime(String endtime) {
		this.endtime = endtime;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	
}

 

5、com.easyui.servlet.UserServlet.java

 

package com.easyui.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.easyui.bean.CityBean;
import com.easyui.bean.TUserBean;
import com.easyui.dao.UserDao;

/**
 * 用户控制器类
 * 
 * @author LiPiaoShui
 */
public class UserServlet extends HttpServlet {

	private static final long serialVersionUID = 9140830946116659042L;
	private UserDao uDao = new UserDao();

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String method = request.getParameter("method");
		if ("getList".equals(method)) {
			getList(request, response);
		} else if("getCityName".equals(method)) {
			getCityName(request, response);
		} else if("getCity".equals(method)) {
			getCity(request, response);
		} 
	}

	/**
	 * 获取全部城市信息
	 * @param request
	 * @param response
	 */
	private void getCity(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			List<CityBean> cList = new ArrayList<CityBean>();
			cList.add(new CityBean(1,"北京"));
			cList.add(new CityBean(2,"上海"));
			cList.add(new CityBean(3,"深圳"));
			cList.add(new CityBean(4,"长春"));
			response.setContentType("text/html;charset=utf-8");
			//[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"深圳"},{"id":4,"name":"长春"}]
			response.getWriter().write(JSONArray.fromObject(cList).toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获取城市信息
	 * @param request
	 * @param response
	 */
	private void getCityName(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			List<CityBean> cList = new ArrayList<CityBean>();
			cList.add(new CityBean(1,"北京"));
			cList.add(new CityBean(2,"上海"));
			cList.add(new CityBean(3,"深圳"));
			cList.add(new CityBean(4,"长春"));
			int id = Integer.parseInt(request.getParameter("id"));
			for(CityBean city:cList) {
				if(id == city.getId()) {
					response.setContentType("text/html;charset=utf-8");
					response.getWriter().write(JSONObject.fromObject(city).toString());
				}
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获取全部用户信息
	 * 
	 * @param request
	 * @param response
	 */
	private void getList(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			//当前页码
			int currentPage = Integer.parseInt(request.getParameter("page"));
			//每页显示的大小
			int pageSize = Integer.parseInt(request.getParameter("rows"));
			// 获取分页显示的用户信息
			List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize);
			//获取总用户数
			int total = uDao.getTotal();
			// json格式 --> {"total":10,"rows":[{},{}]}
			String json = "{\"total\":" + total + ",\"rows\":"
					+ JSONArray.fromObject(uList).toString() + "}";
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

 

6、界面展示



 

 

 

 

 

  • 大小: 10.6 KB
  • 大小: 22 KB
  • 大小: 23.1 KB
  • 大小: 24.3 KB
  • 大小: 20.9 KB
  • 大小: 28 KB
分享到:
评论

相关推荐

    基于element组件库封装的动态表单组件

    然而,在实际项目中,往往需要根据业务需求自定义一些组件,例如动态表单组件。"基于element组件库封装的动态表单组件"就是这样一个解决方案,它针对Vue3进行了优化,旨在帮助开发者更方便地创建和管理动态表单。 ...

    微信小程序表单自定义组件vest-form-master.zip

    在微信小程序中,表单组件是用户与应用交互的重要工具,用于收集用户输入的数据。"vest-form" 是一个专门为微信小程序设计的表单验证框架,它的目标是简化表单处理流程,提供更强大的自定义能力。 vest-form-master...

    漂亮的form表单-漂亮的form表单

    使用CSS和JavaScript可以创建自定义的表单组件,比如带有清除按钮的输入框、滑块控件等,提升用户体验。 6. **响应式设计** 表单应具有响应式设计,确保在手机、平板电脑和桌面设备上都能良好显示。可以使用媒体...

    laravel-admin Form表单多功能列表组件MultiList.rar

    在本文中,我们将深入探讨`laravel-admin`框架中的`Form`表单多功能列表组件`MultiList`。这个自定义插件是专为`laravel-admin`设计的,旨在提供一种创新的方式,将传统的`grid`表格样式与`form`表单控件相结合,...

    Lotus Domino BS开发--熟悉并使用Lotus的各种设计元素--001--表单.ppt

    在Lotus Domino中,设计元素是构建应用程序的基础组件,包括表单、视图、框架、代理、大纲、子表单、Script库等。本篇将深入探讨其中的核心元素——表单。 表单在Lotus Domino数据库中扮演着至关重要的角色,它是...

    Laravel-admin表单Form多级下拉复选框组件multiCheckbox(优化版).rar

    表单(Form)是 Laravel-admin 中的核心部分,它支持多种表单元素,包括文本输入、下拉选择、复选框等,以及自定义组件。 `multiCheckbox` 组件是一个专为 Laravel-admin 设计的多级下拉复选框,适用于处理层级结构...

    简单方便的表单拖拽设计器(vue+ElementUI)

    基于vue+ElementUI的表单设计器。让表单拖拽更加简单方便 - 2020-12-15: 增加button组件 - 2020-12-25: 增加分割线组件 - 2020-12-28: 增加Alert 警告组件 - 2021-01-01: 增加文本组件 - 2021-01-01: 增加html组件 ...

    Vuex的官方计算器例子增加了表单组件

    在这个“Vuex的官方计算器例子”中,增加了表单组件,这使得示例更加贴近实际应用,有助于开发者更好地理解和学习如何在Vuex环境中集成表单处理。 首先,我们需要理解Vuex的基本概念。Vuex是一个专为Vue.js应用程序...

    微信小程序 ---- 组件应用和实际开发的DEMO

    常见的组件包括视图容器(view、scroll-view)、基础内容(text、image)、表单组件(input、button)以及导航、媒体、地图等特殊组件。每个组件都有其特定的属性和事件,通过合理组合可以构建出各种复杂的用户界面...

    vue3+ts 表单和表格配置化组件

    4. **表单配置化**:在Vue3项目中,你可以创建一个表单组件,接受一个配置对象,该对象定义了表单字段的类型、验证规则、初始值等属性。这样,开发者只需要提供不同的配置就能生成不同样式的表单,减少了重复代码。 ...

    基于elementui的数据驱动表单组件

    本篇将深入探讨"基于elementui的数据驱动表单组件"这一主题,以及如何在实际项目中应用。 数据驱动表单是现代前端开发中的一个重要概念,它强调通过模型(data)来控制表单的状态,而不是直接操作DOM。Element UI ...

    微信小程序-媒体及表单组件demo

    本“微信小程序-媒体及表单组件demo”是专门针对微信小程序中的媒体元素和表单控件的实例展示,旨在帮助开发者更好地理解和运用这些功能。 在微信小程序中,媒体组件主要用于展示图像、音频、视频等多媒体内容。...

    laravel-admin:form表单树状复选框组件(CheckboxTree).rar

    为了在表单中使用这个组件,你需要在 Laravel-Admin 的 Form 中调用 `checkboxTree` 方法,传入需要展示的数据源和配置项。例如: ```php $form-&gt;checkboxTree('permissions', '权限分配')-&gt;options($...

    Vue快速问卷表单系统

    首先,Vue.js的核心特性包括组件化、响应式数据绑定和指令系统,这些特性使得构建复杂的表单系统变得相对简单。在这个项目中,你可能会遇到以下关键知识点: 1. **组件化**:Vue中的组件是可复用的代码块,可以封装...

    基于elementui的form表单实现的一个高拓展性的表格布局组件

    本文将深入探讨如何利用Element UI的Form表单组件构建一个高拓展性的表格布局组件。 首先,Element UI的Form组件提供了强大的表单处理能力,它支持各种表单元素如Input、Select、Checkbox、Radio等,并且具有表单...

    Vue element-ui父组件控制子组件的表单校验操作

    在Vue.js框架中,Element-UI是一个非常流行的UI组件库,它提供了丰富的界面元素和功能,包括表单验证。在大型应用中,我们经常需要在父组件中控制子组件的行为,比如触发子组件的表单验证。以下将详细介绍如何实现...

    laravel-admin:form表单tab标签切换组件.rar

    该组件仿造laravel-admin form表单自带的tab组件。 区别在于laravel-admin自带的tab标签切换组件只能出现form表单的顶部所有的输入只能在tab标签内; 而该组件允许tab标签切换在form表单的任何位置,与代码顺序相关...

    基于naive-ui封装的一些组件库,表单、上传、表格等

    基于naive-ui封装的一些组件navie-ui-formnaive-ui-uploadnaive-ui-table

Global site tag (gtag.js) - Google Analytics