代码:

function GetMultiLineSelectTable(tableId, selectIds) {
var table = $(tableId);
var url = table.data('url');
var ischeckbox = false;
//获取数据项名称
var fileds = new Array();
table.children('thead').children('tr').children('th').each(function (index, el) {
var type = 'Content';
if ($(this).data('type')) type = $(this).data('type');
if (type == 'Content') {
var field = $(this).data('field');
fileds[index] = field;
}
else if (type == 'CheckBox') {
ischeckbox = true;
}
});
$.ajax({
url: url,
type: 'post',
dataType: 'json',
})
.done(function (json) {
//向表格内新增内容
var tbody = '';
$.each(json, function (index, el) {
var tr = "<tr>";
if (ischeckbox) {//生成复选按钮
//tr+='<td><div class="checker"><span><input class="checkboxes" type="checkbox"></span></div></td>'
tr += '<td><input type="checkbox"></td>'
}
$.each(fileds, function (i, el) {//生成内容
if (fileds[i]) {
tr += '<td>' + formatJsonData(json[index][fileds[i]]) + '</td>';
}
});
tr += "</tr>";
tbody += tr;
});
table.children('tbody').empty();
table.children('tbody').append(tbody);//显示数据
if (selectIds) {//将需要选中的行设为选中状态
selectIds.each(function (index, el) {
//建设中
});
}
table.children('tbody').addClass('sel');
table.children('tbody.sel').children('tr').click(function (event) {//点击行事件
$(this).toggleClass('active');//增加选中效果
if (ischeckbox) $(this).find('input[type="checkbox"]').attr('checked', $(this).hasClass('active'));//选择复选框
}); }).fail(function () {
alert("Err");
});
} //格式化JSON数据,比如日期
function formatJsonData(jsondata){
if(jsondata==null){
return '';
}
else if(/\/Date\(\d+\)/.exec(jsondata)){
var date = new Date(parseInt(jsondata.replace("/Date(", "").replace(")/", ""), 10));
return date.toLocaleString();
}
return jsondata;
}

用法:

<table class="table" id="GroupTable" data-url="@Url.Action("GetRoleGroups", "Account")">
<thead>
<tr>
<th data-type="CheckBox"></th>
<th data-field="ID">ID</th>
<th data-field="Name">名称</th>
<th data-field="Remark">简介</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
jQuery(document).ready(function ($) {
GetMultiLineSelectTable("#GroupTable");
});
</script>

<th data-type="CheckBox"></th>代表需要显示复选框,不想要复选框直接删掉就行了

获取选中的行ID:

function GetGroupTableSelectIds(){
var selects=$('#GroupTable').children('tbody').children('tr.active');
var ids=new Array();
selects.each(function(index, el) {
ids[index]=el.cells[1].innerHTML;
});
return ids;
}

Jquery通过AJAX从后台获取数据显示在表格上(复选)的更多相关文章

  1. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

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

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  3. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  4. jquery如何通过ajax请求获取后台数据显示在表格上

    1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="ht ...

  5. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

  6. jsTree通过AJAX从后台获取数据

    页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...

  7. 原生js,jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  8. ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)

    写在前面: 最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格,下面就来说说从后台获取数据并在前台页面进行完美展示.啊哈哈哈..(天啦,坐我旁边的丽姐貌似炒股 一个月可以搞几十万 ...

  9. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

随机推荐

  1. Django学习笔记之视图高级-错误处理

    错误处理 在一些网站开发中.经常会需要捕获一些错误,然后将这些错误返回比较优美的界面,或者是将这个错误的请求做一些日志保存.那么我们本节就来讲讲如何实现. 常见的错误码 404:服务器没有指定的url ...

  2. Taro 常用 API

    table th:first-of-type { width: 300px; } Taro 常用 API 说明 网址 Taro.getSystemInfoSync() 获取系统信息同步接口. http ...

  3. os常用模块,json,pickle,shelve模块,正则表达式(实现运算符分离),logging模块,配置模块,路径叠加,哈希算法

    一.os常用模块 显示当前工作目录 print(os.getcwd()) 返回上一层目录 os.chdir("..") 创建文件包 os.makedirs('python2/bin ...

  4. fatal error: No such file or directory

    在fase_ws中编译ground_car包,遇如下报错: /home/gordon/fase_ws/src/fsae/ground_car/plugins/gazebo_ros_block_lase ...

  5. MySQL 5.7版本 sql_mode=only_full_group_by 问题

    具体错误: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in ...

  6. Lubuntu下安装Python3.6

    Lubuntu下系统自带的Python版本是2.X,由于开发环境要求Python3,于是我们安装Python3.6 1.在终端输入以下命令: sudo add-apt-repository ppa:j ...

  7. Spring核心模块:IoC容器介绍

    1.IoC容器运用的是控制反转模式. 2.IoC容器负责管理对象之间的依赖关系,并完成对象的注入. 3.在IoC设计中,会将依赖关系注入到特定组件中,其中setter注入和构造器注入是主要的注入方式. ...

  8. TensorFlow实现回归

    数据:fetch_california_housing(加利福尼亚的房价数据) 1.解析解法 import tensorflow as tf import numpy as np from sklea ...

  9. springBoot的第一个程序

    创建一个springBoot工程 然后输入工程名字 然后选择要导入的依赖jar包,这里只勾选了web 然后目录结构 创建一个controller必须在aplication.properties的同级目 ...

  10. java.lang.Byte 类源码浅析

    Byte 类字节,属于Number. public final class Byte extends Number implements Comparable<Byte> { /** * ...