ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery は AJAX を通じてバックグラウンドから情報を取得し、それをテーブルに表示し、行 select_jquery をサポートします。

JQuery は AJAX を通じてバックグラウンドから情報を取得し、それをテーブルに表示し、行 select_jquery をサポートします。

WBOY
リリース: 2016-05-16 15:39:08
オリジナル
1268 人が閲覧しました

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();
}
ログイン後にコピー
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート