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


Posted in Javascript onSeptember 15, 2015

不想用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();
}
Javascript 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
You might like
php自动注册登录验证机制实现代码
2011/12/20 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
AngularJS入门之动画
2016/07/27 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
星球大战与Python之间的那些事
2016/01/07 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
深入学习python多线程与GIL
2019/08/26 Python
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
战略合作意向书范本
2014/04/01 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
写给同事的离职感言
2015/08/04 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
pytest配置文件pytest.ini的详细使用
2021/04/17 Python