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

不想用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();
}
时间: 2024-11-06 07:15:45

jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中。的相关文章

jsTree通过AJAX从后台获取数据

页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { InitMenuTree(); }); function InitMenuTree() { $('#MenuTree').data('jstree', false); $.getJSON('@Url.Action("GetMenuTree", "AdminMenu")

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

通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有参数的方法调用 示例代码如下:前台jQuery代码:$(function() {  知道的一种就是ajax调后台的方法. 1.有参数的方法调用 示例代码如下: 前台jQuery代码: [plain] view plaincopyprint? <span style="font-size:18p

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

微信小程序--通过请求网页获取信息并显示

效果描述: 按动主页按钮跳转至列表页,在列表页显示请求网页所获取的信息,并通过所得信息的id的不同,链接到不同的网页进一步获取不同信息. 触碰按钮跳转至列表页触碰表题按钮跳转至详情页,其中不同的按钮对应的详情页内容不同而格式相同. 这样的好处是,可以通过网页信息的改变自动改变页面信息. 流程: 使用Api: wx.request() //请求网页信息wx.navigateTo()  //跳转页面 注意点: 1.在列表页,要将网页上获取的信息根据id的不同,选择对应信息显示在列表页,并将其显示在详

jQuery使用ajax方法提交登陆信息时,遇到特殊字符&amp;

当我在做登陆页面的时候,常常会用到ajax方法来检测用户信息所填写的内容是否符合规范要求.一开始,为了简单明了,快速实现功能,在使用jQuery时,是这样写的: $.ajax({ url : "{:U('public/checklogin')}", cache : false, type : 'POST', dataType : 'json', data : 'username='+$('#username').val()+'&password='+$('#password')

jQuery使用ajax跨域获取数据

var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld";  jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded", dataType: "html&q

jQuery通过ajax获得后台json数据给form表单赋值

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话,获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中,这样未免太过复杂和太多代码,所以我根据了一些大神的回答,总结了一个很好用的jQuery函数. jQuery-load方法调用: $('#form').form('load',URL); 页面表单: <span

jquery实现ajax提交表单信息

最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

ajax从服务器获取信息并拼接显示在table

1.页面代码 <body> <h1>显示所有员工信息</h1> <div> <table class="table"> @*标题*@ <thead> <tr> <th>账号</th> <th>真实姓名</th> <th>电话</th> <th>密码</th> <th>状态</th> &