JQuery通过AJAX从后台获取信息显示在表格上并支持行选中

 更新时间:2015年09月15日 17:53:59   投稿:mrr  
这篇文章主要介绍了JQuery通过AJAX从后台获取信息显示在表格上并支持行选中的相关资料,需要的朋友可以参考下

不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单。

后台代码:(这个不重要)

public ActionResult GetDictTypes()
{
  var data = from a in dbo.DictTypes
        select new DictTypeListViewModel
        {
          ID = a.ID,
          Name = a.Name,
          LastChangeUser = a.LastChangeUser,
          LastChangeDate = a.LastChangeDate,
          Remark = a.Remark
        };
  return Json(data.ToList());
}

页面代码:

<table class="table" id="DictTypeTable">
 <thead>
  <tr>
   <th>ID</th>
   <th>标题</th>
   <th>简介</th>
  </tr>
 </thead>
 <tbody class="sel"></tbody>
</table>

javascript代码:(需要在 $(document).ready(function ($){ } 里调用)

function ShowDictType() {
  $('#DictTypeTable').children('tbody').empty();
  $.ajax({
    url: GetDictTypes_URL,
    type: 'post',
    dataType: 'json'
  })
   .done(function (data) {
     var tbody = "";
     $.each(data, function (index, el) {
       var tr = "<tr>";
       tr += "<td>" + el.ID + "</td>";
       tr += "<td>" + el.Name + "</td>";
       tr += "<td>" + el.Remark + "</td>";
       tr += "</tr>";
       tbody += tr;
     });
     $('#DictTypeTable').children('tbody').append(tbody);
     BindDictTypeTableEvent();//这里是绑定事件
   })
   .fail(function () {
     alert("Err");
   });
}

要在表格生成之后再绑定事件:

function BindDictTypeTableEvent() {
  $('#DictTypeTable tbody.sel').children('tr').click(function (event) {
    $(this).siblings('tr').removeClass('active');//删除其他行的选中效果
    $(this).addClass('active');//增加选中效果
    var id = $(this).children('td:eq(0)').text();//获取ID
    ShowDictData(id);//操作代码,这里是显示另一个表格数据
  });
}

最后这里是获取选中条目ID的代码:

function GetTypeTableSelectId() {
  return $('#DictTypeTable tbody.sel tr.active td:eq(0)').text();
}

相关文章

  • jquery中EasyUI实现同步树

    jquery中EasyUI实现同步树

    本文主要是给大家分享了一则使用EasyUI实现同步树的代码,主要是使用递归实现,非常实用的方法,推荐给小伙伴们。
    2015-03-03
  • jQuery的实现原理的模拟代码 -5 Ajax

    jQuery的实现原理的模拟代码 -5 Ajax

    对于 xhr 对象来说,我们主要通过异步方式访问服务器,在 onreadystatechange 事件中处理服务器回应的内容。简单的 xhr 使用如下所示。
    2010-08-08
  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    jQuery实现非常实用漂亮的select下拉菜单选择效果

    这篇文章主要介绍了jQuery实现非常实用漂亮的select下拉菜单选择效果,通过jQuery模拟select下拉选择效果,并具有点击选中下拉项进入输入框的功能,非常美观实用,需要的朋友可以参考下
    2015-11-11
  • jQuery toggle 代替方法

    jQuery toggle 代替方法

    这篇文章主要介绍了jQuery toggle 代替方法 的相关资料,需要的朋友可以参考下
    2016-03-03
  • jquery中文乱码的多种解决方法

    jquery中文乱码的多种解决方法

    jquery中文乱码的多种解决方法,需要的朋友可以参考一下
    2013-06-06
  • jQuery层级选择器实例代码

    jQuery层级选择器实例代码

    这篇文章主要为大家详细介绍了jQuery层级选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery弹出层插件Lightbox_me使用指南

    jQuery弹出层插件Lightbox_me使用指南

    在使用discuzx中有一个Message以及Dialog方法来显示信息对话框。今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用。
    2015-04-04
  • jquery实现手风琴展开效果

    jquery实现手风琴展开效果

    这篇文章主要为大家详细介绍了jquery实现手风琴展开效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • jquery实现漂浮在网页右侧的qq在线客服插件示例

    jquery实现漂浮在网页右侧的qq在线客服插件示例

    很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话,详细如下,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-05-05
  • jQuery中map()方法用法实例

    jQuery中map()方法用法实例

    这篇文章主要介绍了jQuery中map()方法用法,实例分析了map()方法的功能、定义及转换数组的使用技巧,需要的朋友可以参考下
    2015-01-01

最新评论