首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:01:31
字体:
来源:转载
供稿:网友

代码:

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;}

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表