jroo的jsp，js新增、修改和删除操作的方式

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"/>