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

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

代码:

functionGetMultiLineSelectTable(tableId, selectIds) {vartable =$(tableId);varurl = table.data('url');varischeckbox =false;//获取数据项名称varfileds =newArray();

table.children('thead').children('tr').children('th').each(function(index, el) {vartype = 'Content';if($(this).data('type')) type = $(this).data('type');if(type == 'Content') {varfield = $(this).data('field');

fileds[index]=field;

}elseif(type == 'CheckBox') {

ischeckbox=true;

}

});

$.Ajax({

url: url,

type:'post',

dataType:'json',

})

.done(function(json) {//向表格内新增内容vartbody = '';

$.each(json,function(index, el) {vartr = "<tr>";if(ischeckbox) {//生成复选按钮//tr+='<td><div class="checker"><span><input class="checkboxes" type="checkbox"></span></div></td>'tr += '<td><input type="checkbox"></td>'}

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

tr+= '<td>' + formatJsonData(json[index][fileds[i]]) + '</td>';

}

});

tr+= "</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数据,比如日期functionformatJsonData(jsondata){if(jsondata==null){return'';

}elseif(/\/Date\(\d+\)/.exec(jsondata)){vardate =newDate(parseInt(jsondata.replace("/Date(", "").replace(")/", ""), 10));returndate.toLocaleString();

}returnjsondata;

}

用法:

<tableclass="table"id="GroupTable"data-url="@Url.Action("GetRoleGroups", "Account")"><thead><tr><thdata-type="CheckBox"></th><thdata-field="ID">ID</th><thdata-field="Name">名称</th><thdata-field="Remark">简介</th></tr></thead><tbody></tbody></table><script>jQuery(document).ready(function($) {

GetMultiLineSelectTable("#GroupTable");

});</script>

<thdata-type="CheckBox"></th>代表需要显示复选框,不想要复选框直接删掉就行了

获取选中的行ID:

functionGetGroupTableSelectIds(){varselects=$('#GroupTable').children('tbody').children('tr.active');varids=newArray();

selects.each(function(index, el) {

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

});returnids;

}

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航