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从后台获取信息并显示在表格上的类》,可以直接调用,不需要重新写了。

  • 相关阅读:
    ubuntu18.04 常用命令
    docker常用命令
    git
    y7000 intel nvidia 双显卡安装Ubuntu16.04
    linux中fork() 函数详解
    理解GBN协议
    C++ sort
    最近点对-分治
    方便查看 linux/kernel/system_call.s
    方便查看 linux/kernel/asm.s
  • 原文地址:https://www.cnblogs.com/ANPY/p/4800353.html
Copyright © 2011-2022 走看看