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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
详解react-redux插件入门
2018/04/19 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python切片知识解析
2016/03/06 Python
Python之re操作方法(详解)
2017/06/14 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书