Affichez les données de table requises en cliquant sur jqgrid table_jquery

Tout d'abord, donnez une brève explication du plug-in de grille Jqgrid. Parmi les nombreux plug-ins de tables, Jqgrid possède des fonctionnalités très distinctives.

Les fonctionnalités sont les suivantes :

Fonctions complètes de présentation de tableau et de calcul, y compris le changement de page, le tri des champs, le regroupement, l'ajout, la modification et la suppression de données, etc.

Barre d'outils personnalisée

La barre d'outils du Navigateur par défaut facilite l'utilisation de fonctions telles que l'ajout, la suppression, la modification, l'affichage et la recherche.

Fonction de pagination complète

Cliquez sur l'en-tête de n'importe quel champ pour sélectionner ce champ comme élément de tri. L'ordre croissant ou décroissant est acceptable.

Le formateur d'actions prédéfinies peut effectuer des opérations rapidement et intuitivement sur chaque donnée.

Prend en charge plusieurs formats de données. Tels que json, xml, array, etc.

Ce qui suit est un exemple de code pour vous présenter les données de table requises pour afficher les données de table requises en cliquant sur la table jqgrid. Le contenu spécifique est le suivant :

Tout d'abord, nous définissons une fonction puis nous la référençons directement dans 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函数

Ce qui suit est le fichier JS qui affiche le tableau

$(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 efface toutes les données de ligne du tableau

La méthode utilisée par jqGrid pour effacer les données du tableau est la suivante :

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