JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中

更新時間：2015年09月15日 17:53:59 投稿：mrr

這篇文章主要介紹了JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中的相關資料,需要的朋友可以參考下

不想用Easyui的樣式，但是想要他的表格功能，本來一開始是要到網(wǎng)上找相關插件的，但是沒找到就開始自己寫，沒想到這么簡單。

后臺代碼：（這個不重要）

public ActionResult GetDictTypes()
{
  var data = from a in dbo.DictTypes
        select new DictTypeListViewModel
        {
          ID = a.ID,
          Name = a.Name,
          LastChangeUser = a.LastChangeUser,
          LastChangeDate = a.LastChangeDate,
          Remark = a.Remark
        };
  return Json(data.ToList());
}

頁面代碼：

<table class="table" id="DictTypeTable">
 <thead>
  <tr>
   <th>ID</th>
   <th>標題</th>
   <th>簡介</th>
  </tr>
 </thead>
 <tbody class="sel"></tbody>
</table>

javascript代碼：（需要在 $(document).ready(function ($){ } 里調(diào)用）

function ShowDictType() {
  $('#DictTypeTable').children('tbody').empty();
  $.ajax({
    url: GetDictTypes_URL,
    type: 'post',
    dataType: 'json'
  })
   .done(function (data) {
     var tbody = "";
     $.each(data, function (index, el) {
       var tr = "<tr>";
       tr += "<td>" + el.ID + "</td>";
       tr += "<td>" + el.Name + "</td>";
       tr += "<td>" + el.Remark + "</td>";
       tr += "</tr>";
       tbody += tr;
     });
     $('#DictTypeTable').children('tbody').append(tbody);
     BindDictTypeTableEvent();//這里是綁定事件
   })
   .fail(function () {
     alert("Err");
   });
}

要在表格生成之后再綁定事件：

function BindDictTypeTableEvent() {
  $('#DictTypeTable tbody.sel').children('tr').click(function (event) {
    $(this).siblings('tr').removeClass('active');//刪除其他行的選中效果
    $(this).addClass('active');//增加選中效果
    var id = $(this).children('td:eq(0)').text();//獲取ID
    ShowDictData(id);//操作代碼，這里是顯示另一個表格數(shù)據(jù)
  });
}

最后這里是獲取選中條目ID的代碼：

function GetTypeTableSelectId() {
  return $('#DictTypeTable tbody.sel tr.active td:eq(0)').text();
}

您可能感興趣的文章:

jquery中EasyUI實現(xiàn)同步樹
本文主要是給大家分享了一則使用EasyUI實現(xiàn)同步樹的代碼，主要是使用遞歸實現(xiàn)，非常實用的方法，推薦給小伙伴們。
2015-03-03
jQuery的實現(xiàn)原理的模擬代碼 -5 Ajax
對于 xhr 對象來說，我們主要通過異步方式訪問服務器，在 onreadystatechange 事件中處理服務器回應的內(nèi)容。簡單的 xhr 使用如下所示。
2010-08-08
jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果,通過jQuery模擬select下拉選擇效果,并具有點擊選中下拉項進入輸入框的功能,非常美觀實用,需要的朋友可以參考下
2015-11-11
jQuery toggle 代替方法
這篇文章主要介紹了jQuery toggle 代替方法的相關資料,需要的朋友可以參考下
2016-03-03
jquery中文亂碼的多種解決方法
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下
2013-06-06
jQuery層級選擇器實例代碼
這篇文章主要為大家詳細介紹了jQuery層級選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery彈出層插件Lightbox_me使用指南
在使用discuzx中有一個Message以及Dialog方法來顯示信息對話框。今天寫項目的時候，需要一個信息對話框，所以就著手利用lightbox_me插件來寫一個做備用。
2015-04-04
jquery實現(xiàn)手風琴展開效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)手風琴展開效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
jquery實現(xiàn)漂浮在網(wǎng)頁右側(cè)的qq在線客服插件示例
很實用的一款QQ在線客服代碼，點擊QQ圖標，可直接與客服對話，詳細如下，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-05-05
jQuery中map()方法用法實例
這篇文章主要介紹了jQuery中map()方法用法,實例分析了map()方法的功能、定義及轉(zhuǎn)換數(shù)組的使用技巧,需要的朋友可以參考下
2015-01-01