关于修改功能的实现

相应的js脚本：

  $requestBtn.on('click',function(event) {
    var $newRequestBtn=$("#new-request-btn");
    var $requestConfirmBtn=$("#request-confirm-btn");
    var $siteResourceBtn=$("#site-resource-btn");
    $newRequestBtn.off('click');
    $newRequestBtn.on('click',function(){
      $("#request-name").val("");
      $("#request-desc").val("");
      var validator=$("#request-form").validate({
        submitHandler:function(){
          var requestName=$("#request-name").val().trim();
          var requestDesc=$("#request-desc").val().trim();
          if(requestName==""){
            alert("输入不能为空");
          }
          $.ajax({
            url: baseURL+'/api/datacrawling/request/new',
            type: 'POST',
            dataType: 'json',
            data: {
              requestName: requestName,
              requestDesc:requestDesc
            }
          })
          .done(function(data) {
            console.log("success");
            if(data['errno']!=0){
              alert("服务器错误");
            }else{
              alert("新建成功");
              $requestConfirmBtn.click();
            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });
        }
      });
      validator.resetForm();
    });
    $requestConfirmBtn.off('click');
    $requestConfirmBtn.on('click',function(){
      var tmpl=$.templates("#request-list");
      $.ajax({
        url: baseURL+'/api/datacrawling/request/all',
        type: 'GET',
        dataType: 'json'
      })
      .done(function(data) {
        console.log("success");
        if(data['errno']!=0){
          alert("服务器错误");
        }else{
          var content=data['data'];
          var html=tmpl.render(content);
          $("#request-list-content").html(html);
          $(".change-request").off('click');
          $(".change-request").on('click', function(event) {
            var $a=$(event.target);
            var $th=$a.parent('th');
            var $id=$th.siblings('.request-id');
            var id=$id.text();
            $.ajax({
              url: baseURL+'/api/datacrawling/request/'+id,
              type: 'GET',
              dataType: 'json'
            })
            .done(function(data) {
              console.log("success");
              if(data['errno']!=0){
                alert("服务器错误");
              }else{
                $("#confirm-request-id").val(id);
                $("#confirm-request-name").val(data['data']['requestName']);
                $("#confirm-request-desc").val(data['data']['requestDesc']);
              }
              $("#edit-request .return-btn").off('click');
              $("#edit-request .return-btn").on('click',function(event) {
                event.preventDefault();
                /* Act on the event */
                $("#edit-request").removeClass("active");
                $("#request-confirm").addClass('active');
                $requestConfirmBtn.click();
              });
              var validator=$("#confirm-request-form").validate({
                submitHandler:function(){
                  var id=$("#confirm-request-id").val();
                  var requestName=$("#confirm-request-name").val().trim();
                  var requestDesc=$("#confirm-request-desc").val().trim();
                  if(requestName==""){
                    alert("输入不能为空");
                  }
                  $.ajax({
                    url: baseURL+'/api/datacrawling/request/'+id,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                      requestName: requestName,
                      requestDesc:requestDesc
                    }
                  })
                  .done(function(data) {
                    console.log("success");
                    if(data['errno']!=0){
                      alert("服务器错误");
                    }else{
                      alert("修改成功");
                      $("#edit-request .return-btn").click();
                    }
                  })
                  .fail(function() {
                    console.log("error");
                  })
                  .always(function() {
                    console.log("complete");
                  });
                }
              });
              validator.resetForm();
            })
            .fail(function() {
              console.log("error");
            })
            .always(function() {
              console.log("complete");
            });
          });
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

    });
 

下面我们分段来看：

首先看一看change button的设置：

注意其中需要根据id发GET请求来找到当前条的数据，然后填充到等待修改的active表格之中。

每一次使用on方法之前要调用off()方法进行解除绑定。

remove和add分别是删除一个块，激活一个块。