Heim >Web-Frontend >js-Tutorial >JQuery ruft Informationen aus dem Hintergrund über AJAX ab, zeigt sie in der Tabelle an und unterstützt die Zeilenauswahl_jquery

JQuery ruft Informationen aus dem Hintergrund über AJAX ab, zeigt sie in der Tabelle an und unterstützt die Zeilenauswahl_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:081257Durchsuche

Ich wollte nicht den Stil von Easyui verwenden, aber ich wollte seine Tabellenfunktion. Ursprünglich wollte ich online nach verwandten Plug-Ins suchen, aber als ich sie nicht finden konnte, habe ich angefangen, es selbst zu schreiben. Ich hätte nicht erwartet, dass es so einfach ist.

Backend-Code: (Dies ist nicht wichtig)

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

Seitencode:

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

Javascript-Code: (muss in $(document).ready(function ($){ }) aufgerufen werden

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

So binden Sie das Ereignis, nachdem das Formular generiert wurde:

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

Zuletzt ist hier der Code, um die ID des ausgewählten Artikels zu erhalten:

function GetTypeTableSelectId() {
  return $('#DictTypeTable tbody.sel tr.active td:eq(0)').text();
}
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn