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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
javascript中的事件代理初探
Mar 08 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php5.3 注意事项说明
2013/07/01 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
一文读懂Python 枚举
2020/08/25 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
单位工作证明范文
2014/09/14 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
大学班长竞选稿
2015/11/20 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python