jroo的jsp,新增、修改、删除操作都采用ajax的方法进行。
下面介绍新增、修改、删除的js方法。
在jsp中这样写就行了:
$(function() {
var deleteurl = "${ctx}/system/dept_delete.do";
$("#submitBtn").submitForm({ formId:"userForm"});
$(".deleteOne").deleteOne({url:deleteurl});
$("#batchDelete").batchDelete({url:deleteurl});
});
1、新增或修改提交form,采用ajax方式提交
$("#formid").submitForm({
formId:"formId",/**括起提交数据的formid*/
onSubmit:null, /**提交前的回调函数,一般用于特殊的校验,或一些特殊的操作*/
onComplete:null /**提交完成后的回调函数,在默认操作无法满足时,才需要加这个function*/
});
默认时:onSubmit方法执行页面上加上的校验逻辑:rules;
onComplete:根据是添加还是修改操作,重置页面或返回到列表页面,或停留在当前页面。
例子1: $("#submitBtn").submitForm({ formId:"userForm"});
例子2,特殊新增或修改操作:
$("#submitBtn").submitForm({
formId:"deptForm",
onComplete:function(){
parent.addNode('${parentDeptId }',id,$("#deptName").val(),"/system/dept_input.do?id="+id);
}
});
onComplete:在添加完成后,更新左侧另一个jsp页面的机构树,自动在左侧的机构数上加上新增的机构节点。
html:
<form id="userForm" action="system/user_save.do" method="post">
<input type="text" name="loginName" value="" id="loginName" rules="[{notNull:true, message:'帐号不能为空'}]"></input>
<input type="button" value="提交" id="submitBtn"/>
</form>
2、form校验,新增或修改,数据输入校验少不了,
rules是校验规则,在本插件中是个内部变量,如果下面的几种规则不满足,自行扩张即可。
rules="[
{notNull:true, message:'姓名不能为空'},
{isNumber:true, message:'只能是数字'},
{isDigit:true, message:'只能是整数'},
{isEmail:true,message:'电子邮件格式不正确'},
{minLength:6,message:'帐号长度至少为6'},
{maxLength:6,message:'帐号长度最多为6'},
{regExp:/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/,message:'自定义正在表达式验证'},
]"
如果是radio和checkbox,请创建一个hidden域,在$("#submitBtn").submitForm()的onSubmit方法中动态赋值。
rules在form提交前执行。
例子:
<form id="userForm" action="system/user_save.do" method="post">
<input type="text" name="loginName" value="" id="loginName" rules="[{notNull:true, message:'帐号不能为空'}]"></input>
<input type="text" name="num" value="" id="num" rules="[{notNull:true, message:'不能为空'},{isNumber:true, message:'只能是数字'}]"></input>
<input type="button" value="提交" id="submitBtn"/>
</form>
验证不通过的,将在对应元素的后面,给出红色提示信息,同时阻止提交form。
3、单笔删除数据 使用:$(".deleteOne").deleteOne({
url: "",/**对应action中的一个删除方法*/
dtype:"table",/**tabel:删除的是table列表中的一行*/
chooseMsg: "请选择要删除的数据",
confrimMsg: "您确定要删除吗",
successMsg: "删除成功",
failMsg: "服务器出现错误,删除失败",
onComplete:null /**响应完成后的回调函数*/
});
例子1:$(".deleteOne").deleteOne({url:deleteurl}); 例子2:$(".deleteOne").deleteOne({
url:deleteurl,
onComplete:function(param){//删除成功后,调用父页面的方法,更父页面的机构树,即删除机构树上对应的节点。
parent.removeNodes(param);
}
});
<table>
<tbody>
<td><input type="checkbox" name="ids" value=${id}/></td>
<td><a href="javascript:" title="deletesigle"
class="deleteOne" param="ids=${user.id}">删除</a> </td>
</tbody>
</table>
删除链接中,加上自定义属性param,表示本次删除需要的参数名和参数值,多个参数用&连接,
如:param="ids=${user.id}&type=1&code=2&deptId=${deptId}"
4、table列表中,批量删除
使用:$("#batchDelete").batchDelete({
url: "",/**对应action中的一个删除方法*/
paramName: "ids", /**服务器端接收的参数名称,table 列中checkbox的namen属性,默认为ids*/
dtype:"table",/**tabel:删除的是table列表中的一行*/
chooseMsg: "请选择要删除的数据",
confrimMsg: "您确定要删除吗",
successMsg: "删除成功",
failMsg: "服务器出现错误,删除失败",
onComplete:null /**响应完成后的回调函数*/
});
例子1: $("#batchDelete").batchDelete({url:deleteurl});
<table>
<thead><th><input type="checkbox" id="checkId"/></th></thead>
<tbody>
<td><input type="checkbox" name="ids" value=${id}/></td>
</tbody>
</table>
<input type="button" value="批量删除" id="batchDelete"/>
分享到:
相关推荐
### JSP 修改、插入、删除基本操作 #### 知识点概述 JSP(JavaServer Pages)是一种基于Java技术的动态网页技术标准。它通过在HTML文件中嵌入Java代码来实现动态页面的功能。本文将从`index.jsp`、`query.jsp`、`...
JSP中使用JavaScript动态插入删除输入框实现代码 JSP(Java Server Pages)是一种基于Java技术的服务器端脚本语言,主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言,主要用于实现网页的交互功能。在...
本话题主要涉及如何使用JSP结合MySQL数据库,通过MyEclipse集成开发环境来实现数据的删除、修改和分页查询功能。 首先,我们从"stuinfo.sql"这个文件名可以推测,它可能是一个SQL脚本文件,用于创建或填充一个名为...
基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+...
本话题聚焦于JSP如何实现对图片的增删改查操作,并特别强调了删除图片文件夹下文件的能力。以下是对这个主题的详细讲解: 首先,图片的“增”操作,即上传图片,通常涉及到文件上传功能。在JSP中,我们可以使用`...
在JSP页面中,可以使用JavaScript来处理客户端的交互,而服务器端的业务逻辑和数据处理则通过JSP标签库或Java代码完成。 - 当用户在前端选择日期时间后,可以通过Ajax异步请求将选定的值发送到服务器,JSP页面接收...
在实际项目中,这样的流程可以帮助我们构建灵活、高效的Web应用,满足用户实时查询和操作数据库的需求。同时,需要注意安全问题,如防止SQL注入攻击,确保用户提交的数据经过适当的验证和清理。在"myjsDemo"这个示例...
总之,"jsp密码修改页面"涉及了前端用户界面设计、后端服务器逻辑处理、数据库操作、安全策略等多个方面,是一个完整的Web开发中的重要环节。这两个文件`mainpassmodify.jsp`和`mainpassmanage.jsp`协同工作,为用户...
该系统是基于Web开发的一种用户管理系统,主要利用了Java服务器页面(JSP)技术和JavaBean组件,配合MySQL数据库来实现用户的基本操作,如登录、注册、信息修改、查询以及删除功能。下面将对这些关键知识点进行详细...
【标题】:“jsp新闻网站 新闻发布 新闻修改删除等操作” 这个项目是一个基于JSP技术构建的简单新闻网站,主要功能包括新闻的发布、修改和删除,以及用户登录系统。JSP(JavaServer Pages)是Java平台上的一个重要...
3. **DOM操作**:JavaScript通过DOM接口可以操作HTML文档中的任何元素,包括添加、删除、修改和查找元素。在轮播图中,我们需要用到DOM操作来选择轮播的图片元素,改变它们的显示状态。 4. **CSS样式**:CSS用于...
- **表单提交**:通过JavaScript修改表单字段的值,然后提交表单,服务器端的Java代码可以通过请求参数获取这些值。 - **AJAX请求**:使用XMLHttpRequest对象或现代前端库(如jQuery、axios等)发送异步请求,将...
开发者需要了解如何在JSP中设置和使用JavaScript,以及如何处理请求和响应,实现数据的增删改查等操作。 6. **学习资源**:"JSP编程基础知识"文件很可能是为了帮助初学者快速入门JSP,包含JSP生命周期、指令、动作...
5. **数据库源码**:这表示程序包含与数据库交互的源代码,可能使用了如JDBC(Java Database Connectivity)来连接和操作数据库。 **内容详解:** JSP数据库操作通常涉及到以下几个关键步骤: 1. **连接数据库**...
JavaScript代码高亮显示是提高代码可读性的关键工具,通过使用像Highlight.js或Prism.js这样的库,可以在JSP页面上轻松实现这一功能。了解如何正确地集成和配置这些库,可以帮助开发者创建更专业、更易于阅读的代码...
通过使用JSP指令、脚本元素和表达式,我们可以创建交互式的网页。 2. **MVC模式** MVC模式是软件设计的一种架构模式,将业务逻辑(Model)、用户界面(View)和数据控制(Controller)分离。在JSP中,Model通常由...
在IT行业中,尤其是在Web开发领域,使用jsp和js来实现在线图片编辑、剪切和缩放功能是一项常见的需求。这通常涉及到用户交互、图像处理和前端技术的综合应用。以下是对这一主题的详细阐述: 首先,`jsp`(Java...
【标题】"jsp+css+javascript" 涵盖了Web开发中的三个核心技术:JavaServer Pages(JSP)、Cascading Style Sheets(CSS)和JavaScript。这些技术结合使用,可以构建功能丰富的、用户交互性强的动态网页应用程序。 ...
在这个场景中,"JS和JSP制作的动态菜单"指的是使用JavaScript来实现前端的动态效果,而JSP则可能用于处理服务器端的数据和逻辑,共同构建出一个响应用户操作、实时更新的菜单系统。 JavaScript是一种轻量级的解释型...