zoukankan      html  css  js  c++  java
  • 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();
    }

    UPDATE in 2015-9-21

     新版:《jquery通过AJAX从后台获取信息并显示在表格上的类》,可以直接调用,不需要重新写了。

  • 相关阅读:
    C# 如何得到局域网中的计算机名?
    设计模式之Factory(转帖)[学习用]
    byte类型特殊的地方
    原码、反码和补码
    由Public key生成Public key token
    .Net位运算符&,|,!,^,<<,>>
    强命名程序集,签名,延迟签名
    把16进制字符转换成byte数组
    SHA1哈希算法
    .NET工具篇(四)—SN.EXE
  • 原文地址:https://www.cnblogs.com/ANPY/p/4800353.html
Copyright © 2011-2022 走看看