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中教师表的插入和删除操作
基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+删除基于SSM框架+JSP+Ajax请求 mysql数据 关于员工信息的新增+修改+查询+...
JSP中使用JavaScript动态插入删除输入框实现代码.docx
武夷学院-JSP实验七:JSP数据库操作 (2).docx武夷学院-JSP实验七:JSP数据库操作 (2).docx武夷学院-JSP实验七:JSP数据库操作 (2).docx武夷学院-JSP实验七:JSP数据库操作 (2).docx武夷学院-JSP实验七:JSP数据库...
js代码高亮显示 JavaScript代码高亮 jsp js代码高亮显示 JavaScript代码高亮 jsp
JSP对图片的增删改查操作(能够删掉图片文件夹下的文件)此版本是作者在第一版的基础上改进的。新增加了删除图片的功能,数据库为mysql,经本人亲测能够运行。
ElementUI版本 2.13.0; Vue版本 v2.6.11; Jsp结合ElementUI要用的js和css; Jsp结合ElementUI要用的js和css;
JSP的数据库查询,插入,删除,修改操作。适合于jsp的初学者!
1.传递参数: 代码如下: var pmt = ‘sensor=’+ encodeURI(encodeURI(sensor))... top.location.href = ‘jsp/print/diagnosticAnaPrint.jsp?’+pmt; 2.接收和解析参数 代码如下: //获取URL参数 function GetRequest()
jsp修改 删除表格的某一行数据.docx
jsp数据库基本操作实验+mysql数据库连接
jsp文件操作 上传 创建 删除 ,用了再说好
jsp mvc模式的用户注册登录修改密码,JavaScript验证的。
jsp操作mysql表实现增删改查,简单注册登录。 驱动包和jsp都在里面,导入即可运行!
用myeclipse+mysql实现删除,修改,查询;其中,删除可以进行全选,反选操作进行批量删除,查询有分页,页数跳转
(1)学生信息管理模块:包含对学生信息的新增、删除、修改和查询功能 (2)院系管理模块:包含对院系信息的新增、删除、修改和查询功能 (3)专业管理模块: 包含对专业信息的新增、删除、修改和查询功能 (3)班级...
目录结构:jsp导入jquery文件,老是不起作用,原因在于: 代码如下: [removed][removed] 其不能访问/WEB-INF/目录下的文件,因此需要将加载的js文件其放倒webapp目录。 test.html: 代码如下: <%@ page ...
jsp js 在线图片编辑剪切 缩放jsp js 在线图片编辑剪切 缩放jsp js 在线图片编辑剪切 缩放
jsp虚拟键盘操作 javascript代码虚拟键盘