Rufen Sie die erforderlichen Tabellendaten auf, indem Sie auf jqgrid table_jquery klicken

Erklären Sie zunächst kurz das Jqgrid-Grid-Plug-in. Unter den vielen Tabellen-Plug-Ins weist Jqgrid sehr charakteristische Merkmale auf.

Die Funktionen sind wie folgt:

Umfassende Tabellenpräsentations- und Berechnungsfunktionen, einschließlich Seitenwechsel, Feldsortierung, Gruppierung, Hinzufügen, Ändern und Löschen von Daten usw.

Angepasste Symbolleiste

Die standardmäßige Navigator-Symbolleiste erleichtert die Verwendung von Funktionen wie Hinzufügen, Löschen, Bearbeiten, Anzeigen und Suchen.

Vollständige Paging-Funktion

Klicken Sie auf die Kopfzeile eines beliebigen Felds, um dieses Feld als Sortierelement auszuwählen. Es ist entweder eine aufsteigende oder eine absteigende Reihenfolge zulässig.

Der voreingestellte Aktionsformatierer kann schnell und intuitiv Vorgänge für alle Daten ausführen.

Unterstützt mehrere Datenformate. Wie JSON, XML, Array usw.

Das Folgende ist ein Codebeispiel, das Ihnen die erforderlichen Tabellendaten vorstellt, indem Sie auf die jqgrid-Tabelle klicken. Der spezifische Inhalt lautet wie folgt:

Zuerst definieren wir eine Funktion und referenzieren sie dann direkt in 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函数

Das Folgende ist die JS-Datei, die die Tabelle anzeigt

$(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 löscht alle Zeilendaten in der Tabelle

Die Methode für jqGrid zum Löschen der Daten in der Tabelle ist wie folgt:

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