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

前端技术 2023/09/05 JavaScript

不想用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();
}

本文地址：https://www.stayed.cn/item/12711

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案