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

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

WBOY

Lepaskan： 2016-05-16 15:39:08

asal

1249 orang telah melayarinya

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

Salin selepas log masuk

Kod halaman:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk