Pop up data jadual yang diperlukan dengan mengklik pada jqgrid table_jquery

Pertama, berikan penjelasan ringkas tentang pemalam grid Jqgrid. Di antara banyak pemalam jadual, Jqgrid mempunyai ciri yang sangat tersendiri.

Ciri-ciri adalah seperti berikut:

Lengkapkan fungsi pembentangan jadual dan pengiraan, termasuk menukar halaman, mengisih medan, mengumpulkan, menambah, mengubah suai dan memadam data, dsb.

Bar alat tersuai

Bar alat Navigator lalai memudahkan untuk menggunakan fungsi seperti menambah, memadam, mengedit, melihat dan mencari.

Fungsi paging lengkap

Klik pengepala mana-mana medan untuk memilih medan itu sebagai item pengisihan. Sama ada tertib menaik atau menurun boleh diterima.

Pemformat tindakan pratetap boleh melakukan operasi dengan cepat dan intuitif pada setiap data.

Menyokong berbilang format data. Seperti json, xml, array, dll.

Berikut ialah contoh kod untuk memperkenalkan kepada anda data jadual yang diperlukan untuk memaparkan data jadual yang diperlukan dengan mengklik pada jadual jqgrid Kandungan khusus adalah seperti berikut:

Pertama, kami mentakrifkan fungsi dan kemudian merujuknya terus dalam 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函数

Berikut ialah fail JS yang memaparkan jadual

$(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 mengosongkan semua data baris dalam jadual

Kaedah untuk jqGrid mengosongkan data dalam jadual adalah seperti berikut:

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