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

该博客介绍了一个JavaScript函数,用于使用jQuery的AJAX功能从服务器获取数据,并将其动态添加到HTML表格中。函数支持包含复选框的表格,并提供了格式化JSON数据的方法。示例代码展示了如何在页面加载时调用此函数以及如何获取选中行的ID。博客还讨论了如何处理AJAX请求的错误情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码:

function GetMultiLineSelectTable(tableId, selectIds) {

var table = $(tableId);

var url = table.data('url');

var ischeckbox = false;

//获取数据项名称

var fileds = new Array();

table.children('thead').children('tr').children('th').each(function (index, el) {

var type = 'Content';

if ($(this).data('type')) type = $(this).data('type');

if (type == 'Content') {

var field = $(this).data('field');

fileds[index] = field;

}

else if (type == 'CheckBox') {

ischeckbox = true;

}

});

$.ajax({

url: url,

type: 'post',

dataType: 'json',

})

.done(function (json) {

//向表格内新增内容

var tbody = '';

$.each(json, function (index, el) {

var tr = "

";

if (ischeckbox) {//生成复选按钮

//tr+='

'

tr += '

'

}

$.each(fileds, function (i, el) {//生成内容

if (fileds[i]) {

tr += '

' + formatJsonData(json[index][fileds[i]]) + '';

}

});

tr += "

";

tbody += tr;

});

table.children('tbody').empty();

table.children('tbody').append(tbody);//显示数据

if (selectIds) {//将需要选中的行设为选中状态

selectIds.each(function (index, el) {

//建设中

});

}

table.children('tbody').addClass('sel');

table.children('tbody.sel').children('tr').click(function (event) {//点击行事件

$(this).toggleClass('active');//增加选中效果

if (ischeckbox) $(this).find('input[type="checkbox"]').attr('checked', $(this).hasClass('active'));//选择复选框

});

}).fail(function () {

alert("Err");

});

}

//格式化JSON数据,比如日期

function formatJsonData(jsondata){

if(jsondata==null){

return '';

}

else if(/\/Date\(\d+\)/.exec(jsondata)){

var date = new Date(parseInt(jsondata.replace("/Date(", "").replace(")/", ""), 10));

return date.toLocaleString();

}

return jsondata;

}

用法:

ID名称简介

jQuery(document).ready(function ($) {

GetMultiLineSelectTable("#GroupTable");

});

代表需要显示复选框,不想要复选框直接删掉就行了

获取选中的行ID:

function GetGroupTableSelectIds(){

var selects=$('#GroupTable').children('tbody').children('tr.active');

var ids=new Array();

selects.each(function(index, el) {

ids[index]=el.cells[1].innerHTML;

});

return ids;

}

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

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

jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中

不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

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

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

jquery如何通过ajax请求获取后台数据显示在表格上

1.引入bootstrap和jquery的cdn

javascript代码: $(document).ready(function ($) { ...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值