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

代码:

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 ($) { ...