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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
thinkPHP模板引擎用法示例
2016/12/08 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Python中的ConfigParser模块使用详解
2015/05/04 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python之用户输入的实例
2018/06/22 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
python主要用于哪些方向
2020/07/05 Python
python绘制高斯曲线
2021/02/19 Python
C面试题
2015/10/08 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
小区门卫值班制度
2014/01/24 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
班级标语大全
2014/06/21 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
社区活动总结范文
2015/05/07 职场文书
元旦晚会开场白
2015/05/29 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Python使用永中文档转换服务
2022/05/06 Python