jquery通過AJAX從后臺獲取信息并顯示在表格上的類

2024-04-27 15:01:28

字體：大中小

來源：轉載

供稿：網友

前一陣我寫了：《jquery通過Ajax從后臺獲取信息并顯示在表格上，并支持行選中。》現在，我把他們處理了一下，不需要每次寫代碼了：

具體代碼如下：

//獲取數據并顯示數據表格function GetTableData(tableId,ChlickEvent) {    var table = $(tableId);    var url=table.data('url');    $.ajax({        url: url,        type: 'post',        dataType: 'json',    })    .done(function (json) {        var fileds = new Array();        table.children('thead').children('tr').children('th').each(function (index, el) {            var field = $(this).data('field');            fileds[index] = field;        });        var tbody = '';        $.each(json, function (index, el) {            var tr = "<tr>";            $.each(fileds, function (i, el) {                if (fileds[i]) {                    tr += '<td>' + formatJsonData(json[index][fileds[i]]) + '</td>';                }            });            tr += "</tr>";            tbody += tr;        });        table.children('tbody').append(tbody);        if (ChlickEvent) {//如果需要支持行選中事件            table.children('tbody').addClass('sel');            table.children('tbody.sel').children('tr').click(function (event) {                $(this).siblings('tr').removeClass('active');//刪除其他行的選中效果                $(this).addClass('active');//增加選中效果                ChlickEvent($(this).children('td:eq(0)').text());//新增點擊事件            });        }    }).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;}

寫的非常簡單，功能也很少，但是我自己用暫時足夠了。滿足簡單需求。

HTML代碼必須以下格式，必須以POST方式獲取JSON數據，獲取地址寫到data-url里，數據列名寫到data-field里。

支持點擊事件。

用法：

<table id="RoleGroupTable" class="table" data-url="@Url.Action("GetRoleGroups", "Account")">  <thead>    <tr>      <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 ($) {    GetTableData('#RoleGroupTable', function (id) {      alert(id)    });  });</script>