jQuery는 GridView와 유사한 기능적 예제를 구현합니다.-JS 튜토리얼-php.cn

jQuery는 GridView와 유사한 기능적 예제를 구현합니다.

小云云

풀어 주다： 2018-01-22 13:57:04

원래의

2053명이 탐색했습니다.

이 글에서는 프로젝트에서 이러한 요구 사항이 발생할 때 GridView와 같은 편집, 업데이트, 취소 및 삭제 기능을 구현하기 위해 jQuery를 주로 공유합니다. 사용자가 편집을 클릭하면 클릭한 행 아래에 행이 동적으로 생성되고 편집 버튼이 비활성화됩니다. 새로 생성된 행에 업데이트 및 취소 버튼이 포함되어 동적으로 생성된 행을 삭제하고 편집 버튼 상태를 복원합니다. 편집자는 아래 예제 코드를 여러분과 공유할 것입니다. 살펴보겠습니다.

먼저 아래 실시간 효과 시연을 살펴보겠습니다.

사용자가 편집을 클릭하면 클릭한 행 아래에 행이 동적으로 생성됩니다. 편집 버튼이 비활성화됩니다.

새로 생성된 행에는 업데이트 및 취소 버튼이 있습니다. 동적으로 생성된 행을 삭제하려면 "취소" 버튼을 클릭하세요. 수정 버튼 상태가 복원되었습니다.

업데이트, 삭제 버튼 기능에는 특별한 것이 없습니다.

ASP.NET MVC 뷰의 html 코드는 다음과 같습니다. 일반 테이블, 일반 html 태그:

삭제된 버튼 기능:

$(&#39;.Delete&#39;).click(function () {
      var flag = confirm(&#39;你确认是否删除记录？&#39;);
      if (flag) {
        var tr = $(this).closest(&#39;tr&#39;);
        var obj = {};
        obj.Ltc_nbr = tr.find(&#39;.SelectSingle&#39;).val();
        $.ajax({
          type: &#39;POST&#39;,
          url: "/Highway/LandTransportationCityDelete",
          dataType: &#39;json&#39;,
          data: JSON.stringify(obj),
          contentType: &#39;application/json; charset=utf-8&#39;,
          success: function (data, textStatus) {
            if (data.Success) {
              window.location.href = data.RedirectUrl;
            }
            else {
              alert(data.ExceptionMessage);
              return;
            }
          },
          error: function (xhr, status, error) {
            alert("An error occurred: " + status + "nError: " + error);
          }
        });
      }
      return false;
    });

로그인 후 복사

편집된 버튼 기능은 동적이어야 합니다. 새로운 라인. 각 필드의 html 태그 처리:

$(&#39;.Edit&#39;).click(function (e) {
      var tr = $(this).closest(&#39;tr&#39;)
      var row = $(&#39;<tr>&#39;);
      row.append($(&#39;<td><input class="city_key" type="hidden" value="&#39; + tr.find(&#39;.SelectSingle&#39;).val() + &#39;" /></td>&#39;));
      row.append($(&#39;<td></td>&#39;));
      $selectCity = $(&#39;<select />&#39;).attr({ name: &#39;city&#39;, class: &#39;selectcity&#39; });
      $("<option></option>", { value: "", text: "" }).appendTo($selectCity);
      $.getJSON("/Highway/GetCities", function (data) {
        $.each(data, function (i, item) {
          if (item.City_nbr == tr.find(&#39;.city_key&#39;).val()) {
            $("<option></option>", { value: item.City_nbr, text: item.City_Name,selected :"selected" }).appendTo($selectCity);
          }
          else {
            $("<option></option>", { value: item.City_nbr, text: item.City_Name}).appendTo($selectCity);
          }
        })
      });
      row.append($(&#39;<td></td>&#39;).append($selectCity));
      row.append($(&#39;<td></td>&#39;));
      row.append($(&#39;<td></td>&#39;));
      row.append($(&#39;<td></td>&#39;));
      $cb = $(&#39;<input/>&#39;).attr({ type: &#39;checkbox&#39;, class: &#39;ckbIsActived&#39;, checked: tr.find(&#39;.ckbIsActived&#39;).is(&#39;:checked&#39;) == true ? &#39;true&#39; : &#39;&#39; });
      row.append($(&#39;<td></td>&#39;).append($cb));
      var $btnUpdate = $(&#39;<input/>&#39;).attr({ type: &#39;button&#39;, class: &#39;Update&#39;, value: &#39;更新&#39; });
      row.append($(&#39;<td style="width:40px;"></td>&#39;).append($btnUpdate));
      var $btnCancel = $(&#39;<input/>&#39;).attr({ type: &#39;button&#39;, class: &#39;Cancel&#39;, value: &#39;取消&#39; });
      row.append($(&#39;<td style="width:40px;"></td>&#39;).append($btnCancel));
      tr.after(row);
      $(this).attr("disabled", "disabled");
    });

로그인 후 복사

업데이트 버튼 기능:

$(&#39;table.city-list&#39;).delegate(&#39;.Update&#39;, &#39;click&#39;, function (event) {
      var tr = $(this).closest("tr");
      var obj = {};
      obj.Ltc_nbr = tr.find(&#39;.city_key&#39;).val();
      obj.City_nbr = tr.find(&#39;.selectcity&#39;).val();
      obj.IsActived = tr.find(&#39;.ckbIsActived&#39;).is(&#39;:checked&#39;);
      $.ajax({
        type: &#39;POST&#39;,
        url: "/Highway/LandTransportationCityUpdate",
        dataType: &#39;json&#39;,
        data: JSON.stringify(obj),
        contentType: &#39;application/json; charset=utf-8&#39;,
        success: function (data, textStatus) {
          if (data.Success) {
            alert("陆运城市更新成功。");
            window.location.href = data.RedirectUrl;
          }
          else {
            alert(data.ExceptionMessage);
            return;
          }
        },
        error: function (xhr, status, error) {
          alert("An error occurred: " + status + "nError: " + error);
        }
      });
    });

로그인 후 복사

취소 버튼 기능도 있습니다:

$(&#39;table.city-list&#39;).delegate(&#39;.Cancel&#39;, &#39;click&#39;, function (event) {
      var tr = $(this).closest("tr");
      tr.prev().find(&#39;.Edit&#39;).removeAttr(&#39;disabled&#39;);
      tr.remove();
    });

로그인 후 복사

누구나 이미 배우고 있어요 ? 유용하다고 생각되면 수집해 보세요.