jQuery implements functional examples similar to GridView

This article mainly shares with you jQuery to implement a GridView-like editing, updating, canceling and deleting function. In the project, we encountered such a requirement. When the user clicks edit, a row is dynamically generated under the clicked row, and the edit button changes. If it is disabled, the newly generated row has update and cancel buttons. Click the "Cancel" button to delete the dynamically generated row and restore the edit button status. The editor will share the example code with you below, let’s take a look.

Let’s first take a look at the following real-time effect demonstration:

When the user clicks edit, a row is dynamically generated under the clicked row. The edit button becomes disabled.

The newly generated row has update and cancel buttons. Click the "Cancel" button to delete the dynamically generated row. Edit button status restored.

There is nothing special about the update and delete button functions.

The ASP.NET MVC view html code is as follows, ordinary table table, ordinary html tag:

Deleted button function:

$('.Delete').click(function () {
      var flag = confirm('你确认是否删除记录？');
      if (flag) {
        var tr = $(this).closest('tr');
        var obj = {};
        obj.Ltc_nbr = tr.find('.SelectSingle').val();
        $.ajax({
          type: 'POST',
          url: "/Highway/LandTransportationCityDelete",
          dataType: 'json',
          data: JSON.stringify(obj),
          contentType: 'application/json; charset=utf-8',
          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;
    });

The edit button function needs to dynamically generate a new line. Process the html tags of each field:

##

$('.Edit').click(function (e) {
      var tr = $(this).closest('tr')
      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");
    });

Update the button function:

$('table.city-list').delegate('.Update', 'click', function (event) {
      var tr = $(this).closest("tr");
      var obj = {};
      obj.Ltc_nbr = tr.find('.city_key').val();
      obj.City_nbr = tr.find('.selectcity').val();
      obj.IsActived = tr.find('.ckbIsActived').is(':checked');
      $.ajax({
        type: 'POST',
        url: "/Highway/LandTransportationCityUpdate",
        dataType: 'json',
        data: JSON.stringify(obj),
        contentType: 'application/json; charset=utf-8',
        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);
        }
      });
    });

There is also a function to cancel the ammonium button:

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

Have you all learned it? ? Collect it if you find it useful.

Related recommendations:

Using bootstrap modal+gridview pop-up box effect to implement an example tutorial

Realizing the automatic scrolling function of GridView

How to implement addition, deletion and modification of DataGridView?

The above is the detailed content of jQuery implements functional examples similar to GridView. For more information, please follow other related articles on the PHP Chinese website!