首頁 > web前端 > js教程 > jQuery實作與GridView類似的功能實例

jQuery實作與GridView類似的功能實例

小云云
發布: 2018-01-22 13:57:04
原創
2039 人瀏覽過

本文主要和大家分享jQuery實現一個類似GridView的編輯,更新,取消和刪除的功能,在專案中遇到這樣的需求當用戶點擊編輯時,在點擊行下動態產生一行,編輯銨鈕扣為disabled,新產生的一行有更新和取消的銨鈕,點選「取消」銨鈕,刪除剛剛動態產生的行,編輯銨鈕狀態恢復。下面小編給大家分享實例程式碼,一起看看吧。

先來看看下面即時效果示範:

#使用者點擊編輯時,在點擊行下動態產生一行。編輯銨鈕變成disabled。

新產生的一行有更新和取消的銨鈕,點選「取消」銨鈕,刪除剛剛動態產生的行。編輯銨鈕狀態恢復。

更新與刪除銨鈕功能沒有什麼特別的。

 在ASP.NET MVC視圖html程式碼如下,普通的表格table,普通的html標籤:

刪除的銨鈕功能:


$('.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;
    });
登入後複製

編輯的銨鈕功能,需要動態產生一新行。處理每個欄位的html的標籤:


$('.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");
    });
登入後複製

更新銨鈕功能:


#
$(&#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();
    });
登入後複製

大家學會了嗎?覺得有用的趕快收藏起來吧。

相關推薦:

使用bootstrap modal+gridview彈出框效果實作實例教學

##實作GridView自動捲動的功能

如何實作DataGridView的新增刪除修改?


#

以上是jQuery實作與GridView類似的功能實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板