AJAX를 통해 백그라운드에서 정보를 얻어 테이블에 표시하는 jquery 구현 클래스

AJAX를 통해 백그라운드에서 정보를 얻어 테이블에 표시하는 jquery의 구현 클래스가 별도로 작성되어 있어 프로그래머가 매번 코드를 작성할 필요가 없고 관심 있는 친구들은 시간을 많이 절약할 수 있습니다. 함께 보세요

지난 글에서는 AJAX를 통해 백그라운드에서 정보를 얻어와 테이블에 표시하고 행 선택을 지원하는 JQuery를 소개했습니다. 이제 처리할 필요가 없도록 시간을 좀 투자해 보겠습니다. 매번 코드를 작성하면 많은 시간을 절약할 수 있습니다. 자세한 내용은 아래를 참조하세요.

구체적인 코드는 다음과 같습니다.

//获取数据并显示数据表格
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 += &#39;<td>&#39; + formatJsonData(json[index][fileds[i]]) + &#39;</td>&#39;;
    }
   });
   tr += "</tr>";
   tbody += tr;
  });
  table.children(&#39;tbody&#39;).append(tbody);
  if (ChlickEvent) {//如果需要支持行选中事件
   table.children(&#39;tbody&#39;).addClass(&#39;sel&#39;);
   table.children(&#39;tbody.sel&#39;).children(&#39;tr&#39;).click(function (event) {
    $(this).siblings(&#39;tr&#39;).removeClass(&#39;active&#39;);//删除其他行的选中效果
    $(this).addClass(&#39;active&#39;);//增加选中效果
    ChlickEvent($(this).children(&#39;td:eq(0)&#39;).text());//新增点击事件
   });
  }
 }).fail(function () {
  alert("Err");
 });
}
//格式化JSON数据，比如日期
function formatJsonData(jsondata){
 if(jsondata==null){
  return &#39;无数据&#39;;
 }
 else if(/\/Date\(\d+\)/.exec(jsondata)){
  var date = new Date(parseInt(jsondata.replace("/Date(", "").replace(")/", ""), 10));
  return date.toLocaleString();
 }
 return jsondata;
}

작성도 매우 간단하고 기능도 적지만 제가 직접 사용하기에는 충분합니다. 당분간. 간단한 요구사항을 충족하세요.

HTML 코드는 반드시 POST를 통해 얻어야 하는 형식이어야 하며, 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(&#39;#RoleGroupTable&#39;, function (id) {
  alert(id)
 });
 });
</script>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JQuery Ajax는 동적으로 테이블을 생성합니다

Asp.net MVC에서 Ajax 사용에 대한 간략한 분석

h5 ajax를 기반으로 휴대폰 위치 인식 실현

위 내용은 AJAX를 통해 백그라운드에서 정보를 얻어 테이블에 표시하는 jquery 구현 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!