jquery通过AJAX从后台获取信息并显示在表格上的实现类

 更新时间:2015年09月22日 09:25:11   作者:随缘py  
今天小编抽给时间把jquery通过AJAX从后台获取信息并显示在表格上的实现类,单独写出来,这样程序员,不需要每次写代码了,可以节省大量的时间,感兴趣的朋友一起来看看吧

在上篇文章给大家介绍了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>

以上代码简单易懂,jquery通过AJAX从后台获取信息并显示在表格上的实现类就这样完成了,希望大家喜欢。

相关文章

  • ajax与传统web开发的异同点

    ajax与传统web开发的异同点

    本文给大家介绍ajax与传统web开发的异同点,涉及到ajax、web方面的知识,感兴趣的朋友跟着小编一起学习吧
    2015-10-10
  • ASP+AJAX+ACCESS数据库实例讲解三个步骤分享

    ASP+AJAX+ACCESS数据库实例讲解三个步骤分享

    其实说起AJAX的初级应用是非常简单的,通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互
    2012-07-07
  • 用ajax自动加载blogjava和博客园的rss

    用ajax自动加载blogjava和博客园的rss

    用ajax自动加载blogjava和博客园的rss...
    2007-03-03
  • ajax返回object Object的快速解决方法

    ajax返回object Object的快速解决方法

    下面小编就为大家带来一篇ajax返回object Object的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 浅谈AJAX开发技术

    浅谈AJAX开发技术

    本文简单介绍了下ajax的概念历史以及XMLHttpRequest对象的属性、XMLHttpRequest对象的方法和AJAX封装后的代码,十分不错,这里推荐给小伙伴们。
    2015-02-02
  • 解决浏览器记住ajax请求并能前进和后退问题

    解决浏览器记住ajax请求并能前进和后退问题

    在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这篇文章主要介绍了让浏览器记住ajax请求并能前进和后退方法(一),需要的朋友可以参考下
    2017-06-06
  • 自己动手打造ajax图片上传(网上没有的)

    自己动手打造ajax图片上传(网上没有的)

    需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个,需要的朋友可以参考下
    2014-06-06
  • Ajax学习笔记整理

    Ajax学习笔记整理

    Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
    2016-01-01
  • Ajax对缓存的处理方法实例分析

    Ajax对缓存的处理方法实例分析

    这篇文章主要介绍了Ajax对缓存的处理方法,简单描述了缓存的功能,并结合实例形式分析了禁止浏览器对动态程序文件缓存的实现方法,需要的朋友可以参考下
    2019-07-07
  • ContentType控制输出的类型是否区分大小写

    ContentType控制输出的类型是否区分大小写

    ContentType控制着web输出的类型,但是否区分大小写呢?经测试ContentType是区分大小写的,有疑问的朋友可以参考下本文
    2014-05-05

最新评论