代码:
- 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 = "<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数据,比如日期
- 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;
- }
用法:
- <table class="table" id="GroupTable" data-url="@Url.Action("GetRoleGroups", "Account")">
- <thead>
- <tr>
- <th data-type="CheckBox"></th>
- <th data-field="ID">ID</th>
- <th data-field="Name">名称</th>
- <th data-field="Remark">简介</th>
- </tr>
- </thead>
- <tbody></tbody>
- </table>
- <script>
- jQuery(document).ready(function ($) {
- GetMultiLineSelectTable("#GroupTable");
- });
- </script>
<th data-type="CheckBox"></th>代表需要显示复选框,不想要复选框直接删掉就行了
获取选中的行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;
- }
百度搜索“就爱阅读”,专业资料,生活学习,尽在就爱阅读网92to.com,您的在线图书馆!
来源: http://www.92to.com/bangong/2017/09-22/28897029.html