關於修改功能的實現

相應的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分別是刪除一個塊，激活一個塊。