js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...

不想用Easyui的样式，但是想要他的表格功能，本来一开始是要到网上找相关插件的，但是没找到就开始自己写，没想到这么简单。

后台代码：(这个不重要)

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());

}

页面代码：

ID标题简介

javascript代码：(需要在 $(document).ready(function ($){ } 里调用)

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 += "

" + el.ID + "";

tr += "

" + el.Name + "";

tr += "

" + el.Remark + "";

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);//操作代码，这里是显示另一个表格数据

});

}

最后这里是获取选中条目ID的代码：

function GetTypeTableSelectId() {

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

}

UPDATE in 2015-9-21

jquery通过AJAX从后台获取信息并显示在表格上的类

前一阵我写了:现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

Jquery通过AJAX从后台获取数据显示在表格上(复选)

代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...

jsTree通过AJAX从后台获取数据

页面代码:

jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

原生js，jquery通过ajax获得后台json数据动态新增页面元素

一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

Asp.net中JQuery、ajax调用后台方法总结

通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

使用JSONP，jQuery的ajax跨域获取json数据

网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

MSClass 和setInterval 的并发，ajax定时有采集信息滚动显示

setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. //****************************************** 项目中引用到jquer ...

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

随机推荐

【Android群英传】学习笔记(二)

在本篇笔记中,小编将记录关于Android Studio使用过程的小技巧 在下面文章为Android Studio 简称As ① 使用Android Studio第一次创建项目等待时间很长? 原因: ...

msdn webcast 下载地址整理

http://blog.youkuaiyun.com/he_8134/article/details/2069194

Unity State Machine

https://unity3d.com/learn/tutorials/modules/beginner/5-pre-order-beta/state-machine-behaviours http: ...

private、 protected、 public、 internal 修饰符

private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部和继承类中可以访问. public : 公共成员,完全公开,没有访问限制. internal: 在同一 ...

18、ESC/POS指令集在android设备上使用实例(通过socket)

网上关于通过android来操作打印机的例子太少了,为了方便更多的开发同仁,将近日所学分享一下. 我这边是通过android设备通过无线来对打印机(佳博58mm热敏式-58130iC)操作,实现餐厅小 ...

利用Hessian如何实现Webservice

利用Hessian如何实现Webservice [大] [中] [小] 发布人:圣才学习网  发布日期:2012-08-18 14:02  共966人浏览 Hessian是 一个轻量级的remotin ...

UESTC_Frozen Rose-Heads CDOJ 791

The winter is coming and all the experts are warning that it will be the coldest one in the last hun ...

qualcomm 查看 wifi 配置生效

iwpriv wlan0 getConfig 然后收集dmesg, 或者执行这条命令: dmesg | grep gEnableBmps

CTF-练习平台-Misc之 Telent

三.Telent 下载下来文件,解压压缩包,用记事本打开pcap文件,发现flag

Linux 防火墙设置(转)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...