JQuery mendapatkan maklumat dari latar belakang melalui AJAX dan memaparkannya di atas meja dan menyokong selection_jquery baris

Saya tidak mahu menggunakan gaya Easyui, tetapi saya mahu fungsi jadualnya pada asalnya saya ingin mencari pemalam yang berkaitan dalam talian, tetapi apabila saya tidak menemuinya, saya mula menulisnya sendiri. tidak mengharapkan ia menjadi begitu mudah.

Kod belakang: (Ini tidak penting)

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

Kod halaman:

<table class="table" id="DictTypeTable">
 <thead>
  <tr>
   <th>ID</th>
   <th>标题</th>
   <th>简介</th>
  </tr>
 </thead>
 <tbody class="sel"></tbody>
</table>

kod javascript: (perlu dipanggil dalam $(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");
   });
}

Untuk mengikat acara selepas borang dijana:

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);//操作代码，这里是显示另一个表格数据
  });
}

Akhir sekali di sini ialah kod untuk mendapatkan ID item yang dipilih:

function GetTypeTableSelectId() {
  return $('#DictTypeTable tbody.sel tr.active td:eq(0)').text();
}