jqgrid table_jquery をクリックして、必要なテーブル データをポップアップ表示します。

まず、Jqgrid グリッド プラグインについて簡単に説明します。数あるテーブルプラグインの中でも、Jqgridは非常に特徴的な機能を持っています。

特徴は次のとおりです:

ページの変更、フィールドの並べ替え、グループ化、データの追加、変更、削除などを含む、完全なテーブルのプレゼンテーションと計算機能。

カスタマイズされたツールバー

デフォルトのナビゲーター ツールバーを使用すると、追加、削除、編集、表示、検索などの機能を簡単に使用できます。

完全ページング機能

任意のフィールドのヘッダーをクリックして、そのフィールドを並べ替え項目として選択します。昇順でも降順でも構いません。

プリセットアクションフォーマッタは、各データに対する操作を迅速かつ直感的に実行できます。

複数のデータ形式をサポートします。 json、xml、配列など。

以下は、jqgrid テーブルをクリックして必要なテーブル データをポップアップするために必要なテーブル データを紹介するコード例です。

まず、関数を定義し、それを JQuery で直接参照します。

function GetJqGridRowValue(jgrid, code) {
 var KeyValue = "";
 var selectedRowIds = $(jgrid).jqGrid("getGridParam", "selarrrow");
 if (selectedRowIds != "") {
  var len = selectedRowIds.length;
  for (var i = 0; i < len ; i++) {
   var rowData = $(jgrid).jqGrid('getRowData', selectedRowIds[i]);
   KeyValue += rowData[code] + ",";
  }
  KeyValue = KeyValue.substr(0, KeyValue.length - 1);
 } else {
  var rowData = $(jgrid).jqGrid('getRowData', $(jgrid).jqGrid('getGridParam', 'selrow'));
  KeyValue = rowData[code];
 }
 return KeyValue;
}//自定义GetJqGridRowValue函数

以下はテーブルを表示するJSファイルです

$(function () {
 $("#group").jqGrid({
  url: '/Group/GetGroup',
  datatype: 'json',
  mtype: 'Get',
  colNames: ['GRP_ID', 'GRP_NAME', 'GRP_DESCRIPTION'],//GROUP
  colModel: [
     { key: true, hidden: true, name: 'GRP_ID', index: 'GRP_ID' },
     { key: false, name: 'GRP_NAME', index: 'GRP_NAME', editable: true },
     { key: false, name: 'GRP_DESCRIPTION', index: 'GRP_DESCRIPTION', editable: true },
  ],
  ondblClickRow: function (rowid) {
   var td_id = GetJqGridRowValue("#group", "GRP_ID");
   alert(td_id);
  },//点击获取gqgird的当前列的'GRP_ID'的值
  pager: jQuery('#pager1'),
  rowNum: 5,
  rowList: [5, 10, 15, 20],
  height: '19%',
  viewrecords: true,
  caption: 'Group_Table',
  emptyrecords: '没有记录显示',
  jsonReader: {
   rows: 'rows',
   page: 'page',
   total: 'total',
   records: 'records',
   repeatitems: false,
   id: '0',
   editurl: '/Group/EditGroup'
  },
  autowidth: true,
  multiselect: false,//是否多选
 });
 jQuery("#group").jqGrid('navGrid', "#pager1",
  { edit: true, add: true, del: true, position: 'left', alerttext: "请选择需要操作的数据行!" },
 {
  zIndex: 100,
  url: '/Group/EditGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  recreateForm: true,
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 },
 {
  zIndex: 100,
  url: '/Group/CreateGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 },
 {
  zIndex: 100,
  url: '/Group/DeleteGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  recreateForm: true,
  msg: "你确定要删除么？",
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 }
 );
});

ps:jqGrid はテーブル内のすべての行データをクリアします

jqGrid がテーブル内のデータをクリアするメソッドは次のとおりです:

jQuery("#gridTable").jqGrid("clearGridData");