JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中
更新時間：2015年09月15日 17:53:59 投稿：mrr
這篇文章主要介紹了JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下
不想用Easyui的樣式，但是想要他的表格功能，本來一開始是要到網(wǎng)上找相關(guān)插件的，但是沒找到就開始自己寫，沒想到這么簡單。
后臺代碼：（這個不重要）
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>標(biāo)題</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 ajax請求導(dǎo)出Excel表格的實現(xiàn)代碼
- JQuery Ajax動態(tài)生成Table表格
- jquery通過AJAX從后臺獲取信息并顯示在表格上的實現(xiàn)類
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實現(xiàn)方法
- 用Jquery實現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- jQuery DataTables插件自定義Ajax分頁實例解析
- jQuery ajax動態(tài)生成table功能示例
- jQuery+ajax實現(xiàn)動態(tài)添加表格tr td功能示例
相關(guān)文章
本文主要是給大家分享了一則使用EasyUI實現(xiàn)同步樹的代碼，主要是使用遞歸實現(xiàn)，非常實用的方法，推薦給小伙伴們。2015-03-03
jQuery的實現(xiàn)原理的模擬代碼 -5 Ajax
對于 xhr 對象來說，我們主要通過異步方式訪問服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡單的 xhr 使用如下所示。2010-08-08
jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果,通過jQuery模擬select下拉選擇效果,并具有點擊選中下拉項進(jìn)入輸入框的功能,非常美觀實用,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jQuery toggle 代替方法 的相關(guān)資料,需要的朋友可以參考下2016-03-03
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下2013-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery層級選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在使用discuzx中有一個Message以及Dialog方法來顯示信息對話框。今天寫項目的時候，需要一個信息對話框，所以就著手利用lightbox_me插件來寫一個做備用。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)手風(fēng)琴展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
jquery實現(xiàn)漂浮在網(wǎng)頁右側(cè)的qq在線客服插件示例
很實用的一款QQ在線客服代碼，點擊QQ圖標(biāo)，可直接與客服對話，詳細(xì)如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
這篇文章主要介紹了jQuery中map()方法用法,實例分析了map()方法的功能、定義及轉(zhuǎn)換數(shù)組的使用技巧,需要的朋友可以參考下2015-01-01