java_easyui体系之目录 [转]
2016-01-18 09:42
531 查看
摘要：简单介绍form的提交方式、与validatebox的结合使用。
要引入的css+js：
登录的div和表单：
简单说明：
1、登录是使用dialog来作为界面的、初始化dialog有几种方式——（1）使用class="easyui-dialog"定义、使用data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。（2）使用js初始化、适合与后台交互的界面使用、（3）可以混合使用。
View Code
简单说明：if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。
点击登录时提交表单：
简单说明：这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。
$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。
1、获取div的id用于将div初始化成dialog： $('#divId').dialog(...);
2、获取div中的form的id用于初始化form表单：$('#formId').form(...);
3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交：$('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})
一：form简介
Easyui中的form有两种提交方式、结合自己新添加的一种ajax提交方式、本文简单说明form的三种提交方式、和结合validatebox使用来校验基本信息。二：form提交
以登录为例：下面是登录页面、注意要导入easyui所需要的css和js。要引入的css+js：
<link rel="stylesheet" type="text/css"href="css/easyui/default/easyui.css"> <link rel="stylesheet" type="text/css" href="css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="css/easyui/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
登录的div和表单：
简单说明：
1、登录是使用dialog来作为界面的、初始化dialog有几种方式——（1）使用class="easyui-dialog"定义、使用data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。（2）使用js初始化、适合与后台交互的界面使用、（3）可以混合使用。
1、通过ajax提交：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
if( $('#loginInputForm').form('validate')){
$.ajax({
url:'login_login.action',
data:$('#loginInputForm').serialize(),
cache:false,
dataType:'text',
success:function(r){
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}
}
}],
});View Code
简单说明：if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。
2、通过先初始化form、再在点击登录触发函数中提交
初始化form表单：//初始化登录表单
loginInputForm = $('#loginInputForm').form({
url:'login_login.action',
success:function(r){
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});点击登录时提交表单：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
loginInputForm.submit();
}
}],
});简单说明：这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。
3、直接在点击登录触发函数中提交
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
if( $('#loginInputForm').form('validate')){
$('#loginInputForm').form('submit',{
url:'login_login.action',
onSubmit: function(){
console.info('do some check !');
},
success : function(r){
console.info(r);
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}
}
}],
});$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。
三：form注意事项
注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、1、获取div的id用于将div初始化成dialog： $('#divId').dialog(...);
2、获取div中的form的id用于初始化form表单：$('#formId').form(...);
3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交：$('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})
四：form提交网页完整（包括注册）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<base href="<%=basePath%>">
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
/*
注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、
1、获取div的id用于将div初始化成dialog： $('#divId').dialog(...);
2、获取div中的form的id用于初始化form表单： $('#formId').form(...);
3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交： $('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})
*/
//节点的引用、当被初始化一次之后、后面就可以直接拿来使用了
var loginAndregist;
var loginInputForm;
var registForm;
$(function(){
//初始化登录窗口
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
//loginInputForm.submit();
if( $('#loginInputForm').form('validate')){
$.ajax({
url:'login_login.action',
data:$('#loginInputForm').serialize(),
cache:false,
dataType:'text',
success:function(r){
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}
/*
if( $('#loginInputForm').form('validate')){
$('#loginInputForm').form('submit',{
url:'login_login.action',
onSubmit: function(){
console.info('do some check !');
},
success : function(r){
console.info(r);
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}*/
}
}],
});
//初始化登录表单 loginInputForm = $('#loginInputForm').form({ url:'login_login.action', success:function(r){ console.info(r); if(r == "success"){ $('#loginAndregist').dialog('close'); $.messager.show({ title : '提示', msg : '登录成功' }); }else{ $.messager.alert('标题','用户名密码错误'); } } });
//初始化注册窗口
$('#regist').show().dialog({
modal:true,
closed:true,
draggable:true,
buttons:[{
text:'确认',
handler:function(){
$('#registForm').submit();
}
},{
text:'取消',
handler:function(){
$('#regist').dialog('close');
}
}],
});
//初始化注册表单
registForm = $('#registForm').form({
url:'login_regist.action',
success : function(r){
console.info(r);
if(r == "success"){
$('#regist').dialog('close');
$.messager.show({
title : '提示',
msg : '注册成功'
});
}else{
$.messager.show({
title : '警告',
msg : '注册失败'
});
}
}
});
});
</script>
<div id="loginAndregist" title="用户登录" style="width:300px;height:200px;">
<form id="loginInputForm" method="post" action="logion_login.action">
<table>
<tbody><tr>
<th align="right">username: </th>
<td><input type="text" class="easyui-validatebox" required="true" name="username"></td>
</tr>
<tr>
<th align="right">password: </th>
<td><input type="text" class="easyui-validatebox" required="true" name="password"></td>
</tr>
</tbody></table>
</form>
</div>
<div id="regist" title="用户注册" style="width:300px;height:200px;display: none;">
<form id="registForm" method="post" action="logion_regist.action">
<table>
<tbody><tr>
<th align="right">username: </th>
<td><input type="text" class="easyui-validatebox" required="true" name="username"></td>
</tr>
<tr>
<th align="right">password: </th>
<td><input type="text" class="easyui-validatebox" required="true" name="password"></td>
</tr>
<tr>
<th align="right">confirmpassword: </th>
<td><input type="text" class="easyui-validatebox" required="true" name="confirmpassword"></td>
</tr>
</tbody></table>
</form>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- bzoj1570: [JSOI2008]Blue Mary的旅行
- This android SDk requires Android developer......
- UIView缩放动画
- Android UI 基础之ViewPager的使用
- UIResponder简要
- 关于UICollectionViewController的header和foot视图
- getJdbcTemplate().query的使用
- Java之学习笔记（12）-----------数据类型转换valueOf、subString、indexOf用法
- iOS开发中UITableView和UITableViewCell的几种样式
- Leetcode: Range Sum Query 2D - Mutable && Summary: Binary Indexed Tree
- 以金山界面库（openkui）为例思考和分析界面库的设计和实现——代码结构（完）
- 跟我学习dubbo-消息中间件在分布式系统中的作用介绍（8）
- Android UI总结（一） AutoCompleteTextView 组件及一些较为常见的组件
- iOS UINavigationController的iOS 7的手势滑动返回功能
- java get request 中文乱码问题
- UITableView样式和UITableViewCell样式
- IOS，UILabel的一些小技巧
- IOS，UITextField比较全的实用的属性功能
- vim实现类似UE的查询复制功能
- EasyUI DataGrid 单元格编辑 注释版