您的位置：首页 > Web前端 > JQuery

jquery.validate.js和jquery.form.js结合使用

2014-07-16 23:15 579 查看 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/include/taglib.jsp"%>
<!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>
<style type="text/css">
table {
border-spacing: 0;
}
button {
background-color: #569E3D;	/*菜单背景色*/
line-height: 25px;	/*调整行高*/
}
</style>
</head>
<body>
<div id="list" align="center">
<form id="searchForm" action="list.html" method="post">
<table>
<tr>
<td>菜单Id</td>
<td><input name="menuId"></td>
<td>菜单名字</td>
<td><input name="menuName"></td>
<td>父Id</td>
<td><input name="parentId"></td>
</tr>
<tr>
<td>标题</td>
<td><input name="title"></td>
<td>链接</td>
<td><input name="url"></td>
<td>是否叶子</td>
<td><input name="leaf"></td>
</tr>
<tr>
<td align="center"><button type="button" onclick="goAdd()">新增</button></td>
<td colspan="5" align="center"><button type="submit">查询</button></td>
</tr>
</table>
</form>
<c:if test="${!empty list}">
<table border="1">
<thead>
<tr>
<th>父Id</th>
<th>菜单Id</th>
<th>菜单名称</th>
<th>链接</th>
<th>标题</th>
<th>是否叶子</th>
<th>序号</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<c:forEach items="${list}" var="item">
<tr id='<c:out value="${item.menuId}"/>' align="left">
<td><c:out value="${item.parentId}"/></td>
<td><c:out value="${item.menuId}"/></td>
<td><c:out value="${item.menuName}"/></td>
<td><c:out value="${item.url}"/></td>
<td><c:out value="${item.title}"/></td>
<td><c:out value="${item.leaf}"/></td>
<td><c:out value="${item.orderSeq}"/></td>
<td onclick='goEdit(<c:out value="${item.menuId}"/>)'>编辑</td>
<td onclick='doDelete(<c:out value="${item.menuId}"/>)'>删除</td>
</tr>
</c:forEach>
</table>
</c:if>
</div>

<div id="add" align="center" style="display: none;">
<form id="addForm" action="insert.html" method="post">
<table border="1">
<tr>
<td>父Id</td>
<td><input type="text" name="parentId"></td>
</tr>
<tr>
<td>菜单Id</td>
<td>
<input type="text" name="menuId">
</td>
</tr>
<tr>
<td>菜单名称</td>
<td><input type="text" name="menuName"></td>
</tr>
<tr>
<td>链接</td>
<td><input type="text" name="url"></td>
</tr>
<tr>
<td>标题</td>
<td><input type="text" name="title"/></td>
</tr>
<tr>
<td>是否叶子</td>
<td><input type="text" name="leaf"></td>
</tr>
<tr>
<td>序号</td>
<td><input type="text" name="orderSeq"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" onclick="doAdd()">添加</button>
<button type="button" onclick="hide('add')">返回</button>
</td>
</tr>
</table>
</form>
</div>

<div id="edit" align="center" style="display: none;">
<form id="editForm" action="update.html" method="post">
<table border="1">
<tr>
<td>父Id</td>
<td><input type="text" id="parentId" name="parentId">
<label for="parentId" class="error"></label>
</td>
</tr>
<tr>
<td>菜单Id</td>
<td align="left"><span id="showMenuId"></span>
<input type="hidden" id="menuId" name="menuId">
</td>
</tr>
<tr>
<td>菜单名称</td>
<td><input type="text" id="menuName" name="menuName"></td>
</tr>
<tr>
<td>链接</td>
<td><input type="text" id="url" name="url"></td>
</tr>
<tr>
<td>标题</td>
<td><input type="text" id="title" name="title"/></td>
</tr>
<tr>
<td>是否叶子</td>
<td><input type="text" id="leaf" name="leaf"></td>
</tr>
<tr>
<td>序号</td>
<td><input type="text" id="orderSeq" name="orderSeq"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" onclick="doEdit()">保存</button>
<button type="button" onclick="hide('edit')">返回</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
function goAdd(){
document.getElementById("add").style.display = "block";
document.getElementById("list").style.display = "none";
}

function goEdit(menuId){
var cells = document.getElementById(menuId).cells;
document.getElementById("parentId").value = cells[0].innerHTML;
document.getElementById("menuId").value = menuId;
document.getElementById("menuName").value = cells[2].innerHTML;
document.getElementById("url").value = cells[3].innerHTML;
document.getElementById("title").value = cells[4].innerHTML;
document.getElementById("leaf").value = cells[5].innerHTML;
document.getElementById("orderSeq").value = cells[6].innerHTML;
document.getElementById("showMenuId").innerHTML = menuId;

document.getElementById("edit").style.display = "block";
document.getElementById("list").style.display = "none";
}

function doDelete(menuId){
$.ajax({
url:'delete.html',
type:'post',
data:{menuId:menuId},
success:function(data){
if(data == "success") {
alert("删除成功");
$("#searchForm").submit();
}else{
alert("删除失败");
}
}
});
}

function doAdd(){
if(addFormValidateor.form()){
$("#addForm").ajaxSubmit({
url:'insert.html',
type:'post',
success:function(data){
if(data == "success") {
alert("添加成功");
window.location.href = "index.html";
}else{
alert("添加失败");
}
}
});
}
}

function doEdit(){
if(editFormValidateor.form()){
$("#editForm").ajaxSubmit({
url:'update.html',
type:'post',
success:function(data){
if(data == "success") {
alert("修改成功");
window.location.href = "index.html";
}else{
alert("修改失败");
}
}
});
}
}

function hide(hideId, showId){
var id = showId || "list";
document.getElementById(id).style.display = "block";
document.getElementById(hideId).style.display = "none";
}

var addFormValidateor;
var editFormValidateor;
$().ready(function(){
addFormValidateor = $("#addForm").validate({
rules:{
parentId:"required",
menuId:"required",
url:"url",
leaf:"number",
orderSeq:{
required:true,
number:true
}
}
});
editFormValidateor = $("#editForm").validate({
rules:{
parentId:"required",
url:"url",
leaf:"number",
orderSeq:{
required:true,
number:true
}
}
});
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航