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");