代码:
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;
}